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

package/dist/cjs/ds-input-validity.cjs.entry.js

@@ -1,22 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-947af833.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const store = require('./store-e8e87298.js');
+var index = require('./index-Mjp9Y-Sw.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var index$2 = require('./index-DwLFyR5p.js');
 
 const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-palette-red-70)}.ds-input-validity--success{color:var(--ds-palette-green-70)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
-const DsInputValidityStyle0 = dsInputValidityCss;
 
 const DsInputValidity = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
-    text;
-    type = 'error';
-    validityRole;
+    dsText;
+    dsType = 'error';
+    dsValidityRole;
+    dsAriaLive;
+    dsAriaAtomic;
     identifier;
     componentDidLoad() {
         this.identifier = this.el.getAttribute('id');
@@ -24,13 +23,13 @@ const DsInputValidity = class {
     }
     render() {
         const classes = index$1.classNames('ds-input-validity', {
-            'ds-input-validity--error': this.type === 'error',
-            'ds-input-validity--success': this.type === 'success',
+            'ds-input-validity--error': this.dsType === 'error',
+            'ds-input-validity--success': this.dsType === 'success',
         });
-        const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (index.h("div", { key: 'b76f90369546a44b88ff02ec08182ebf2299c0e9', role: store.isValidation('client') ? this.validityRole : undefined }, this.text && (index.h("div", { key: '575d68fff500bac58612514a3c4efebdb62dffdb', class: classes }, index.h("ds-icon", { key: '707c95678fdf517f83bc5126a1fcea0d9f8eb5cb', name: icon }), index.h("small", { key: '39e098386b1ed37c9d797513d626bb50e2e50034', id: this.identifier }, this.text)))));
+        const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
+        return (index.h("div", { key: '469ca293035b5f7f7f832fcde1651aef6d8a7e93', role: index$2.isValidation('client') ? this.dsValidityRole : undefined, "aria-live": index$2.isValidation('client') ? this.dsAriaLive : undefined, "aria-atomic": index$2.isValidation('client') ? this.dsAriaAtomic : undefined }, this.dsText && (index.h("div", { key: 'c1b800c75f2434fd3f26f656289853897a5fd485', class: classes }, index.h("ds-icon", { key: '7af7ca8d0ab5be6b795f4143c310b5134cadc7cd', dsName: icon }), index.h("small", { key: '81f8f36d3558f98331a0ec15cffcc3a6bb41f449', id: this.identifier }, this.dsText)))));
     }
 };
-DsInputValidity.style = DsInputValidityStyle0;
+DsInputValidity.style = dsInputValidityCss;
 
 exports.ds_input_validity = DsInputValidity;

package/dist/cjs/ds-link-with-arrow.cjs.entry.js

@@ -1,14 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Mjp9Y-Sw.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var attributes = require('./attributes-BMbXzbwU.js');
+var linkUtils = require('./linkUtils-onlbgKdI.js');
+var utils = require('./utils-BjZTECpy.js');
+require('./index-DwLFyR5p.js');
 
-const index = require('./index-947af833.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const utils = require('./utils-3412cbed.js');
-const linkUtils = require('./linkUtils-695da37c.js');
-
-const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
-const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
+const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const DsLinkWithArrow = class {
@@ -20,15 +19,17 @@ const DsLinkWithArrow = class {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return index.getElement(this); }
-    text;
-    iconPosition = 'start';
-    href;
-    target;
-    language;
-    ariaLabel;
+    dsText;
+    dsIconPosition = 'start';
+    dsHref;
+    dsTarget;
+    dsAriaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-label']);
-        if (linkUtils.opensInNewTab(this.target)) {
+        this.inheritedAttributes = {
+            ...attributes.inheritAriaAttributes(this.el, ['aria-label']),
+            ...attributes.inheritSpecifiedAttributes(this.el, ['lang']),
+        };
+        if (linkUtils.opensInNewTab(this.dsTarget)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
         }
@@ -36,12 +37,12 @@ const DsLinkWithArrow = class {
     render() {
         const classes = index$1.classNames('ds-link-with-arrow');
         const iconClasses = index$1.classNames('ds-link-with-arrow__icon', {
-            'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
-            'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
+            'ds-link-with-arrow__icon--start': this.dsIconPosition === 'start',
+            'ds-link-with-arrow__icon--end': this.dsIconPosition === 'end',
         });
-        return (index.h("a", { key: '07c30d407ab9399a29f3949bc4f9ea1139f9fa97', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: 'bebb1091f27d49871da79235aed5772bd1059f3d', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: 'c7bfbfdc9953138b510b5e37830cdd1f7837bae6', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: 'f4a8369cf54fb4d9f8aeea193c7aa52c14a59e2b', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: '430e7a77fe1bfa7af5f49873f1aff7371437d345', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '3e0b84c6648fa683320e602df7f83776f9698d74', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (index.h("a", { key: 'be8d2878b2b0801df9d5b5988aa96ac251f659cc', href: this.dsHref, class: classes, rel: this.rel, target: this.dsTarget, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes }, index.h("slot", { key: '7b5247167879c1b0335c33c1fcf74551bb78b25d', name: "prefix" }, this.dsIconPosition === 'start' && index.h("ds-icon", { key: 'd1c996dee504b053d11ad790b7ce545b1e1eab1a', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), this.dsText, index.h("slot", { key: 'd7f14b3e9f57dc3761254852f94267a55474cd3e', name: "suffix" }, this.dsIconPosition === 'end' && index.h("ds-icon", { key: 'c174d0e68979dc095a08936e6fffcc3a9e434088', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), linkUtils.opensInNewTab(this.dsTarget) && index.h("ds-visually-hidden", { key: 'de0de903e0bf1733b8be9fc2b35797e944cd3470', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText())));
     }
 };
-DsLinkWithArrow.style = DsLinkWithArrowStyle0;
+DsLinkWithArrow.style = dsLinkWithArrowCss;
 
 exports.ds_link_with_arrow = DsLinkWithArrow;

package/dist/cjs/ds-link.cjs.entry.js

@@ -1,14 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Mjp9Y-Sw.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var attributes = require('./attributes-BMbXzbwU.js');
+var linkUtils = require('./linkUtils-onlbgKdI.js');
+var utils = require('./utils-BjZTECpy.js');
+require('./index-DwLFyR5p.js');
 
-const index = require('./index-947af833.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const utils = require('./utils-3412cbed.js');
-const linkUtils = require('./linkUtils-695da37c.js');
-
-const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}";
-const DsLinkStyle0 = dsLinkCss;
+const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}.ds-link--colour-white{color:var(--ds-palette-white)}.ds-link--colour-white:hover,.ds-link--colour-white:active,.ds-link--colour-white:visited,.ds-link--colour-white:focus-visible{color:var(--ds-palette-white)}.ds-link--colour-black{color:var(--ds-palette-black-95)}.ds-link--colour-black:hover,.ds-link--colour-black:active,.ds-link--colour-black:visited,.ds-link--colour-black:focus-visible{color:var(--ds-palette-black-95)}";
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const DsLink = class {
@@ -19,38 +18,42 @@ const DsLink = class {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return index.getElement(this); }
-    text;
-    size;
-    variant = 'inline';
-    weight = 'regular';
-    icon = '';
-    iconPosition = 'end';
-    iconTitle;
-    iconHidden;
-    href;
-    target;
-    download;
-    language;
-    ariaLabel;
+    dsText;
+    dsSize;
+    dsVariant = 'inline';
+    dsWeight = 'regular';
+    dsIcon = '';
+    dsIconPosition = 'end';
+    dsIconTitle;
+    dsIconHidden;
+    dsHref;
+    dsTarget;
+    dsDownload;
+    dsAriaLabel;
+    dsColour;
     componentWillLoad() {
-        this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-label']);
-        if (linkUtils.opensInNewTab(this.target)) {
-            this.icon = 'open_in_new';
-            this.iconPosition = 'end';
+        this.inheritedAttributes = {
+            ...attributes.inheritAriaAttributes(this.el, ['aria-label']),
+            ...attributes.inheritSpecifiedAttributes(this.el, ['lang']),
+        };
+        if (linkUtils.opensInNewTab(this.dsTarget)) {
+            this.dsIcon = 'open_in_new';
+            this.dsIconPosition = 'end';
             this.rel = 'noopener noreferrer';
         }
     }
     render() {
-        const classes = index$1.classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
-            [`ds-link--${this.size}`]: Boolean(this.size),
+        const classes = index$1.classNames('ds-link', `ds-link--${this.dsWeight}`, `ds-link--${this.dsVariant}`, {
+            [`ds-link--${this.dsSize}`]: !!this.dsSize,
+            [`ds-link--colour-${this.dsColour}`]: !!this.dsColour,
         });
         const iconClasses = index$1.classNames('ds-link__icon', {
-            [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
-            [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
+            [`ds-link__icon--start-${this.dsVariant}`]: this.dsIconPosition === 'start',
+            [`ds-link__icon--end-${this.dsVariant}`]: this.dsIconPosition === 'end',
         });
-        return (index.h("a", { key: 'e8db9e6a903263d717a386e2fd61a2f279c4de1d', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '9def43becc24ab8f836ced9eb1f33de903fcfa40', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '301bbcf7464dca9e0e44cd9b74ccc77e67cbfac9', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, index.h("slot", { key: 'f6f3b7824f5bb028375f40e2e5743989a56f187d', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '3af94f1f8e4f1199e260929001b99ee56f780dff', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: 'f91801450c834793bf05a40f011b86f500422eee', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (index.h("a", { key: 'a2dadeffad7a9ea98044d8d9e655b9623cdb287e', href: this.dsHref, class: classes, rel: this.rel, target: this.dsTarget, download: this.dsDownload, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes }, index.h("slot", { key: '731bfe4dc924dd63b2815daed0ebe8bf2f7c455e', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (index.h("ds-icon", { key: '4070f566905c409d9489221edaebb796aaccf973', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, index.h("slot", { key: 'a57232ddd92c4225efe30b22247e8bf649e1f98f', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (index.h("ds-icon", { key: '12d9a52ab321c0f607013accf39ee82947bac4eb', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), linkUtils.opensInNewTab(this.dsTarget) && index.h("ds-visually-hidden", { key: 'baf51d298ca730b60c969e980fe91eb6096bd791', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText())));
     }
 };
-DsLink.style = DsLinkStyle0;
+DsLink.style = dsLinkCss;
 
 exports.ds_link = DsLink;

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

@@ -1,45 +1,69 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Mjp9Y-Sw.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');
 
-const index = require('./index-947af833.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const utils = require('./utils-3412cbed.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-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}.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)}";
-const DsRadioButtonGroupStyle0 = dsRadioButtonGroupCss;
+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)}";
 
 const radioButtonGroupIdGenerator = utils.idGenerator('ds-radio-button-group');
 const DsRadioButtonGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsRadioGroupValueChange = index.createEvent(this, "dsRadioGroupValueChange", 7);
-        this.dsRadioGroupInvalidStateChange = index.createEvent(this, "dsRadioGroupInvalidStateChange", 7);
+        this.dsRadioGroupValueChange = index.createEvent(this, "dsRadioGroupValueChange");
+        this.dsRadioGroupInvalidStateChange = index.createEvent(this, "dsRadioGroupInvalidStateChange");
+        this.dsChange = index.createEvent(this, "dsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
     fieldsetId = radioButtonGroupIdGenerator.next().value;
     errorTextId = `${this.fieldsetId}-error`;
     assistiveTextId = `${this.fieldsetId}-assistive-text`;
     inheritedAttributes = {};
     get el() { return index.getElement(this); }
-    legend;
-    assistiveText;
-    initialValue;
-    direction = 'vertical';
-    errorText = '';
-    value;
+    internals;
+    dsLegend;
+    dsAssistiveText;
+    dsValue;
+    dsDirection = 'vertical';
+    dsErrorText = '';
+    dsRequired = false;
+    showInternalsValidationMessage = false;
     dsRadioGroupValueChange;
     dsRadioGroupInvalidStateChange;
+    dsChange;
+    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')).filter(e => !e.disabled);
+        return Array.from(this.el.querySelectorAll('ds-radio-button'));
+    };
+    getEnabledRadios = () => {
+        return this.getRadios().filter(e => !e.dsDisabled);
+    };
+    updateRadios = (updateFn) => {
+        this.getRadios().forEach(updateFn);
     };
     updateFocusableRadioButton = () => {
-        const radios = this.getRadios();
+        const radios = this.getEnabledRadios();
         if (!radios.length) {
             return;
         }
         let focusableBtn = null;
         for (const radio of radios) {
-            const isFocusable = radio.value === this.value;
+            const isFocusable = radio.dsValue === this.dsValue;
             radio.setFocusable(isFocusable);
             if (isFocusable) {
                 focusableBtn = radio;
@@ -49,22 +73,38 @@ const DsRadioButtonGroup = class {
             radios[0].setFocusable(true);
         }
     };
+    formResetCallback() {
+        this.internals?.setValidity({});
+    }
     componentWillLoad() {
-        this.value = this.initialValue;
-        this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-labelledby']);
+        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-labelledby']);
         this.updateFocusableRadioButton();
     }
+    componentDidLoad() {
+        this.updateRadios(element => {
+            element.setAttribute('ds-errors-disabled', 'true');
+        });
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+        }
+    }
     async getValue() {
-        return this.value;
+        return this.dsValue;
     }
     errorTextObserver(errorText) {
         this.dsRadioGroupInvalidStateChange.emit(!!errorText);
     }
+    dsValueObserver(value) {
+        this.dsChange.emit(value);
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: !value }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+        }
+    }
     onInputChange(e) {
         e.stopPropagation();
         const targetElem = e.target;
-        this.value = targetElem.value;
-        this.dsRadioGroupValueChange.emit(this.value);
+        this.dsValue = targetElem.dsValue;
+        this.dsRadioGroupValueChange.emit(this.dsValue);
         this.updateFocusableRadioButton();
     }
     onKeyDown(e) {
@@ -74,7 +114,7 @@ const DsRadioButtonGroup = class {
         if (e.target && !this.el.contains(e.target)) {
             return;
         }
-        const radios = this.getRadios();
+        const radios = this.getEnabledRadios();
         if (e.target && !radios.includes(e.target)) {
             return;
         }
@@ -88,7 +128,7 @@ const DsRadioButtonGroup = class {
             nextIndex = (currentIndex + 1) % radios.length;
         }
         const nextElem = radios[nextIndex];
-        nextElem.setFocus();
+        nextElem.dsFocus();
         nextElem.setChecked();
     }
     render() {
@@ -96,16 +136,18 @@ const DsRadioButtonGroup = class {
         const legendClasses = index$1.classNames('ds-radio-button-group__legend');
         const assistiveTextClasses = index$1.classNames('ds-radio-button-group__assistive-text');
         const radioButtonsSlotClasses = index$1.classNames('ds-radio-button-group__radio-buttons-slot', {
-            'ds-radio-button-group__radio-buttons-slot--horizontal': this.direction === 'horizontal',
+            'ds-radio-button-group__radio-buttons-slot--horizontal': this.dsDirection === 'horizontal',
         });
         const errorClasses = index$1.classNames('ds-radio-button-group__error');
-        const ariaDescribedBy = [!!this.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: 'c29b30786a96a50976486eb107c707b973c06633', "data-invalid": !!this.errorText || undefined }, index.h("fieldset", { key: '90692a539c75bb81ae692b7209bd757c5d8b6b59', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: '1d4f2819f0fa4ca020297cddccc87f684fc03461', class: legendClasses }, index.h("slot", { key: 'd9edb199de4975dd876bf68fa834f7d1b841bad2', name: "legend" }, this.legend)), index.h("slot", { key: 'e48f2924efd4e0f47fedb8c30df34735aa6bc2df', name: "assistiveText" }, this.assistiveText && (index.h("small", { key: 'ebbb68a63acce035872ce7ef22d2821941ea3ccc', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), index.h("div", { key: 'a146cbf465a9fe97e5380db66d0baecaa46797e1', class: radioButtonsSlotClasses }, index.h("slot", { key: 'd7623edbff9870335ae62451bad2b245e394d4d0', onSlotchange: this.updateFocusableRadioButton })), index.h("div", { key: '85381c3f1b7f28d5508cf866884f0f5df2e2413a', class: errorClasses }, index.h("ds-input-validity", { key: 'ebf9f79454c11f490261959e1bdb5433744f39a3', id: this.errorTextId, text: this.errorText, type: "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" })))))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
-        "errorText": ["errorTextObserver"]
+        "dsErrorText": ["errorTextObserver"],
+        "dsValue": ["dsValueObserver"]
     }; }
 };
-DsRadioButtonGroup.style = DsRadioButtonGroupStyle0;
+DsRadioButtonGroup.style = dsRadioButtonGroupCss;
 
 exports.ds_radio_button_group = DsRadioButtonGroup;

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

@@ -1,21 +1,20 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Mjp9Y-Sw.js');
+var attributes = require('./attributes-BMbXzbwU.js');
+var controlUtils = require('./controlUtils-ofqiQxRF.js');
+var utils = require('./utils-BjZTECpy.js');
+var index$2 = require('./index-Bp6Dd2i1.js');
+var index$1 = require('./index-DwLFyR5p.js');
 
-const index = require('./index-947af833.js');
-const utils = require('./utils-3412cbed.js');
-const controlUtils = require('./controlUtils-8bf55ef0.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const store = require('./store-e8e87298.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__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)}.ds-radio-button:focus-within .ds-radio-button__icon{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.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)}";
-const DsRadioButtonStyle0 = dsRadioButtonCss;
+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 radioButtonIdGenerator = utils.idGenerator('ds-radio-button');
 const DsRadioButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsRadioButtonChecked = index.createEvent(this, "dsRadioButtonChecked", 7);
+        this.dsChange = index.createEvent(this, "dsChange");
+        this.dsRadioButtonChecked = index.createEvent(this, "dsRadioButtonChecked");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -26,58 +25,60 @@ const DsRadioButton = class {
     }
     radioGroup = null;
     inputElem;
+    dsChange;
     dsRadioButtonChecked;
     get el() { return index.getElement(this); }
     internals;
-    identifier = radioButtonIdGenerator.next().value;
-    errorsDisabled = false;
-    value = this.identifier;
-    legend;
-    assistiveText;
-    text;
-    required = false;
-    disabled = false;
-    optional = false;
-    checked = false;
-    optionalText;
-    errorText = '';
+    dsId = radioButtonIdGenerator.next().value;
+    dsErrorsDisabled = false;
+    dsValue = this.dsId;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsRequired = false;
+    dsDisabled = false;
+    dsChecked = false;
+    dsErrorText = '';
     focusable = true;
-    invalid = !!this.errorText;
-    initialChecked = this.checked;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
     validationMessage;
-    errorTextId = `${this.identifier}-error`;
-    assistiveTextId = `${this.identifier}-assistive-text`;
-    async setFocus() {
+    errorTextId = `${this.dsId}-error`;
+    assistiveTextId = `${this.dsId}-assistive-text`;
+    async dsFocus() {
         this.inputElem.focus();
     }
     async setFocusable(flag) {
         this.focusable = flag;
     }
     async setChecked() {
-        this.checked = true;
+        this.dsChecked = true;
         this.internals?.setFormValue('true');
         this.dsRadioButtonChecked.emit();
-        if (store.isValidation('client') && this.validationMessage) {
+        if (index$1.isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
     }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
     inheritedAttributes = {};
-    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     componentWillLoad() {
         this.inheritedAttributes = {
-            ...utils.inheritAttributes(this, this.el),
+            ...attributes.inheritAttributes(this, this.el),
         };
     }
     formResetCallback() {
-        this.checked = this.initialChecked;
+        this.dsChecked = this.initialChecked;
         this.internals.setValidity({});
-        this.internals.setFormValue(this.checked.toString());
+        this.internals.setFormValue(this.dsChecked.toString());
     }
     connectedCallback() {
         this.radioGroup = this.el.closest('ds-radio-button-group');
         if (this.radioGroup) {
             this.updateCheckedState();
-            this.invalid = !!this.radioGroup.errorText;
+            this.invalid = !!this.radioGroup.dsErrorText;
             this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
             this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
         }
@@ -90,7 +91,7 @@ const DsRadioButton = class {
         this.radioGroup = null;
     }
     updateCheckedState = async () => {
-        this.checked = this.value === (await this.radioGroup.getValue());
+        this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
     };
     updateInvalidState = (e) => {
         this.invalid = e.detail;
@@ -99,52 +100,52 @@ const DsRadioButton = class {
         this.setChecked();
     };
     handleBlur = () => {
-        if (store.isValidation('client')) {
+        if (index$1.isValidation('client')) {
             this.validationMessage = this.getValidationMessage();
         }
     };
     getLegendText = () => {
-        if (this.required) {
-            return controlUtils.getRequiredText(this.legend);
-        }
-        if (this.optional) {
-            return controlUtils.getOptionalText(this.legend, this.optionalText);
+        if (this.dsRequired) {
+            return controlUtils.getRequiredText(this.dsLegend);
         }
-        return this.legend;
+        return this.dsLegend;
     };
     renderRadioIcon() {
         const iconClass = 'ds-radio-button__icon';
-        const outerCircleClasses = index$1.classNames(`${iconClass}__outer-circle`, {
-            [`${iconClass}__outer-circle--checked`]: this.checked,
+        const outerCircleClasses = index$2.classNames(`${iconClass}__outer-circle`, {
+            [`${iconClass}__outer-circle--checked`]: this.dsChecked,
         });
-        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.checked && index.h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
+        const innerCircleClasses = index$2.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$1.classNames('ds-radio-button', {
-            'ds-radio-button--disabled': this.disabled,
-            'ds-radio-button--invalid': !!this.errorText || this.invalid,
+        const classes = index$2.classNames('ds-radio-button', {
+            'ds-radio-button--disabled': this.dsDisabled,
+            'ds-radio-button--invalid': !!this.dsErrorText || this.invalid,
         });
-        const inputClasses = index$1.classNames('ds-radio-button__input');
-        const textClasses = index$1.classNames('ds-radio-button__text');
+        const inputClasses = index$2.classNames('ds-radio-button__input');
+        const textClasses = index$2.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.value, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.checked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), index.h("slot", null, index.h("span", { class: textClasses }, this.text)))), index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h("ds-input-validity", { text: this.errorText, type: "error", role: "alert", id: this.errorTextId })))));
+        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" }))))));
     }
     renderFieldset() {
-        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.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].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.assistiveText && (index.h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), this.renderRadioButton()));
+        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(' ');
+        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() {
-        if (this.legend) {
+        if (this.dsLegend) {
             return this.renderFieldset();
         }
         return this.renderRadioButton();
     }
     static get formAssociated() { return true; }
+    static get watchers() { return {
+        "dsChecked": ["dsCheckedObserver"]
+    }; }
 };
-DsRadioButton.style = DsRadioButtonStyle0;
+DsRadioButton.style = dsRadioButtonCss;
 
 exports.ds_radio_button = DsRadioButton;