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

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

@@ -1,20 +1,42 @@
 import { h } from "@stencil/core";
-import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
+import classNames from "classnames";
+import { idGenerator, declareComponentDependencies, transformTagName } from "../../../utils/utils";
+const optionIdGenerator = idGenerator('ds-option');
 export class DsOption {
     el;
+    optionLabelTextRef;
+    dsOptionClick;
+    dsId = optionIdGenerator.next().value;
     dsValue;
     dsDisabled = false;
     dsDescription;
     dsActive = false;
     dsSelected = false;
+    dsHidden = false;
+    dsMouseDownPreventDefault = false;
+    dsFocusOnActiveChange = true;
     internalTabIndex = -1;
     optionRef;
+    onMouseDown(event) {
+        if (this.dsMouseDownPreventDefault) {
+            event.preventDefault();
+        }
+    }
+    onClick() {
+        this.dsOptionClick.emit(this.el);
+    }
     dsActiveObserver(newValue) {
         this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
-        if (newValue && !this.dsDisabled) {
+        if (newValue && !this.dsDisabled && this.dsFocusOnActiveChange) {
             this.dsFocus();
         }
     }
+    async dsGetLabel() {
+        return this.optionLabelTextRef?.textContent || '';
+    }
+    async dsGetGroup() {
+        return this.el.closest(transformTagName('ds-option-group', 'ds-option', this.el));
+    }
     async dsFocus() {
         this.optionRef?.focus();
     }
@@ -23,12 +45,12 @@ export class DsOption {
     }
     render() {
         const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: 'b051e2ccd61a02f1c33e5c74f7f66dec856e1d04', ref: el => this.optionRef = el, class: {
-                option: true,
-                active: this.dsActive,
-                selected: this.dsSelected,
-                disabled: this.dsDisabled,
-            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, h("span", { key: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
+        return (h("div", { key: '975d51fb896caf57c2ffca545f71c9dda33cfcfe', ref: el => (this.optionRef = el), id: this.dsId, class: classNames('ds-option', {
+                'ds-option--active': this.dsActive,
+                'ds-option--selected': this.dsSelected,
+                'disabled': this.dsDisabled,
+                'ds-option--hidden': this.dsHidden,
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex }, h("span", { key: 'ec79b16d03f6bdda6f533edc1cc9a96cf6364413', class: "option-label" }, h("span", { key: 'd3502cc899d73961ea2dea968519f97900e9459e', ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '449f853782f92f2adbf77b595646668a02bca4e0' })), this.dsDescription && h("span", { key: '3efb602ea3a9cd8f7dc4ca558d1101192f9fd1cd', class: "option-description" }, this.dsDescription)), this.dsSelected && h(DsIcon, { key: '790aaa6c644ef1ba0cf6b65e426c5c761a45e689', dsName: "check", class: "option-check", "aria-hidden": "true" })));
     }
     static get is() { return "ds-option"; }
     static get encapsulation() { return "scoped"; }
@@ -44,6 +66,26 @@ export class DsOption {
     }
     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 option element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "optionIdGenerator.next().value as string"
+            },
             "dsValue": {
                 "type": "string",
                 "attribute": "ds-value",
@@ -76,7 +118,7 @@ export class DsOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the option is disabled."
+                    "text": "If true, the option is disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -115,7 +157,7 @@ export class DsOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the option is currently active (focused)."
+                    "text": "If true, the option is currently active (focused)."
                 },
                 "getter": false,
                 "setter": false,
@@ -135,12 +177,72 @@ export class DsOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the option is currently selected."
+                    "text": "If true, the option is currently selected."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "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 option 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"
+            },
+            "dsFocusOnActiveChange": {
+                "type": "boolean",
+                "attribute": "ds-focus-on-active-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used internally in select and combobox to control focus when the option becomes active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -149,8 +251,69 @@ export class DsOption {
             "internalTabIndex": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "dsOptionClick",
+                "name": "dsOptionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLDsOptionElement",
+                    "resolved": "HTMLDsOptionElement",
+                    "references": {
+                        "HTMLDsOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLDsOptionElement"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
+            "dsGetLabel": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get label text of the option.",
+                    "tags": []
+                }
+            },
+            "dsGetGroup": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLDsOptionGroupElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDsOptionGroupElement": {
+                            "location": "global",
+                            "id": "global::HTMLDsOptionGroupElement"
+                        }
+                    },
+                    "return": "Promise<HTMLDsOptionGroupElement>"
+                },
+                "docs": {
+                    "text": "Get the group of the option.",
+                    "tags": []
+                }
+            },
             "dsFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -177,5 +340,20 @@ export class DsOption {
                 "methodName": "dsActiveObserver"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "onMouseDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 declareComponentDependencies([h("ds-icon", null)]);

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

@@ -1,3 +1,81 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
+.group {
+  display: block;
+}
+.group--hidden {
+  display: none;
+}
 .group ul {
   padding: 0;
 }
@@ -6,11 +84,12 @@
   position: sticky;
   display: block;
   top: 0;
-  background-color: var(--ds-palette-black-03);
+  background-color: var(--ds-bgColor-neutralLight);
   z-index: 1;
   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

@@ -1,3 +1,75 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 .options-list-inner,
 .options-loading,
 .options-error {
@@ -44,10 +116,10 @@
 }
 
 .options-error {
-  color: var(--ds-palette-red-70);
+  color: var(--ds-textColor-danger);
 }
 .options-error--error-message {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   text-align: center;
 }
 .options-error--error-title {
@@ -65,6 +137,7 @@
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
+  margin-top: -2.75rem;
   flex: 0 0 auto;
   min-height: 0;
   position: sticky;
@@ -74,12 +147,12 @@
 
 .top-scrim {
   top: 0;
-  background: linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%);
+  background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
 
 .bottom-scrim {
   bottom: 0;
-  background: linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%);
+  background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
 
 .options-list.has-top-scrim .top-scrim {

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.'"
             }
         };
     }