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

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

@@ -1,18 +1,19 @@
-import { r as registerInstance, a as getElement, h } from './index-434995e1.js';
-import { c as classNames } from './index-72ac5051.js';
-import { i as isValidation } from './store-b8d17c10.js';
+import { r as registerInstance, g as getElement, h } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as isValidation } from './index-DuYjhvTn.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     get el() { return getElement(this); }
-    text;
-    type = 'error';
-    validityRole;
+    dsText;
+    dsType = 'error';
+    dsValidityRole;
+    dsAriaLive;
+    dsAriaAtomic;
     identifier;
     componentDidLoad() {
         this.identifier = this.el.getAttribute('id');
@@ -20,13 +21,13 @@ const DsInputValidity = class {
     }
     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)))));
     }
 };
-DsInputValidity.style = DsInputValidityStyle0;
+DsInputValidity.style = dsInputValidityCss;
 
 export { DsInputValidity as ds_input_validity };

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

@@ -1,10 +1,11 @@
-import { r as registerInstance, a as getElement, h } from './index-434995e1.js';
-import { c as classNames } from './index-72ac5051.js';
-import { i as inheritAriaAttributes, g as getAriaLabel, c as idGenerator } from './utils-cfc536bc.js';
-import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-3d1b28cf.js';
+import { r as registerInstance, g as getElement, h } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { a as inheritSpecifiedAttributes, b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-02nCfO0F.js';
+import { i as idGenerator } from './utils-CqaqnfY4.js';
+import './index-DuYjhvTn.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 = class {
@@ -16,15 +17,17 @@ const DsLinkWithArrow = class {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return getElement(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';
         }
@@ -32,12 +35,12 @@ const DsLinkWithArrow = class {
     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())));
     }
 };
-DsLinkWithArrow.style = DsLinkWithArrowStyle0;
+DsLinkWithArrow.style = dsLinkWithArrowCss;
 
 export { DsLinkWithArrow as ds_link_with_arrow };

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

@@ -1,10 +1,11 @@
-import { r as registerInstance, a as getElement, h } from './index-434995e1.js';
-import { c as classNames } from './index-72ac5051.js';
-import { i as inheritAriaAttributes, g as getAriaLabel, c as idGenerator } from './utils-cfc536bc.js';
-import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-3d1b28cf.js';
+import { r as registerInstance, g as getElement, h } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { a as inheritSpecifiedAttributes, b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-02nCfO0F.js';
+import { i as idGenerator } from './utils-CqaqnfY4.js';
+import './index-DuYjhvTn.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 = class {
@@ -15,38 +16,42 @@ const DsLink = class {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return 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 = 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())));
     }
 };
-DsLink.style = DsLinkStyle0;
+DsLink.style = dsLinkCss;
 
 export { DsLink as ds_link };

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

@@ -0,0 +1,151 @@
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
+import { g as getRequiredText, b as atLeastOneOption } from './controlUtils-CNER0MvM.js';
+import './index-DuYjhvTn.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsRadioGroupValueChange = createEvent(this, "dsRadioGroupValueChange");
+        this.dsRadioGroupInvalidStateChange = createEvent(this, "dsRadioGroupInvalidStateChange");
+        this.dsChange = 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 getElement(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"]
+    }; }
+};
+DsRadioButtonGroup.style = dsRadioButtonGroupCss;
+
+export { DsRadioButtonGroup as ds_radio_button_group };

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

@@ -0,0 +1,149 @@
+import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-Cm7V4EAn.js';
+import { i as inheritAttributes } from './attributes-BD_lNRxn.js';
+import { g as getRequiredText } from './controlUtils-CNER0MvM.js';
+import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as isValidation } from './index-DuYjhvTn.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 radioButtonIdGenerator = idGenerator('ds-radio-button');
+const DsRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsChange = createEvent(this, "dsChange");
+        this.dsRadioButtonChecked = 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;
+        }
+    }
+    radioGroup = null;
+    inputElem;
+    dsChange;
+    dsRadioButtonChecked;
+    get el() { return getElement(this); }
+    internals;
+    dsId = radioButtonIdGenerator.next().value;
+    dsErrorsDisabled = false;
+    dsValue = this.dsId;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsRequired = false;
+    dsDisabled = false;
+    dsChecked = false;
+    dsErrorText = '';
+    focusable = true;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
+    validationMessage;
+    errorTextId = `${this.dsId}-error`;
+    assistiveTextId = `${this.dsId}-assistive-text`;
+    async dsFocus() {
+        this.inputElem.focus();
+    }
+    async setFocusable(flag) {
+        this.focusable = flag;
+    }
+    async setChecked() {
+        this.dsChecked = true;
+        this.internals?.setFormValue('true');
+        this.dsRadioButtonChecked.emit();
+        if (isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
+    inheritedAttributes = {};
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+        };
+    }
+    formResetCallback() {
+        this.dsChecked = this.initialChecked;
+        this.internals.setValidity({});
+        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.dsErrorText;
+            this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.radioGroup) {
+            this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.radioGroup = null;
+    }
+    updateCheckedState = async () => {
+        this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
+    };
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
+    handleInput = () => {
+        this.setChecked();
+    };
+    handleBlur = () => {
+        if (isValidation('client')) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
+    getLegendText = () => {
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
+        }
+        return this.dsLegend;
+    };
+    renderRadioIcon() {
+        const iconClass = 'ds-radio-button__icon';
+        const outerCircleClasses = classNames(`${iconClass}__outer-circle`, {
+            [`${iconClass}__outer-circle--checked`]: this.dsChecked,
+        });
+        const innerCircleClasses = classNames(`${iconClass}__inner-circle`);
+        return (h("slot", { name: "icon" }, h("div", { class: iconClass, "aria-hidden": "true" }, h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.dsChecked && h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
+    }
+    renderRadioButton() {
+        const classes = classNames('ds-radio-button', {
+            'ds-radio-button--disabled': this.dsDisabled,
+            'ds-radio-button--invalid': !!this.dsErrorText || this.invalid,
+        });
+        const inputClasses = classNames('ds-radio-button__input');
+        const textClasses = classNames('ds-radio-button__text');
+        const tabindex = this.focusable ? 0 : -1;
+        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h("ds-visually-hidden", null, 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(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+    }
+    renderFieldset() {
+        const fieldsetClasses = classNames('ds-radio-button-fieldset');
+        const legendClasses = classNames('ds-radio-button-fieldset__legend');
+        const assistiveTextClasses = classNames('ds-radio-button-fieldset__assistive-text');
+        const ariaDescribedBy = [!!this.dsErrorText && this.errorTextId, !!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        return (h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, h("legend", { class: legendClasses }, h("slot", { name: "legend" }, this.getLegendText())), h("slot", { name: "assistiveText" }, this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), this.renderRadioButton()));
+    }
+    render() {
+        if (this.dsLegend) {
+            return this.renderFieldset();
+        }
+        return this.renderRadioButton();
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "dsChecked": ["dsCheckedObserver"]
+    }; }
+};
+DsRadioButton.style = dsRadioButtonCss;
+
+export { DsRadioButton as ds_radio_button };

package/dist/esm/ds-spinner.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, g as getElement, h } from './index-Cm7V4EAn.js';
+import { b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+
+const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font--heading{font-family:var(--ds-fontFamily-heading)}.ds-font--body{font-family:var(--ds-fontFamily-body)}.ds-font--regular{font-weight:var(--ds-fontWeight-regular)}.ds-font--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font--semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font--bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking--xtight{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking--tight{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking--normal{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking--wide{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking--xwide{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading--small{line-height:var(--ds-lineHeight-small)}.ds-leading--medium{line-height:var(--ds-lineHeight-medium)}.ds-leading--large{line-height:var(--ds-lineHeight-large)}.ds-leading--xlarge{line-height:var(--ds-lineHeight-xLarge)}.ds-width--normal{font-stretch:var(--ds-fontWidth-normal)}.ds-width--condense{font-stretch:var(--ds-fontWidth-condense)}.ds-number--proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph--16{margin-bottom:var(--ds-fontSize-16)}.ds-paragraph--20{margin-bottom:var(--ds-fontSize-20)}.ds-list--spacing{gap:4px}.ds-text-color--default{color:var(--ds-palette-black-95)}.ds-text{}.ds-text--2xl-regular{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text--xl-regular{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text--lg-regular{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text--md-regular{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text--sm-regular{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text--xs-regular{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text--2xl-semibold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xl-semibold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text--lg-semibold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text--md-semibold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text--sm-semibold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xs-semibold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text--2xl-bold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text--xl-bold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text--lg-bold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text--md-bold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text--sm-bold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text--xs-bold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner{display:flex;align-items:center;justify-content:center;}.ds-spinner--small{padding:1.5px}.ds-spinner--small:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner--medium{padding:3px}.ds-spinner--medium:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner--large{padding:3px}.ds-spinner--large:has(.ds-spinner__text){gap:var(--ds-spacing-xSmall)}.ds-spinner--xLarge{padding:5.5px}.ds-spinner--xLarge:has(.ds-spinner__text){gap:10px}.ds-spinner--2xLarge{padding:5.5px}.ds-spinner--2xLarge:has(.ds-spinner__text){gap:var(--ds-spacing-small)}.ds-spinner--below{flex-direction:column;align-items:center}.ds-spinner--right{flex-direction:row;align-items:center}.ds-spinner__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-overlay-black-15);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__text{font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-95)}.ds-spinner__text--white{color:var(--ds-palette-white)}.ds-spinner__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__segment--1{animation-delay:-0.3s}.ds-spinner__segment--2{animation-delay:-0.2s}.ds-spinner__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__segment--1{animation-delay:-0.6s}.ds-spinner__segment--2{animation-delay:-0.4s}.ds-spinner__segment--3{animation-delay:-0.2s}}";
+
+const SPINNER_SIZES = {
+    'small': 10,
+    'medium': 14,
+    'large': 20,
+    'xLarge': 28,
+    '2xLarge': 40,
+};
+const SPINNER_TEXT_SIZES = {
+    'small': 'ds-text--xs-regular',
+    'medium': 'ds-text--sm-regular',
+    'large': 'ds-text--md-regular',
+    'xLarge': 'ds-text--lg-regular',
+    '2xLarge': 'ds-text--xl-regular',
+};
+const SPINNER_COLORS = {
+    blue: 'var(--ds-palette-mainBlue-70)',
+    black: 'var(--ds-palette-black-95)',
+    white: 'var(--ds-palette-white)',
+};
+const DsSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    get el() { return getElement(this); }
+    dsText;
+    dsSize = 'medium';
+    dsSpinnerTextPosition = 'below';
+    dsSpinnerColor = 'blue';
+    dsUseRoleAlert = false;
+    dsUseAriaLive = false;
+    dsHiddenAssistiveText;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    render() {
+        const sizeInPixels = SPINNER_SIZES[this.dsSize];
+        const textSizeClass = SPINNER_TEXT_SIZES[this.dsSize];
+        const spinnerColorVariable = SPINNER_COLORS[this.dsSpinnerColor];
+        const classes = classNames('ds-spinner', `ds-spinner--${this.dsSize}`, {
+            [`ds-spinner--${this.dsSpinnerTextPosition}`]: !!this.dsText,
+        });
+        const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
+        const segmentClasses = index => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        return (h("div", { key: '3d312dd8883b903bb59c8ceface626444ac0df44', 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 }, h("div", { key: '81d04de4de327d4b8be4a03a4b0f97d56214547e', class: "ds-spinner__spinner" }, h("div", { key: 'f7136c4637d17bc796d2e69df8aae51244d1d97e', class: segmentClasses(1) }), h("div", { key: 'd839ca7f1aae71616062b82af2d5b7610299bf25', class: segmentClasses(2) }), h("div", { key: 'bcbd84559e7fd2204320f4788837df61aed6208a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '8b3f758381d1623f84e0c237ec17b97a81a85983' }, h("span", { key: '52930b05b2b868c38f785b09d6bb86dddfde828b' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '91677c1f685820bc32f6c8557df98c1c37cdbf8e', class: textClasses }, this.dsText)));
+    }
+};
+DsSpinner.style = dsSpinnerCss;
+
+export { DsSpinner as ds_spinner };