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

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

@@ -1,3 +1,9 @@
+.group {
+  display: block;
+}
+.group--hidden {
+  display: none;
+}
 .group ul {
   padding: 0;
 }
@@ -11,6 +17,7 @@
   padding: var(--ds-spacing-2xSmall);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-semibold);
+  line-height: var(--ds-lineHeight-large);
 }
 .group-label.shadow {
   box-shadow: 0 -2px 7px var(--ds-overlay-black-50);

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

@@ -1,15 +1,31 @@
 import { h } from "@stencil/core";
+import classNames from "classnames";
+import { transformTagName } from "../../../utils/utils";
 export class DsOptionGroup {
+    el;
     dsLabel;
+    dsHidden = false;
+    dsMouseDownPreventDefault = false;
     groupId;
     dsLabelObserver(newValue) {
         this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
     }
+    async dsHasVisibleOptions() {
+        const options = Array.from(this.el.querySelectorAll(transformTagName('ds-option', 'ds-option-group', this.el)));
+        return options.some(option => !option.dsHidden);
+    }
     componentWillLoad() {
         this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
     }
+    onMouseDown(event) {
+        if (this.dsMouseDownPreventDefault) {
+            event.preventDefault();
+        }
+    }
     render() {
-        return (h("div", { key: 'c764a70cf7cd2881404ea90b114957227259d37c', class: "group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: '6a38a5db89ff8462704c740a7921e40312a9f466', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: 'b6bac535b5c569175f9fb84550d823829208142b' })));
+        return (h("div", { key: '873571d0c78360054d6f8352b2a14ef8d06803e8', class: classNames('group', {
+                'group--hidden': this.dsHidden,
+            }), role: "group", "aria-labelledby": this.groupId }, h("div", { key: '07c960ebdd6920c7f94d1e035086f3205909a183', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: '214b727349c10865482e50f707764c985eb3abf5' })));
     }
     static get is() { return "ds-option-group"; }
     static get encapsulation() { return "scoped"; }
@@ -43,6 +59,46 @@ export class DsOptionGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "dsHidden": {
+                "type": "boolean",
+                "attribute": "ds-hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the group will be hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsMouseDownPreventDefault": {
+                "type": "boolean",
+                "attribute": "ds-mouse-down-prevent-default",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used internally in combobox to prevent default behavior on mousedown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -51,10 +107,45 @@ export class DsOptionGroup {
             "groupId": {}
         };
     }
+    static get methods() {
+        return {
+            "dsHasVisibleOptions": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDsOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLDsOptionElement"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "dsLabel",
                 "methodName": "dsLabelObserver"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "onMouseDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -65,6 +65,7 @@
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
+  margin-top: -2.75rem;
   flex: 0 0 auto;
   min-height: 0;
   position: sticky;

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

@@ -4,6 +4,7 @@ export class DsOptions {
     el;
     optionsListRef;
     optionsListInnerRef;
+    dsId;
     dsSelectedValue;
     dsOptions = [];
     dsActiveIndex = 0;
@@ -103,12 +104,12 @@ export class DsOptions {
         }
     };
     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 = transformTagName('ds-icon', 'ds-options', this.el);
         const DsSpinner = transformTagName('ds-spinner', 'ds-options', this.el);
-        return (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 }, h("slot", { key: '9aaef6b026ca0b5d8c7264ee69457df801fbdc19', name: "groups" }), h("div", { key: '399b0989af2d6cd0eadc10e18b10e2dac2e0f976', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '5eabc020be41e0fb2afcdb5c4e2cb3519212ac00', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h(DsSpinner, { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: 'a3180baebc60c132bd328e10fa77a554642a9d22', class: "bottom-scrim", "aria-hidden": "true" }))));
+        return (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 }, h("slot", { key: '742bef67faea9b6b97cb20784be1c3116c3bd896', name: "groups" }), h("div", { key: '0b3463b06faac8bf302d065e209789d0cd1f023c', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '9af505259c0cd9f0e4102db26f2d3dd3dfd61a11', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h(DsSpinner, { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: '0587f561552f1634a572ed5a09529cb8fecacb0f', class: "bottom-scrim", "aria-hidden": "true" }))));
     }
     static get is() { return "ds-options"; }
     static get encapsulation() { return "scoped"; }
@@ -124,6 +125,25 @@ export class DsOptions {
     }
     static get properties() {
         return {
+            "dsId": {
+                "type": "string",
+                "attribute": "ds-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique `id` attribute of the options element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "dsSelectedValue": {
                 "type": "string",
                 "attribute": "ds-selected-value",
@@ -284,7 +304,7 @@ export class DsOptions {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "\"We couldn\u2019t load the options\""
+                "defaultValue": "'We couldn\u2019t load the options'"
             },
             "dsOptionsErrorText": {
                 "type": "string",
@@ -304,7 +324,7 @@ export class DsOptions {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "\"Try again or if the problem persists contact support.\""
+                "defaultValue": "'Try again or if the problem persists contact support.'"
             }
         };
     }

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.css

@@ -0,0 +1,38 @@
+.ds-options-message {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ds-spacing-2xSmall);
+  height: 18.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+.ds-options-message__error {
+  color: var(--ds-palette-red-70);
+  text-align: center;
+}
+.ds-options-message__error__icon {
+  display: inline-block;
+}
+.ds-options-message__error__title, .ds-options-message__no-results__title {
+  text-align: center;
+  color: var(--ds-palette-black-95);
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-semibold);
+  margin-top: var(--ds-spacing-xSmall);
+  margin-bottom: var(--ds-spacing-2xSmall);
+}
+.ds-options-message__no-results__title {
+  hyphens: auto;
+}
+.ds-options-message__error__text, .ds-options-message__loading__text, .ds-options-message__no-results__text {
+  color: var(--ds-palette-black-95);
+  text-align: center;
+  font-size: var(--ds-fontSize-16);
+}
+.ds-options-message__loading__text {
+  padding-top: var(--ds-spacing-2xSmall);
+  padding-bottom: var(--ds-spacing-large);
+  text-align: center;
+}

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.js

@@ -0,0 +1,203 @@
+import { h } from "@stencil/core";
+import { getLanguage } from "../../../store";
+import { loadingOptions, noResultsFound, thereAreOptionsToBrowse, tryADifferentSearchTerm, tryAgainOrIfTheProblemPersists, weCouldNotLoadOptions, } from "../../../utils/controls/controlUtils";
+import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
+export class DsOptionsMessage {
+    el;
+    dsLoading = false;
+    dsError = false;
+    dsNoResults = false;
+    dsErrorTitle = weCouldNotLoadOptions();
+    dsErrorText = tryAgainOrIfTheProblemPersists();
+    dsLoadingText = loadingOptions();
+    dsNoResultsTitle = noResultsFound();
+    dsNoResultsText = tryADifferentSearchTerm();
+    render() {
+        const DsIcon = transformTagName('ds-icon', 'ds-options-message', this.el);
+        const DsSpinner = transformTagName('ds-spinner', 'ds-options-message', this.el);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-options-message', this.el);
+        const baseClass = 'ds-options-message';
+        const errorClass = `${baseClass}__error`;
+        const loadingClass = `${baseClass}__loading`;
+        const noResultsClass = `${baseClass}__no-results`;
+        return (h("div", { key: 'bc45f7277c4b41c7abf84d84ca96f276bbe4ec5b', role: "status", "aria-live": "polite", "aria-atomic": "true" }, !this.dsLoading && !this.dsError && !this.dsNoResults ? (h(DsVisuallyHidden, null, thereAreOptionsToBrowse())) : (h("div", { class: baseClass }, this.dsError ? (h("div", { class: errorClass }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: `${errorClass}__icon` }), h("div", { class: `${errorClass}__title` }, this.dsErrorTitle), h("div", { class: `${errorClass}__text` }, this.dsErrorText))) : this.dsLoading ? (h("div", { class: loadingClass }, h(DsSpinner, { dsSize: "large" }), h("div", { class: `${loadingClass}__text` }, this.dsLoadingText))) : (h("div", { class: noResultsClass }, h("div", { class: `${noResultsClass}__title`, lang: getLanguage() }, this.dsNoResultsTitle), h("div", { class: `${noResultsClass}__text` }, this.dsNoResultsText)))))));
+    }
+    static get is() { return "ds-options-message"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-options-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-options-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsLoading": {
+                "type": "boolean",
+                "attribute": "ds-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsError": {
+                "type": "boolean",
+                "attribute": "ds-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsNoResults": {
+                "type": "boolean",
+                "attribute": "ds-no-results",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a no results state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsErrorTitle": {
+                "type": "string",
+                "attribute": "ds-error-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title to display when there is an error loading options (default: \"We could not load options.\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "weCouldNotLoadOptions()"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "attribute": "ds-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when there is an error loading options (default: \"Try again or if the problem persists, contact support.\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "tryAgainOrIfTheProblemPersists()"
+            },
+            "dsLoadingText": {
+                "type": "string",
+                "attribute": "ds-loading-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when options are loading (default: \"Loading options...\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "loadingOptions()"
+            },
+            "dsNoResultsTitle": {
+                "type": "string",
+                "attribute": "ds-no-results-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title to display when there are no results (default: \"No results found\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "noResultsFound()"
+            },
+            "dsNoResultsText": {
+                "type": "string",
+                "attribute": "ds-no-results-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when there are no results (default: \"Try a different search term.\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "tryADifferentSearchTerm()"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+declareComponentDependencies([h("ds-icon", null), h("ds-spinner", null), h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js

@@ -432,7 +432,7 @@ export class DsRadioButton {
                     "references": {
                         "DsRadioButtonChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
+                            "path": "/home/joel/dev/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
                             "id": "src/components/01-base-components/ds-radio-button/ds-radio-button.tsx::DsRadioButtonChangeEvent"
                         }
                     }

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

@@ -375,7 +375,7 @@ export class DsRadioButtonGroup {
                     "references": {
                         "DsRadioButtonGroupChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
+                            "path": "/home/joel/dev/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
                             "id": "src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx::DsRadioButtonGroupChangeEvent"
                         }
                     }

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.js

@@ -9,7 +9,7 @@ const meta = {
       ds-direction=${args.dsDirection}
       ds-error-text=${args.dsErrorText}
       ds-value=${args.dsValue}
-      ds-required=${args.dsRequired}
+      ?ds-required=${args.dsRequired}
     >
       <ds-radio-button ds-value="1" ds-text="Value text 1"></ds-radio-button>
       <ds-radio-button ds-value="2" ds-text="Value text 2"></ds-radio-button>
@@ -77,7 +77,7 @@ export const CustomTagName = {
       ds-direction=${args.dsDirection}
       ds-error-text=${args.dsErrorText}
       ds-value=${args.dsValue}
-      ds-required=${args.dsRequired}
+      ?ds-required=${args.dsRequired}
     >
       <custom-ds-radio-button ds-value="1" ds-text="Value text 1"></custom-ds-radio-button>
       <custom-ds-radio-button ds-value="2" ds-text="Value text 2"></custom-ds-radio-button>

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js

@@ -11,7 +11,7 @@ const meta = {
       ds-direction=${args.dsDirection}
       ds-value=${args.dsValue}
       ds-error-text=${args.dsErrorText}
-      ds-required=${args.dsRequired}>
+      ?ds-required=${args.dsRequired}>
       <ds-radio-button ds-text="Value text 1"></ds-radio-button>
       <ds-radio-button ds-text="Value text 2"></ds-radio-button>
       <ds-radio-button ds-text="Value text 3"></ds-radio-button>

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

@@ -197,7 +197,7 @@ export class DsSelect {
         const activeOption = allOptions[this.activeIndex];
         if (activeOption) {
             activeOption.focus();
-            activeOption.scrollIntoView({ block: 'nearest' });
+            activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
         }
     }
     getAllOptions() {
@@ -291,7 +291,7 @@ export class DsSelect {
             } }, 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 }, h("slot", null)))), !!this.dsErrorText && (h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     render() {
-        return (h("div", { key: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+        return (h("div", { key: '9e3e4a236e65ad5002e3bcd3c86b4be35664f5d6', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
             ? this.renderNativeSelect()
             : this.renderCustomSelect()));
     }
@@ -374,7 +374,7 @@ export class DsSelect {
                 "attribute": "ds-variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "'native' | 'default'",
+                    "original": "'default' | 'native'",
                     "resolved": "\"default\" | \"native\"",
                     "references": {}
                 },
@@ -382,7 +382,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the variant of the select component. \"native\" uses the browser\u2019s default select, while \"default\" uses a custom implementation."
+                    "text": "Defines the variant of the select component:\n- \"default\" uses a custom implementation\n- \"native\" uses the browser\u2019s default select"
                 },
                 "getter": false,
                 "setter": false,
@@ -561,7 +561,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, shows an options error."
                 },
                 "getter": false,
                 "setter": false,
@@ -581,7 +581,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Title to display when there is an error loading options."
                 },
                 "getter": false,
                 "setter": false,
@@ -601,7 +601,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text to display when there is an error loading options."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -44,11 +44,11 @@ export class DsSpinner {
         const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = (index) => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (h("div", { key: '41ac2e9d4a4d47ba260cf0573c625c4cc3285772', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (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 }, h("div", { key: '8f275e0bdbdd5ace7ad4c9cf3c7ce367ba5882ee', class: "ds-spinner__spinner" }, h("div", { key: '2ae06bbf92492d0f6c63054c360257da685a2310', class: segmentClasses(1) }), h("div", { key: 'c5a12fd927eee963657c2a82d91ecfa81eb88a2d', class: segmentClasses(2) }), h("div", { key: '80c36207963e53a3ca4041d993e60854f74dccae', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'aea851246b5b233128c94b4dc49eee409d19cc15' }, h("span", { key: '6ffda5a7cc47eb4842dc8cf945ae7a2dbb4f49c7' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '020b3ccab3864a19ce3939661183731ae4db1d08', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: '0ef5e3de363770fc1b15b4c20b78246f4c11eb03', class: "ds-spinner__spinner" }, h("div", { key: '65f925540b6fd8c0214d6392e3c6fe8751fc7de4', class: segmentClasses(1) }), h("div", { key: '1e062bc0fc9e78b9cd6d2413a61428d710f621b7', class: segmentClasses(2) }), h("div", { key: '520be4f4915f2c455ba58c009f12853b651f2f1b', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'b26675a2f64cc5833cbeeed1f7874b833352fa9f' }, h("span", { key: 'aedee4d1d142804207bb0764d212c0c7a9075a56' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '681c87db1c71a74461e68ba6702f3e766a7c4674', 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.js

@@ -16,7 +16,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: '40d1e7607357b556097b27c6aad58a1b2e5af0fb', class: classes }, h("slot", { key: '416e038155b38f758d5f31994ee45e619facff1b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'a276c53fd88b357f40a6a0227d79576318c0b708' }, this.dsHref ? (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" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: 'e0ec39cd2378889d15b4a22e62742e730ce33a21', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '5d8a76a14859706d464cd1adeb9ab5c582fa96f0', class: classes }, h("slot", { key: '362817b32966797fca889c46db2df2ab9fa30c97', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '1e85dfbd43e344798f6e839a690183f6a5f65f38' }, this.dsHref ? (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" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: '082057267859654374533f420dc774cbf9d4cdb1', 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

@@ -4,6 +4,7 @@
   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 {

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

@@ -6,7 +6,7 @@ export class DsTagGroup {
     render() {
         const assistiveTextId = this.dsAssistiveText ? 'ds-tag-group-assistive-text' : undefined;
         const ariaDescribedBy = assistiveTextId ? assistiveTextId : undefined;
-        return (h("div", { key: '5e132f0aa006d74722358f2ac3b0b74c4116ea9a', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '2fe72fffe735931ff5472162cac5b3babda6b957' }, this.dsLabel && (h("div", { key: '5388aa1fb591062e25c51f03390af5f34a9e81e9', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'd63eb8fc20ef2e361890a45709d2a7e54c4f9a02', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '35f882de376802e7048f4ea6b06291288d233c64', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
+        return (h("div", { key: '8dd881ca483b1141dc2805d1c366cf113e319983', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '8ade266da86fd06e2fec19e68dad547bffae769a' }, this.dsLabel && (h("div", { key: '4c3867f4c1ee11ee8afd2c94c07303212477e432', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'eb2cee2d745da0cc0782e7d7958973419eec8b45', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '2fd183e8bd7a02310d7b178513b7f5ceb39da676', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "shadow"; }