@uh-design-system/component-library 1.5.0 → 1.5.1-rc.0

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

@@ -9,7 +9,7 @@ import { componentFactory } from "../../00-foundations/factories/componentFactor
 const variants = ['neutral', 'neutralWhite', 'info', 'success', 'attention', 'danger'];
 const customizableIconVariants = ['neutral', 'neutralWhite', 'info'];
 const isCustomizableIconVariant = (variant) => customizableIconVariants.includes(variant);
-export class DsNotification extends Mixin(componentFactory('ds-notification'), ariaDeprecationFactory) {
+export class DsNotification extends Mixin(componentFactory('ds-notification', { stopRootTracking: true }), ariaDeprecationFactory) {
     constructor() {
         super();
     }
@@ -41,16 +41,16 @@ export class DsNotification extends Mixin(componentFactory('ds-notification'), a
             return;
         this.headingLevel = value;
     }
-    icon;
+    _dsIcon;
     get dsIcon() {
-        return this.icon;
+        return this._dsIcon;
     }
     set dsIcon(value) {
         if (value && isCustomizableIconVariant(this.variant)) {
-            this.icon = value;
+            this._dsIcon = value;
             return;
         }
-        this.icon = this.variantIcon;
+        this._dsIcon = this.variantIcon;
     }
     dsDescription;
     dsDescriptionMaxWidth = '550px';
@@ -70,6 +70,9 @@ export class DsNotification extends Mixin(componentFactory('ds-notification'), a
                 return 'help_fill';
         }
     }
+    get icon() {
+        return this.dsIcon || this.variantIcon;
+    }
     get DsIcon() {
         return transformTagName('ds-icon', 'ds-notification', this.el);
     }
@@ -149,7 +152,7 @@ export class DsNotification extends Mixin(componentFactory('ds-notification'), a
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (h("div", { key: '4a33a2341cb0ddedbae84d141d0bde4c0ce54b8f', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: 'e3532247cd831b07110cdb896f362d67e4f00424', class: contentClass }, this.dsIcon && (h("div", { key: '6a49f7ba417d833f25d53e5d76b111212b4f3b3f', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: 'f836bfa593297f84170c7391f8d73a7fd6d4237b', dsName: this.dsIcon }))), h("div", { key: 'c9ee86cbdaf73853a7d1b5db7c2ad5b5ac3ff58d', class: textClass }, h("slot", { key: 'ef60097fe450dbe4074cd2f2c8c98b815e0e0d96', name: "heading" }, this.dsHeading && (h("div", { key: 'defc5e022ca33e908398d082cad0fe03e02cf018', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '195f482626decf81e679d0fd35c595dccf6d501b', name: "description" }, this.dsDescription && (h("div", { key: 'be1a3fdb821b62078d057c3f4c7f0fcd09e8facd', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'f3ec0b87eb5fa07fa06abb08502abee48bda182f' })), this.dsDismissable && (h(this.DsButton, { key: 'af7f0d6580693efc7a34a9e2592adbdec0c9f4d5', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '37979bae9dbbf7aaebd834c9cb1dda9dfeadc2e4', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (h("div", { key: '1b127bfbf8682ddc132597ab9d076fd9bb2e178b', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: '9c065c209815d5d169dcda3a8304c2b4ec3554e4', class: contentClass }, h("div", { key: 'dd8ebcae11527e8f19ec9dedaa11ffdef794ee70', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '791bedfc190ef9b8b6e9447ad6b1c24c080c2020', dsName: this.icon })), h("div", { key: '69fb517e3f2e9f836448f856a3814b5ddcfd343e', class: textClass }, h("slot", { key: '6d0fea417b1ba529ae2b0d6455b0773dcdb1c282', name: "heading" }, this.dsHeading && (h("div", { key: '8216f324647ba19a55bf52c121da33f95ac6033f', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '8e78e68b96b5262e03b663f3d290be56b84db1cc', name: "description" }, this.dsDescription && (h("div", { key: 'b6d058bfb696b3cd1bd38facecc9cc71cc9d6493', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'e5b44ec27865c3d1b8fdc7a74e98d36cbddc90a6' })), this.dsDismissable && (h(this.DsButton, { key: 'd45b6cc4ed0e6a327d0585b8fbaa503904fe7c7d', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '55b54131e78fffb47e01e97c8b7ca7918a3cfdf9', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,4 @@
-.ds-option__GqWYnG {
+.ds-option__0Yjiso {
   display: flex;
   align-items: center;
   justify-content: normal;
@@ -13,37 +13,37 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-option__GqWYnG:not(.ds-option__GqWYnG--multiple) {
+.ds-option__0Yjiso:not(.ds-option__0Yjiso--multiple) {
   justify-content: space-between;
 }
-.ds-option__GqWYnG--hidden {
+.ds-option__0Yjiso--hidden {
   display: none;
 }
-.ds-option__GqWYnG--disabled {
+.ds-option__0Yjiso--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__GqWYnG:hover:not(.ds-option__GqWYnG--disabled) {
+.ds-option__0Yjiso:hover:not(.ds-option__0Yjiso--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__GqWYnG:active:not(.ds-option__GqWYnG--disabled) {
+.ds-option__0Yjiso:active:not(.ds-option__0Yjiso--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__GqWYnG--active {
+.ds-option__0Yjiso--active {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__GqWYnG--active.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple) {
+.ds-option__0Yjiso--active.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple) {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__GqWYnG--multiple.ds-option__GqWYnG--disabled {
+.ds-option__0Yjiso--multiple.ds-option__0Yjiso--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__GqWYnG--multiple .ds-option__GqWYnG__checkbox {
+.ds-option__0Yjiso--multiple .ds-option__0Yjiso__checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,44 +56,44 @@
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-option__GqWYnG--multiple.ds-option__GqWYnG--disabled .ds-option__GqWYnG__checkbox {
+.ds-option__0Yjiso--multiple.ds-option__0Yjiso--disabled .ds-option__0Yjiso__checkbox {
   border-color: var(--ds-borderColor-transparent);
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-option__GqWYnG--multiple.ds-option__GqWYnG--disabled:not(.ds-option__GqWYnG--selected) .ds-option__GqWYnG__checkbox {
+.ds-option__0Yjiso--multiple.ds-option__0Yjiso--disabled:not(.ds-option__0Yjiso--selected) .ds-option__0Yjiso__checkbox {
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-option__GqWYnG--selected .ds-option__GqWYnG__checkbox {
+.ds-option__0Yjiso--selected .ds-option__0Yjiso__checkbox {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
   color: var(--ds-textColor-white);
   padding: var(--ds-spacing-4xSmall);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple) {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple).ds-option__GqWYnG--disabled {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple).ds-option__0Yjiso--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple) .ds-option__GqWYnG__description {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple) .ds-option__0Yjiso__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple) .ds-option__GqWYnG__check-icon {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple) .ds-option__0Yjiso__check-icon {
   visibility: visible;
   color: var(--ds-textColor-white);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple).ds-option__GqWYnG--disabled .ds-option__GqWYnG__check-icon {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple).ds-option__0Yjiso--disabled .ds-option__0Yjiso__check-icon {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple):hover:not(.ds-option__GqWYnG--disabled) {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple):hover:not(.ds-option__0Yjiso--disabled) {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-option__GqWYnG--selected:not(.ds-option__GqWYnG--multiple):active:not(.ds-option__GqWYnG--disabled) {
+.ds-option__0Yjiso--selected:not(.ds-option__0Yjiso--multiple):active:not(.ds-option__0Yjiso--disabled) {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-option__GqWYnG__label {
+.ds-option__0Yjiso__label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -102,14 +102,14 @@
   grid-column: 1;
   grid-row: 1;
 }
-.ds-option__GqWYnG__check-icon {
+.ds-option__0Yjiso__check-icon {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.ds-option__GqWYnG__description {
+.ds-option__0Yjiso__description {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -118,6 +118,6 @@
   grid-column: 1;
   grid-row: 2;
 }
-.ds-option__GqWYnG__description:not(:empty) {
+.ds-option__0Yjiso__description:not(:empty) {
   display: block;
 }

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

@@ -1,10 +1,13 @@
-import { h, Fragment } from "@stencil/core";
+import { h, Fragment, Mixin } from "@stencil/core";
 import classNames from "classnames";
-import { idGenerator, declareComponentDependencies, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
-const optionIdGenerator = idGenerator('ds-option');
-export class DsOption {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsOption extends Mixin(componentFactory('ds-option')) {
+    constructor() {
+        super();
+    }
     el;
     inheritedAttributes = {};
     observer;
@@ -14,7 +17,7 @@ export class DsOption {
     dsMounted;
     dsValueChange;
     dsLabelChange;
-    dsId = optionIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsValue;
     dsLabel;
     dsDisabled = false;
@@ -29,12 +32,12 @@ export class DsOption {
     get isMultiple() {
         return this.dsVariant === 'multiple';
     }
-    onMouseDown(event) {
+    handleMouseDown(event) {
         if (this.dsMouseDownPreventDefault) {
             event.preventDefault();
         }
     }
-    onClick() {
+    handleClick() {
         this.dsClick.emit();
     }
     dsActiveObserver(newValue) {
@@ -67,6 +70,9 @@ export class DsOption {
     }
     componentDidLoad() {
         this.dsMounted.emit();
+        if (!this.optionLabelTextRef) {
+            return;
+        }
         let oldLabel = this.optionLabelTextRef?.textContent || '';
         this.observer = new MutationObserver(mutations => {
             const newLabel = this.optionLabelTextRef?.textContent || '';
@@ -89,13 +95,13 @@ export class DsOption {
     render() {
         const baseClass = cx('ds-option');
         const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: 'f3b3d9431c291de33bc44172db062ea4fcadd9ed', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '03bf5935c1634a5a58fe3413b9d271db80339690', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--multiple`]: this.isMultiple,
                 [`${baseClass}--active`]: this.dsActive,
                 [`${baseClass}--selected`]: this.dsSelected,
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: 'c3406f80f847bea5ee8b8074f7d337069980a222', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: '88f66a28771ca6238b3c3015e7ea5d01e3d4a9d6', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h(Fragment, { key: '9cb09a61253d7aed983626a547209057994184a3' }, h("span", { key: '1407f9ee7ba6faae1140335bc364fd552c3ca1f3' }, h("span", { key: 'b2dde5cbf32871dc64b9ea1456a9e16ab07e5490', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: 'a78869160f7a66f6fe75b3b669b8633d595c2f60' }, this.dsLabel)), this.dsDescription && h("span", { key: 'c243fd5a045bf4d2218bff0ac8234b035365de0c', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: 'a3b690f4035cdc9619c2bfc1eb5d24f5a994a2e6', dsName: "check", class: `${baseClass}__check-icon` }))));
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: '4b041939dd10ebbd008632b6c0aa24dbf320cb96', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: 'f2d73fa9cee25da801676da4ebcaacd2d928a08e', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h(Fragment, { key: 'f012680202302f2f17eebab8eb3128af6657243b' }, h("span", { key: '94f81eb0e63259c73397f2cc5698060447049947' }, h("span", { key: '41aa57a61593bbd979b1363d1b57ad171b051fb4', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '3d928b73be0bd500f749ec39b83d3d86db7bc1c2' }, this.dsLabel)), this.dsDescription && h("span", { key: '490282557c565febbc6ed25c1ddfba4268b9e494', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: '42dd501dcc28fc896fa4430a58c9b44e58ba949c', dsName: "check", class: `${baseClass}__check-icon` }))));
     }
     static get is() { return "ds-option"; }
     static get encapsulation() { return "scoped"; }
@@ -129,7 +135,7 @@ export class DsOption {
                 "setter": false,
                 "reflect": true,
                 "attribute": "ds-id",
-                "defaultValue": "optionIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsValue": {
                 "type": "string",
@@ -497,13 +503,13 @@ export class DsOption {
     static get listeners() {
         return [{
                 "name": "mousedown",
-                "method": "onMouseDown",
+                "method": "handleMouseDown",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "click",
-                "method": "onClick",
+                "method": "handleClick",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1,14 +1,14 @@
-.ds-option-group__GqWYnG {
+.ds-option-group__0Yjiso {
   display: block;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-option-group__GqWYnG--hidden {
+.ds-option-group__0Yjiso--hidden {
   display: none;
 }
-.ds-option-group__GqWYnG ul {
+.ds-option-group__0Yjiso ul {
   padding: 0;
 }
-.ds-option-group__GqWYnG__label {
+.ds-option-group__0Yjiso__label {
   position: sticky;
   display: block;
   top: 0;
@@ -19,6 +19,6 @@
   font-weight: var(--ds-fontWeight-semibold);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-option-group__GqWYnG__label__shadow {
+.ds-option-group__0Yjiso__label__shadow {
   box-shadow: var(--ds-shadow-overflow);
 }

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

@@ -1,42 +1,44 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
-export class DsOptionGroup {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsOptionGroup extends Mixin(componentFactory('ds-option-group')) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     el;
     dsLabel;
     dsHidden = false;
     dsMouseDownPreventDefault = false;
-    groupId;
     get DsOptionTag() {
         return transformTagName('ds-option', 'ds-option-group', this.el);
     }
-    dsLabelObserver(newValue) {
-        this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
+    get groupId() {
+        return `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
     }
     async hasVisibleOptions() {
         const options = Array.from(this.el.querySelectorAll(this.DsOptionTag));
         return options.some(option => !option.dsHidden);
     }
     componentWillLoad() {
-        this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
         this.inheritedAttributes = {
             ...inheritAttributes(this, this.el),
             ...inheritAriaAttributes(this.el, ['aria-labelledby']),
         };
     }
-    onMouseDown(event) {
+    handleMouseDown(event) {
         if (this.dsMouseDownPreventDefault) {
             event.preventDefault();
         }
     }
     render() {
         const baseClass = cx('ds-option-group');
-        return (h("div", { key: '291ebd488597a455c8a48938732478e686a79d85', class: classNames(`${baseClass}`, {
+        return (h("div", { key: 'e57448cbaa27601c03a1fe9f162a26e0cbd0571c', class: classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '0e08dcdd6eb95fc52610fe9bbe2bd797d3d9fa91', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '47b187c03a4cec508d01d11dd4a5ca943bbd4978' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '34d8e066f87f3b83d1e1eb162c1bc272383e82e5', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '7b7d9ead024d2450c86432db80e035e04ef99578' })));
     }
     static get is() { return "ds-option-group"; }
     static get encapsulation() { return "scoped"; }
@@ -113,11 +115,6 @@ export class DsOptionGroup {
             }
         };
     }
-    static get states() {
-        return {
-            "groupId": {}
-        };
-    }
     static get methods() {
         return {
             "hasVisibleOptions": {
@@ -144,16 +141,10 @@ export class DsOptionGroup {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "dsLabel",
-                "methodName": "dsLabelObserver"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "mousedown",
-                "method": "onMouseDown",
+                "method": "handleMouseDown",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1,10 +1,10 @@
-.ds-options__GqWYnG__inner {
+.ds-options__0Yjiso__inner {
   max-height: 20rem;
   overflow: hidden;
   box-sizing: border-box;
 }
 
-.ds-options__GqWYnG {
+.ds-options__0Yjiso {
   position: relative;
   width: 100%;
   padding: 0;
@@ -12,10 +12,10 @@
   z-index: 0;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options__GqWYnG:focus {
+.ds-options__0Yjiso:focus {
   outline: none;
 }
-.ds-options__GqWYnG__inner {
+.ds-options__0Yjiso__inner {
   overflow-y: auto;
   list-style-type: none;
   padding: 0;
@@ -25,7 +25,7 @@
   display: flex;
   flex-direction: column;
 }
-.ds-options__GqWYnG__top-scrim, .ds-options__GqWYnG__bottom-scrim {
+.ds-options__0Yjiso__top-scrim, .ds-options__0Yjiso__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -36,23 +36,23 @@
   z-index: 1;
   display: none;
 }
-.ds-options__GqWYnG__top-scrim {
+.ds-options__0Yjiso__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-options__GqWYnG__bottom-scrim {
+.ds-options__0Yjiso__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-options__GqWYnG.has-top-scrim .ds-options__GqWYnG__top-scrim {
+.ds-options__0Yjiso.has-top-scrim .ds-options__0Yjiso__top-scrim {
   display: block;
 }
-.ds-options__GqWYnG.has-bottom-scrim .ds-options__GqWYnG__bottom-scrim {
+.ds-options__0Yjiso.has-bottom-scrim .ds-options__0Yjiso__bottom-scrim {
   display: block;
 }
-.ds-options__GqWYnG li {
+.ds-options__0Yjiso li {
   cursor: pointer;
 }
-.ds-options__GqWYnG li:hover {
+.ds-options__0Yjiso li:hover {
   background-color: var(--ds-palette-black-05);
 }

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

@@ -1,19 +1,22 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
-import { idGenerator, transformTagName } from "../../../utils/utils";
+import { transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { SCRIM_HEIGHT } from "../../../constants";
 import { multiselectable } from "../../../utils/controls/controlUtils";
-const optionsIdGenerator = idGenerator('ds-options');
-export class DsOptions {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsOptions extends Mixin(componentFactory('ds-options')) {
+    constructor() {
+        super();
+    }
     el;
     optionsListRef;
     optionsListInnerRef;
     inheritedAttributes = {};
     dsEsc;
     dsActiveIndexChange;
-    dsId = optionsIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsSelectedValue;
     dsActiveIndex = 0;
     dsLabelId;
@@ -130,10 +133,10 @@ export class DsOptions {
     };
     render() {
         const baseClass = cx('ds-options');
-        return (h("div", { key: '4f80bb50699d40e29e4aa324283aa33dd6edbfe8', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: 'f7263a82d5100ea95eee5db8ff9be591c9f38c41', id: this.dsId, class: classNames(baseClass, {
                 'has-bottom-scrim': this.hasBottomScrim,
                 'has-top-scrim': this.hasTopScrim,
-            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: 'a6068ce067d03e84e66b2be1cbad17f1c7e41e5b', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '61c1c263360d6d30a510e890276467ebf2cfe922', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: 'e437ed4db445c341a83c64bfcaca11bac65c154a' }), h("div", { key: '682abdf277fe537fa38e18d450a9f33eb6ddea1f', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
+            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: '4ca1b1fbe2acb2a03497bb811f4d84a71110c07a', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: 'e7cb51b51f04af2835fc16ae28f57606a31da2f7', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: 'ac9bea619694fb8b1acb1c7bf83ff6e09dc00c08' }), h("div", { key: '060f23986a4c24648b976ba9562e0553c7e9a0c5', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
     }
     static get is() { return "ds-options"; }
     static get encapsulation() { return "scoped"; }
@@ -158,7 +161,7 @@ export class DsOptions {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Unique `id` attribute of the options element."
@@ -167,7 +170,7 @@ export class DsOptions {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "optionsIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsSelectedValue": {
                 "type": "string",

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

@@ -1,4 +1,4 @@
-.ds-options-message__GqWYnG {
+.ds-options-message__0Yjiso {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-2xSmall);
@@ -9,14 +9,14 @@
   justify-content: center;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options-message__GqWYnG__error {
+.ds-options-message__0Yjiso__error {
   color: var(--ds-textColor-danger);
   text-align: center;
 }
-.ds-options-message__GqWYnG__error__icon {
+.ds-options-message__0Yjiso__error__icon {
   display: inline-block;
 }
-.ds-options-message__GqWYnG__error__title, .ds-options-message__GqWYnG__no-results__title {
+.ds-options-message__0Yjiso__error__title, .ds-options-message__0Yjiso__no-results__title {
   text-align: center;
   color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-18);
@@ -24,10 +24,10 @@
   margin-top: var(--ds-spacing-xSmall);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-options-message__GqWYnG__no-results__title {
+.ds-options-message__0Yjiso__no-results__title {
   hyphens: auto;
 }
-.ds-options-message__GqWYnG__error__text, .ds-options-message__GqWYnG__no-results__text {
+.ds-options-message__0Yjiso__error__text, .ds-options-message__0Yjiso__no-results__text {
   color: var(--ds-textColor-default);
   text-align: center;
   font-size: var(--ds-fontSize-16);