npm - @uh-design-system/component-library - Versions diffs - 0.6.0 → 0.7.0 - Mend

@uh-design-system/component-library 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2090) hide show

package/dist/cjs/ds-radio-button-group.cjs.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
 'use strict';
-var index = require('./index-Mjp9Y-Sw.js');
+var index = require('./index-Cz4FoSKZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-BjZTECpy.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-ofqiQxRF.js');
-require('./index-DwLFyR5p.js');
+var controlUtils = require('./controlUtils-vlo14zME.js');
+require('./index-CNUFAH0H.js');
 const dsRadioButtonGroupCss = ".ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";
@@ -16,6 +16,8 @@ const DsRadioButtonGroup = class {
         this.dsRadioGroupValueChange = index.createEvent(this, "dsRadioGroupValueChange");
         this.dsRadioGroupInvalidStateChange = index.createEvent(this, "dsRadioGroupInvalidStateChange");
         this.dsChange = index.createEvent(this, "dsChange");
+        this.dsSubmitInvalid = index.createEvent(this, "dsSubmitInvalid");
+        this.dsValidity = index.createEvent(this, "dsValidity");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -27,26 +29,35 @@ const DsRadioButtonGroup = class {
     fieldsetId = radioButtonGroupIdGenerator.next().value;
     errorTextId = `${this.fieldsetId}-error`;
     assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    childBlurTimeout = null;
     inheritedAttributes = {};
     get el() { return index.getElement(this); }
     internals;
+    dsRadioGroupValueChange;
+    dsRadioGroupInvalidStateChange;
+    dsChange;
+    dsSubmitInvalid;
+    dsValidity;
     dsLegend;
     dsAssistiveText;
     dsValue;
     dsDirection = 'vertical';
     dsErrorText = '';
     dsRequired = false;
-    showInternalsValidationMessage = false;
-    dsRadioGroupValueChange;
-    dsRadioGroupInvalidStateChange;
-    dsChange;
+    focusedChildRadioButton;
+    wasInvalidOnBlur = false;
+    async dsFocus() {
+        this.getEnabledRadios()?.[0]?.dsFocus();
+    }
+    async dsCheckValidity() {
+        return this.internals?.checkValidity();
+    }
     getLegendText = () => {
         if (this.dsRequired) {
             return controlUtils.getRequiredText(this.dsLegend);
         }
         return this.dsLegend;
     };
-    getValidationMessage = () => this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
     getRadios = () => {
         return Array.from(this.el.querySelectorAll('ds-radio-button'));
     };
@@ -74,8 +85,35 @@ const DsRadioButtonGroup = class {
         }
     };
     formResetCallback() {
-        this.internals?.setValidity({});
+        this.dsErrorText = '';
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
+        }
+        else {
+            this.internals?.setValidity({});
+        }
+    }
+    connectedCallback() {
+        if (this.internals?.form) {
+            this.el.addEventListener('invalid', this.handleInvalid);
+        }
     }
+    disconnectedCallback() {
+        if (this.internals?.form) {
+            this.el.removeEventListener('invalid', this.handleInvalid);
+        }
+        if (this.childBlurTimeout) {
+            clearTimeout(this.childBlurTimeout);
+        }
+        this.childBlurTimeout = null;
+    }
+    handleInvalid = async (e) => {
+        e.preventDefault();
+        this.dsSubmitInvalid.emit({
+            flag: 'customError',
+            message: this.internals?.validationMessage,
+        });
+    };
     componentWillLoad() {
         this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-labelledby']);
         this.updateFocusableRadioButton();
@@ -85,19 +123,34 @@ const DsRadioButtonGroup = class {
             element.setAttribute('ds-errors-disabled', 'true');
         });
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
         }
     }
     async getValue() {
         return this.dsValue;
     }
-    errorTextObserver(errorText) {
-        this.dsRadioGroupInvalidStateChange.emit(!!errorText);
+    errorObserver(newValue) {
+        this.dsRadioGroupInvalidStateChange.emit(newValue);
     }
     dsValueObserver(value) {
-        this.dsChange.emit(value);
+        this.dsChange.emit({ value: value });
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !value }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: !value }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
+        }
+        if (this.wasInvalidOnBlur) {
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
+        }
+    }
+    focusedChildRadioButtonObserver(newValue) {
+        if (!newValue) {
+            this.wasInvalidOnBlur = !this.internals?.validity.valid;
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
         }
     }
     onInputChange(e) {
@@ -107,19 +160,27 @@ const DsRadioButtonGroup = class {
         this.dsRadioGroupValueChange.emit(this.dsValue);
         this.updateFocusableRadioButton();
     }
+    listenFocus(e) {
+        this.focusedChildRadioButton = e.detail;
+    }
+    listenBlur(e) {
+        this.childBlurTimeout = setTimeout(() => {
+            if (e.detail === this.focusedChildRadioButton) {
+                this.focusedChildRadioButton = undefined;
+            }
+        }, 0);
+    }
     onKeyDown(e) {
         if (!['ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight'].includes(e.key)) {
             return;
         }
-        if (e.target && !this.el.contains(e.target)) {
-            return;
-        }
         const radios = this.getEnabledRadios();
-        if (e.target && !radios.includes(e.target)) {
+        const targetRadio = e.target.closest('ds-radio-button');
+        if (!targetRadio || !radios.includes(targetRadio)) {
             return;
         }
         e.preventDefault();
-        const currentIndex = radios.findIndex(r => r === e.target);
+        const currentIndex = radios.findIndex(r => r === targetRadio);
         let nextIndex;
         if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
             nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
@@ -140,12 +201,14 @@ const DsRadioButtonGroup = class {
         });
         const errorClasses = index$1.classNames('ds-radio-button-group__error');
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: 'fd0fece58fea50d7ea0672b7f49608c2cdcb306e', "data-invalid": !!this.dsErrorText || undefined }, index.h("fieldset", { key: '809c66ac58f880345c231b2930ddd9c91c61cbc2', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: '5194fa04e6645381ef83ad5b4f09c98ea6757da4', class: legendClasses }, index.h("slot", { key: '2944e5176ce596d6ab5ee6ee735f5b1e5a4e892b', name: "legend" }, this.getLegendText())), index.h("slot", { key: '3df729bf79cef8d07e88c3e52e337a54a3fb4ead', name: "assistiveText" }, this.dsAssistiveText && (index.h("small", { key: '36148c44fd5cc17ae506ab598ff79de41e23b71f', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), index.h("div", { key: '54380add5970ee72c0357b9562815d39a95602f0', class: radioButtonsSlotClasses }, index.h("slot", { key: '3ec766be90173f61dbb76b762c7f6d3f9781570f', onSlotchange: this.updateFocusableRadioButton })), (!!this.dsErrorText || this.dsRequired) && (index.h("slot", { key: 'c8ae86acd96ecba84d7ab83dad731511629e3f4b', name: "validity" }, index.h("div", { key: 'da0ce15f076e2c76ca040a6ad6100d706e576862', class: errorClasses }, index.h("ds-input-validity", { key: 'd9beed52855b81a8125cb0c6498b023357383328', id: this.errorTextId, dsText: this.getValidationMessage(), dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
+        return (index.h(index.Host, { key: '5a19a07e448773553910d2be7782b4e8fc617478', "data-invalid": !!this.dsErrorText || undefined }, index.h("fieldset", { key: 'b0c4580faee8ec5cc2ee7d8fcb0286903b9ac751', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: 'f3211e7670b7aaf8bb54bb5a9700ebf7c88d576a', class: legendClasses }, index.h("slot", { key: '09dd3b3cfeeaa31342a9306cbada63b78f59447f', name: "legend" }, this.getLegendText())), index.h("slot", { key: '09c341944343b701c4aa4573c9dec1a98ac53a9f', name: "assistiveText" }, this.dsAssistiveText && (index.h("small", { key: '779c7467c444074e1aeddc774a6873820823be75', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), index.h("div", { key: 'e13141e7cc96dc7438b2ba12af97671a5a73f4ff', class: radioButtonsSlotClasses }, index.h("slot", { key: '3873d2e4a333f491089738d4f49614e4105d1d3f', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (index.h("slot", { key: 'cd1e9e8f3313ef809939888fe8cf98d1db7400ef', name: "validity" }, index.h("div", { key: '1a345a57fef5571de70bd1ac7b45045b3296681d', class: errorClasses }, index.h("ds-input-validity", { key: '880e73ee761e29e187ed80f4e44b00f7f3e3771b', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
     }
+    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get watchers() { return {
-        "dsErrorText": ["errorTextObserver"],
-        "dsValue": ["dsValueObserver"]
+        "dsErrorText": ["errorObserver"],
+        "dsValue": ["dsValueObserver"],
+        "focusedChildRadioButton": ["focusedChildRadioButtonObserver"]
     }; }
 };
 DsRadioButtonGroup.style = dsRadioButtonGroupCss;

package/dist/cjs/ds-radio-button.cjs.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-Mjp9Y-Sw.js');
+var index = require('./index-Cz4FoSKZ.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-ofqiQxRF.js');
+var controlUtils = require('./controlUtils-vlo14zME.js');
 var utils = require('./utils-BjZTECpy.js');
-var index$2 = require('./index-Bp6Dd2i1.js');
-var index$1 = require('./index-DwLFyR5p.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+require('./index-CNUFAH0H.js');
-const dsRadioButtonCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled{color:var(--ds-palette-black-40)}.ds-radio-button__validity{margin-left:10px}.ds-radio-button:has(input:focus-visible) .ds-radio-button__icon{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5)}.ds-radio-button__icon{border-radius:50%;height:44px;width:44px}.ds-radio-button__text{margin-top:11px}.ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button-fieldset{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button-fieldset__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}";
+const dsRadioButtonCss = ".sc-ds-radio-button:root,.sc-ds-radio-button-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled.sc-ds-radio-button{color:var(--ds-palette-black-40)}.ds-radio-button__validity.sc-ds-radio-button{margin-left:10px}.ds-radio-button.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__icon.sc-ds-radio-button{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5)}.ds-radio-button__icon.sc-ds-radio-button{border-radius:50%;height:44px;width:44px}.ds-radio-button__text.sc-ds-radio-button{margin-top:11px}.ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}";
 const radioButtonIdGenerator = utils.idGenerator('ds-radio-button');
 const DsRadioButton = class {
@@ -15,21 +15,23 @@ const DsRadioButton = class {
         index.registerInstance(this, hostRef);
         this.dsChange = index.createEvent(this, "dsChange");
         this.dsRadioButtonChecked = index.createEvent(this, "dsRadioButtonChecked");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
+        this.dsRadioButtonFocused = index.createEvent(this, "dsRadioButtonFocused");
+        this.dsRadioButtonBlurred = index.createEvent(this, "dsRadioButtonBlurred");
+        this.dsSubmitInvalid = index.createEvent(this, "dsSubmitInvalid");
+        this.dsValidity = index.createEvent(this, "dsValidity");
     }
     radioGroup = null;
-    inputElem;
+    inputElement;
+    inheritedAttributes = {};
+    get el() { return index.getElement(this); }
     dsChange;
     dsRadioButtonChecked;
-    get el() { return index.getElement(this); }
-    internals;
+    dsRadioButtonFocused;
+    dsRadioButtonBlurred;
+    dsSubmitInvalid;
+    dsValidity;
     dsId = radioButtonIdGenerator.next().value;
+    dsName = this.dsId;
     dsErrorsDisabled = false;
     dsValue = this.dsId;
     dsLegend;
@@ -40,68 +42,112 @@ const DsRadioButton = class {
     dsChecked = false;
     dsErrorText = '';
     focusable = true;
-    invalid = !!this.dsErrorText;
-    initialChecked = this.dsChecked;
-    validationMessage;
+    groupInvalid = false;
+    initialChecked = false;
     errorTextId = `${this.dsId}-error`;
     assistiveTextId = `${this.dsId}-assistive-text`;
     async dsFocus() {
-        this.inputElem.focus();
+        this.inputElement.focus();
     }
     async setFocusable(flag) {
         this.focusable = flag;
     }
     async setChecked() {
         this.dsChecked = true;
-        this.internals?.setFormValue('true');
         this.dsRadioButtonChecked.emit();
-        if (index$1.isValidation('client') && this.validationMessage) {
-            this.validationMessage = this.getValidationMessage();
-        }
+    }
+    async dsCheckValidity() {
+        return this.inputElement?.checkValidity();
     }
     dsCheckedObserver(isChecked) {
-        this.dsChange.emit(isChecked);
+        this.dsChange.emit({ checked: isChecked, value: this.dsValue });
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: controlUtils.validityMessage(key),
+                });
+                break;
+            }
+        }
     }
-    inheritedAttributes = {};
-    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     componentWillLoad() {
         this.inheritedAttributes = {
-            ...attributes.inheritAttributes(this, this.el),
+            ...attributes.inheritAriaAttributes(this.el, ['aria-invalid']),
+            ...attributes.inheritAttributes(this, this.el, ['value', 'name', 'id']),
         };
+        this.initialChecked = this.dsChecked;
     }
     formResetCallback() {
+        this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
-        this.internals.setValidity({});
-        this.internals.setFormValue(this.dsChecked.toString());
+        this.radioGroup = this.el.closest('ds-radio-button-group');
+        if (this.radioGroup) {
+            this.groupInvalid = !!this.radioGroup.dsErrorText;
+            this.dsErrorText = this.radioGroup.dsErrorText;
+        }
     }
     connectedCallback() {
         this.radioGroup = this.el.closest('ds-radio-button-group');
         if (this.radioGroup) {
             this.updateCheckedState();
-            this.invalid = !!this.radioGroup.dsErrorText;
+            this.groupInvalid = !!this.radioGroup.dsErrorText;
+            this.dsErrorText = this.radioGroup.dsErrorText;
             this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
-            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateGroupInvalidState);
         }
     }
     disconnectedCallback() {
         if (this.radioGroup) {
             this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
-            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateGroupInvalidState);
         }
         this.radioGroup = null;
     }
+    handleInvalid = (e) => {
+        e.preventDefault();
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsSubmitInvalid.emit({
+                    flag: key,
+                    message: controlUtils.validityMessage(key),
+                });
+                break;
+            }
+        }
+    };
     updateCheckedState = async () => {
         this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
     };
-    updateInvalidState = (e) => {
-        this.invalid = e.detail;
+    updateGroupInvalidState = (e) => {
+        this.groupInvalid = !!e.detail;
+        this.dsErrorText = e.detail;
     };
     handleInput = () => {
         this.setChecked();
     };
+    handleFocus = () => {
+        this.dsRadioButtonFocused.emit(this.dsId);
+    };
     handleBlur = () => {
-        if (index$1.isValidation('client')) {
-            this.validationMessage = this.getValidationMessage();
+        this.dsRadioButtonBlurred.emit(this.dsId);
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: controlUtils.validityMessage(key),
+                });
+                break;
+            }
         }
     };
     getLegendText = () => {
@@ -112,27 +158,27 @@ const DsRadioButton = class {
     };
     renderRadioIcon() {
         const iconClass = 'ds-radio-button__icon';
-        const outerCircleClasses = index$2.classNames(`${iconClass}__outer-circle`, {
+        const outerCircleClasses = index$1.classNames(`${iconClass}__outer-circle`, {
             [`${iconClass}__outer-circle--checked`]: this.dsChecked,
         });
-        const innerCircleClasses = index$2.classNames(`${iconClass}__inner-circle`);
+        const innerCircleClasses = index$1.classNames(`${iconClass}__inner-circle`);
         return (index.h("slot", { name: "icon" }, index.h("div", { class: iconClass, "aria-hidden": "true" }, index.h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), index.h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.dsChecked && index.h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
     }
     renderRadioButton() {
-        const classes = index$2.classNames('ds-radio-button', {
+        const classes = index$1.classNames('ds-radio-button', {
             'ds-radio-button--disabled': this.dsDisabled,
-            'ds-radio-button--invalid': !!this.dsErrorText || this.invalid,
+            'ds-radio-button--invalid': !!this.dsErrorText,
         });
-        const inputClasses = index$2.classNames('ds-radio-button__input');
-        const textClasses = index$2.classNames('ds-radio-button__text');
+        const inputClasses = index$1.classNames('ds-radio-button__input');
+        const textClasses = index$1.classNames('ds-radio-button__text');
         const tabindex = this.focusable ? 0 : -1;
-        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h("ds-visually-hidden", null, index.h("input", { ref: ref => (this.inputElem = ref), type: "radio", class: inputClasses, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.dsChecked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), index.h("slot", null, index.h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h("ds-visually-hidden", null, index.h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, value: this.dsValue, id: this.dsId, name: this.dsName, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabindex: tabindex, required: this.dsRequired, "aria-invalid": !!this.dsErrorText, ...this.inheritedAttributes })), this.renderRadioIcon(), index.h("slot", null, index.h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
     }
     renderFieldset() {
-        const fieldsetClasses = index$2.classNames('ds-radio-button-fieldset');
-        const legendClasses = index$2.classNames('ds-radio-button-fieldset__legend');
-        const assistiveTextClasses = index$2.classNames('ds-radio-button-fieldset__assistive-text');
-        const ariaDescribedBy = [!!this.dsErrorText && this.errorTextId, !!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        const fieldsetClasses = index$1.classNames('ds-radio-button-fieldset');
+        const legendClasses = index$1.classNames('ds-radio-button-fieldset__legend');
+        const assistiveTextClasses = index$1.classNames('ds-radio-button-fieldset__assistive-text');
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
         return (index.h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, index.h("legend", { class: legendClasses }, index.h("slot", { name: "legend" }, this.getLegendText())), index.h("slot", { name: "assistiveText" }, this.dsAssistiveText && (index.h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), this.renderRadioButton()));
     }
     render() {

package/dist/cjs/ds-spinner.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-Mjp9Y-Sw.js');
+var index = require('./index-Cz4FoSKZ.js');
 var attributes = require('./attributes-BMbXzbwU.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
@@ -50,11 +50,11 @@ const DsSpinner = class {
         });
         const textClasses = index$1.classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = index => index$1.classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
-        return (index.h("div", { key: '3d312dd8883b903bb59c8ceface626444ac0df44', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (index.h("div", { key: '0fa992bde3a9244616f5b6ba2120ae5f6d0db76e', 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 }, index.h("div", { key: '81d04de4de327d4b8be4a03a4b0f97d56214547e', class: "ds-spinner__spinner" }, index.h("div", { key: 'f7136c4637d17bc796d2e69df8aae51244d1d97e', class: segmentClasses(1) }), index.h("div", { key: 'd839ca7f1aae71616062b82af2d5b7610299bf25', class: segmentClasses(2) }), index.h("div", { key: 'bcbd84559e7fd2204320f4788837df61aed6208a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h("ds-visually-hidden", { key: '8b3f758381d1623f84e0c237ec17b97a81a85983' }, index.h("span", { key: '52930b05b2b868c38f785b09d6bb86dddfde828b' }, this.dsHiddenAssistiveText))), this.dsText && index.h("span", { key: '91677c1f685820bc32f6c8557df98c1c37cdbf8e', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, index.h("div", { key: 'd3736ffa6a0dba10813bf044b43f0de19c4d20fb', class: "ds-spinner__spinner" }, index.h("div", { key: 'b23b329401fd853c5e24f834ce9ec73b15217a58', class: segmentClasses(1) }), index.h("div", { key: 'f9d619f5a9ad5dac4ebc606caed35c98c2b9e692', class: segmentClasses(2) }), index.h("div", { key: '5165008462494014e5fb29d795b449363f819e82', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h("ds-visually-hidden", { key: '4597804a73f0223ca7b58e09a8346b1cce68c9a1' }, index.h("span", { key: 'cdd40dbb408478afc55ea7a80a8aac1db5a34729' }, this.dsHiddenAssistiveText))), this.dsText && index.h("span", { key: '385ccceedbf6750de761d7aec6503dccf1445d3d', class: textClasses }, this.dsText)));
     }
 };
 DsSpinner.style = dsSpinnerCss;

package/dist/cjs/ds-tag.cjs.entry.js ADDED Viewed

@@ -0,0 +1,28 @@
+'use strict';
+var index = require('./index-Cz4FoSKZ.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+const dsTagCss = ".ds-tag{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-palette-black-05);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag.ds-tag--default{color:var(--ds-palette-black-95);background-color:var(--ds-palette-black-05)}.ds-tag.ds-tag--default:hover:has(ds-link){background-color:var(--ds-palette-black-10)}.ds-tag.ds-tag--default:active:has(ds-link){background-color:var(--ds-palette-black-20)}.ds-tag.ds-tag--black{color:var(--ds-palette-white);background-color:var(--ds-palette-black-95)}.ds-tag.ds-tag--black:hover:has(ds-link){background-color:var(--ds-palette-black-80)}.ds-tag.ds-tag--black:active:has(ds-link){background-color:var(--ds-palette-black-70)}.ds-tag.ds-tag--white{color:var(--ds-palette-black-95);background-color:var(--ds-palette-white)}.ds-tag.ds-tag--white:hover:has(ds-link){background-color:var(--ds-palette-black-10)}.ds-tag.ds-tag--white:active:has(ds-link){background-color:var(--ds-palette-black-20)}.ds-tag.ds-tag--info{color:var(--ds-palette-black-95);background-color:var(--ds-palette-blue-05)}.ds-tag.ds-tag--info:hover:has(ds-link){background-color:var(--ds-palette-blue-10)}.ds-tag.ds-tag--info:active:has(ds-link){background-color:var(--ds-palette-blue-20)}.ds-tag.ds-tag--danger{color:var(--ds-palette-black-95);background-color:var(--ds-palette-red-05)}.ds-tag.ds-tag--danger:hover:has(ds-link){background-color:var(--ds-palette-red-10)}.ds-tag.ds-tag--danger:active:has(ds-link){background-color:var(--ds-palette-red-20)}.ds-tag.ds-tag--attention{color:var(--ds-palette-black-95);background-color:var(--ds-palette-yellow-05)}.ds-tag.ds-tag--attention:hover:has(ds-link){background-color:var(--ds-palette-yellow-10)}.ds-tag.ds-tag--attention:active:has(ds-link){background-color:var(--ds-palette-yellow-20)}.ds-tag.ds-tag--success{color:var(--ds-palette-black-95);background-color:var(--ds-palette-green-05)}.ds-tag.ds-tag--success:hover:has(ds-link){background-color:var(--ds-palette-green-10)}.ds-tag.ds-tag--success:active:has(ds-link){background-color:var(--ds-palette-green-20)}.ds-tag__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag--link{padding:unset}.ds-tag--link ds-link::part(ds-link){min-height:1.5rem;padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall)}";
+const DsTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dsText = 'Label';
+    dsIcon = '';
+    dsIconPosition = 'start';
+    dsDownload;
+    dsTarget;
+    dsHref;
+    dsColour = 'default';
+    render() {
+        const classes = index$1.classNames('ds-tag', `ds-tag--${this.dsColour}`, {
+            'ds-tag--link': !!this.dsHref,
+        });
+        return (index.h("div", { key: 'a54bbc1ec29cfa0c6df2f9e40765a746d1e6fcf8', class: classes }, index.h("slot", { key: '2c4a3c20b956798f114477bc22be6e796cca3f1f', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: '30e3768b29339c327449472b9f530d564d7e0269' }, this.dsHref ? (index.h("ds-link", { dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (index.h("span", { class: "ds-tag__text" }, this.dsText))), index.h("slot", { key: '26cdf6d6b8dea7de55eade2f1b3807da4b9abb24', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+    }
+};
+DsTag.style = dsTagCss;
+exports.ds_tag = DsTag;