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

package/dist/components/ds-input-validity2.js

@@ -1,10 +1,9 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as isValidation } from './store.js';
+import { i as isValidation } from './index.js';
 import { d as defineCustomElement$1 } from './ds-icon2.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-textColor-danger)}.ds-input-validity--success{color:var(--ds-textColor-success)}.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 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 DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
     constructor() {
@@ -12,9 +11,11 @@ const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
         this.__registerHost();
     }
     get el() { return this; }
-    text;
-    type = 'error';
-    validityRole;
+    dsText;
+    dsType = 'error';
+    dsValidityRole;
+    dsAriaLive;
+    dsAriaAtomic;
     identifier;
     componentDidLoad() {
         this.identifier = this.el.getAttribute('id');
@@ -22,17 +23,19 @@ const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
     }
     render() {
         const classes = 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 (h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
+        const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
+        return (h("div", { key: '469ca293035b5f7f7f832fcde1651aef6d8a7e93', role: isValidation('client') ? this.dsValidityRole : undefined, "aria-live": isValidation('client') ? this.dsAriaLive : undefined, "aria-atomic": isValidation('client') ? this.dsAriaAtomic : undefined }, this.dsText && (h("div", { key: 'c1b800c75f2434fd3f26f656289853897a5fd485', class: classes }, h("ds-icon", { key: '7af7ca8d0ab5be6b795f4143c310b5134cadc7cd', dsName: icon }), h("small", { key: '81f8f36d3558f98331a0ec15cffcc3a6bb41f449', id: this.identifier }, this.dsText)))));
     }
-    static get style() { return DsInputValidityStyle0; }
+    static get style() { return dsInputValidityCss; }
 }, [0, "ds-input-validity", {
-        "text": [1],
-        "type": [1],
-        "validityRole": [1, "role"],
+        "dsText": [1, "ds-text"],
+        "dsType": [1, "ds-type"],
+        "dsValidityRole": [1, "ds-validity-role"],
+        "dsAriaLive": [1, "ds-aria-live"],
+        "dsAriaAtomic": [1, "ds-aria-atomic"],
         "identifier": [32]
     }]);
 function defineCustomElement() {

package/dist/components/ds-link-with-arrow.js

@@ -1,12 +1,11 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes } from './attributes.js';
+import { b as inheritSpecifiedAttributes, a as inheritAriaAttributes } from './attributes.js';
 import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils.js';
-import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
+import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.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-textColor-link);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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);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-textColor-white);background-color:var(--ds-bgColor-primary)}.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-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.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-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";
-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 = idGenerator('visually-hidden-assistive-text');
 const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
@@ -20,15 +19,17 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return this; }
-    text;
-    iconPosition = 'start';
-    href;
-    target;
-    language;
-    ariaLabel;
+    dsText;
+    dsIconPosition = 'start';
+    dsHref;
+    dsTarget;
+    dsAriaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
-        if (opensInNewTab(this.target)) {
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label']),
+            ...inheritSpecifiedAttributes(this.el, ['lang']),
+        };
+        if (opensInNewTab(this.dsTarget)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
         }
@@ -36,19 +37,18 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
     render() {
         const classes = classNames('ds-link-with-arrow');
         const iconClasses = 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 (h("a", { key: 'bce4a90f9cc5113ab3d5b300d791d2299e22b7ad', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '96ba4a33114443aab36d1301cf65c56437b9a85b', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: '86d8029de69c1ecb3002a97f5bc0cdbf899b7f91', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '7c2dafaee60253b1f5c22819b1afec83d106234b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: 'a9fb3e2ddee16cce7c6b8fc0fba0b11970567276', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f93f37d0d10d7a2d51980ff8feb76915cc4823b2', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'be8d2878b2b0801df9d5b5988aa96ac251f659cc', href: this.dsHref, class: classes, rel: this.rel, target: this.dsTarget, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes }, h("slot", { key: '7b5247167879c1b0335c33c1fcf74551bb78b25d', name: "prefix" }, this.dsIconPosition === 'start' && h("ds-icon", { key: 'd1c996dee504b053d11ad790b7ce545b1e1eab1a', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), this.dsText, h("slot", { key: 'd7f14b3e9f57dc3761254852f94267a55474cd3e', name: "suffix" }, this.dsIconPosition === 'end' && h("ds-icon", { key: 'c174d0e68979dc095a08936e6fffcc3a9e434088', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: 'de0de903e0bf1733b8be9fc2b35797e944cd3470', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText())));
     }
-    static get style() { return DsLinkWithArrowStyle0; }
+    static get style() { return dsLinkWithArrowCss; }
 }, [1, "ds-link-with-arrow", {
-        "text": [1],
-        "iconPosition": [1, "icon-position"],
-        "href": [1],
-        "target": [1],
-        "language": [1, "lang"],
-        "ariaLabel": [1, "aria-label"]
+        "dsText": [1, "ds-text"],
+        "dsIconPosition": [1, "ds-icon-position"],
+        "dsHref": [1, "ds-href"],
+        "dsTarget": [1, "ds-target"],
+        "dsAriaLabel": [1, "ds-aria-label"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/ds-link.js

@@ -1,12 +1,11 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes } from './attributes.js';
+import { b as inheritSpecifiedAttributes, a as inheritAriaAttributes } from './attributes.js';
 import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils.js';
-import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
+import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.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-textColor-link);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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);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-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";
-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 = idGenerator('visually-hidden-assistive-text');
 const DsLink$1 = proxyCustomElement(class DsLink extends H {
@@ -19,52 +18,56 @@ const DsLink$1 = proxyCustomElement(class DsLink extends H {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return 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 = inheritAriaAttributes(this.el, ['aria-label']);
-        if (opensInNewTab(this.target)) {
-            this.icon = 'open_in_new';
-            this.iconPosition = 'end';
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label']),
+            ...inheritSpecifiedAttributes(this.el, ['lang']),
+        };
+        if (opensInNewTab(this.dsTarget)) {
+            this.dsIcon = 'open_in_new';
+            this.dsIconPosition = 'end';
             this.rel = 'noopener noreferrer';
         }
     }
     render() {
-        const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
-            [`ds-link--${this.size}`]: Boolean(this.size),
+        const classes = 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 = 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 (h("a", { key: 'f8e36a029709033379e53cc1c409bc9c0069820e', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '88f90209b6557942dd956585b5f77632aa647c8e', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '87169acfb32913d10d27b35a9c6f714385979aa7', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'b38677240eb8bd7c1200c8dc08876ba75e7b3e81', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'c3088e302a43b4cbc5601a9adff54a3dc27a59dc', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '25ac189fd216148a05fddfc6e384cfbde59e0e22', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'a2dadeffad7a9ea98044d8d9e655b9623cdb287e', href: this.dsHref, class: classes, rel: this.rel, target: this.dsTarget, download: this.dsDownload, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes }, h("slot", { key: '731bfe4dc924dd63b2815daed0ebe8bf2f7c455e', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (h("ds-icon", { key: '4070f566905c409d9489221edaebb796aaccf973', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, h("slot", { key: 'a57232ddd92c4225efe30b22247e8bf649e1f98f', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (h("ds-icon", { key: '12d9a52ab321c0f607013accf39ee82947bac4eb', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: 'baf51d298ca730b60c969e980fe91eb6096bd791', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText())));
     }
-    static get style() { return DsLinkStyle0; }
+    static get style() { return dsLinkCss; }
 }, [1, "ds-link", {
-        "text": [1],
-        "size": [1],
-        "variant": [1],
-        "weight": [1],
-        "icon": [1025],
-        "iconPosition": [1025, "icon-position"],
-        "iconTitle": [1, "icon-title"],
-        "iconHidden": [4, "icon-hidden"],
-        "href": [1],
-        "target": [1],
-        "download": [4],
-        "language": [1, "lang"],
-        "ariaLabel": [1, "aria-label"]
+        "dsText": [1, "ds-text"],
+        "dsSize": [1, "ds-size"],
+        "dsVariant": [1, "ds-variant"],
+        "dsWeight": [1, "ds-weight"],
+        "dsIcon": [1025, "ds-icon"],
+        "dsIconPosition": [1025, "ds-icon-position"],
+        "dsIconTitle": [1, "ds-icon-title"],
+        "dsIconHidden": [4, "ds-icon-hidden"],
+        "dsHref": [1, "ds-href"],
+        "dsTarget": [1, "ds-target"],
+        "dsDownload": [4, "ds-download"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "dsColour": [1, "ds-colour"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/ds-radio-button-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsRadioButtonGroup extends Components.DsRadioButtonGroup, HTMLElement {}
+export const DsRadioButtonGroup: {
+    prototype: DsRadioButtonGroup;
+    new (): DsRadioButtonGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-radio-button-group.js

@@ -0,0 +1,185 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index2.js';
+import { c as classNames } from './index3.js';
+import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
+import { a as inheritAriaAttributes } from './attributes.js';
+import { g as getRequiredText, b as atLeastOneOption } from './controlUtils.js';
+import { d as defineCustomElement$2 } from './ds-input-validity2.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)}";
+
+const radioButtonGroupIdGenerator = idGenerator('ds-radio-button-group');
+const DsRadioButtonGroup$1 = proxyCustomElement(class DsRadioButtonGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsRadioGroupValueChange = createEvent(this, "dsRadioGroupValueChange");
+        this.dsRadioGroupInvalidStateChange = createEvent(this, "dsRadioGroupInvalidStateChange");
+        this.dsChange = createEvent(this, "dsChange");
+        this.internals = this.attachInternals();
+    }
+    fieldsetId = radioButtonGroupIdGenerator.next().value;
+    errorTextId = `${this.fieldsetId}-error`;
+    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    inheritedAttributes = {};
+    get el() { return this; }
+    internals;
+    dsLegend;
+    dsAssistiveText;
+    dsValue;
+    dsDirection = 'vertical';
+    dsErrorText = '';
+    dsRequired = false;
+    showInternalsValidationMessage = false;
+    dsRadioGroupValueChange;
+    dsRadioGroupInvalidStateChange;
+    dsChange;
+    getLegendText = () => {
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
+        }
+        return this.dsLegend;
+    };
+    getValidationMessage = () => this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
+    getRadios = () => {
+        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.getEnabledRadios();
+        if (!radios.length) {
+            return;
+        }
+        let focusableBtn = null;
+        for (const radio of radios) {
+            const isFocusable = radio.dsValue === this.dsValue;
+            radio.setFocusable(isFocusable);
+            if (isFocusable) {
+                focusableBtn = radio;
+            }
+        }
+        if (!focusableBtn) {
+            radios[0].setFocusable(true);
+        }
+    };
+    formResetCallback() {
+        this.internals?.setValidity({});
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = 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 }, atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+        }
+    }
+    async getValue() {
+        return this.dsValue;
+    }
+    errorTextObserver(errorText) {
+        this.dsRadioGroupInvalidStateChange.emit(!!errorText);
+    }
+    dsValueObserver(value) {
+        this.dsChange.emit(value);
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+        }
+    }
+    onInputChange(e) {
+        e.stopPropagation();
+        const targetElem = e.target;
+        this.dsValue = targetElem.dsValue;
+        this.dsRadioGroupValueChange.emit(this.dsValue);
+        this.updateFocusableRadioButton();
+    }
+    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)) {
+            return;
+        }
+        e.preventDefault();
+        const currentIndex = radios.findIndex(r => r === e.target);
+        let nextIndex;
+        if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
+            nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
+        }
+        if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
+            nextIndex = (currentIndex + 1) % radios.length;
+        }
+        const nextElem = radios[nextIndex];
+        nextElem.dsFocus();
+        nextElem.setChecked();
+    }
+    render() {
+        const classes = classNames('ds-radio-button-group');
+        const legendClasses = classNames('ds-radio-button-group__legend');
+        const assistiveTextClasses = classNames('ds-radio-button-group__assistive-text');
+        const radioButtonsSlotClasses = classNames('ds-radio-button-group__radio-buttons-slot', {
+            'ds-radio-button-group__radio-buttons-slot--horizontal': this.dsDirection === 'horizontal',
+        });
+        const errorClasses = classNames('ds-radio-button-group__error');
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
+        return (h(Host, { key: 'fd0fece58fea50d7ea0672b7f49608c2cdcb306e', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: '809c66ac58f880345c231b2930ddd9c91c61cbc2', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: '5194fa04e6645381ef83ad5b4f09c98ea6757da4', class: legendClasses }, h("slot", { key: '2944e5176ce596d6ab5ee6ee735f5b1e5a4e892b', name: "legend" }, this.getLegendText())), h("slot", { key: '3df729bf79cef8d07e88c3e52e337a54a3fb4ead', name: "assistiveText" }, this.dsAssistiveText && (h("small", { key: '36148c44fd5cc17ae506ab598ff79de41e23b71f', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), h("div", { key: '54380add5970ee72c0357b9562815d39a95602f0', class: radioButtonsSlotClasses }, h("slot", { key: '3ec766be90173f61dbb76b762c7f6d3f9781570f', onSlotchange: this.updateFocusableRadioButton })), (!!this.dsErrorText || this.dsRequired) && (h("slot", { key: 'c8ae86acd96ecba84d7ab83dad731511629e3f4b', name: "validity" }, h("div", { key: 'da0ce15f076e2c76ca040a6ad6100d706e576862', class: errorClasses }, 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 {
+        "dsErrorText": ["errorTextObserver"],
+        "dsValue": ["dsValueObserver"]
+    }; }
+    static get style() { return dsRadioButtonGroupCss; }
+}, [65, "ds-radio-button-group", {
+        "dsLegend": [1, "ds-legend"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsValue": [1025, "ds-value"],
+        "dsDirection": [1, "ds-direction"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsRequired": [4, "ds-required"],
+        "showInternalsValidationMessage": [32],
+        "getValue": [64]
+    }, [[0, "dsRadioButtonChecked", "onInputChange"], [4, "keydown", "onKeyDown"]], {
+        "dsErrorText": ["errorTextObserver"],
+        "dsValue": ["dsValueObserver"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-radio-button-group", "ds-icon", "ds-input-validity"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-radio-button-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsRadioButtonGroup$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsRadioButtonGroup = DsRadioButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsRadioButtonGroup, defineCustomElement };

package/dist/components/ds-radio-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsRadioButton extends Components.DsRadioButton, HTMLElement {}
+export const DsRadioButton: {
+    prototype: DsRadioButton;
+    new (): DsRadioButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;