@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

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

@@ -1,6 +1,5 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as isValidation } from './index.js';
 import { d as defineCustomElement$1 } from './ds-icon2.js';
 
 const dsInputValidityCss = ":root,:host{--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)}";
@@ -27,7 +26,7 @@ const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
             'ds-input-validity--success': this.dsType === 'success',
         });
         const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (h("div", { key: '456156620314cb5fc03bd3544e44587818025d66', 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: '7f1d665276b7a3771db20e890443f1884e50911e', class: classes }, h("ds-icon", { key: '10000d724a2e82460a42e03b7394334b40d8fa2e', dsName: icon }), h("small", { key: '8c139737440f25e304f97f421319cbd05abea15b', id: this.identifier }, this.dsText)))));
+        return (h("div", { key: 'c56f67e7067eeb576b2c0ddc5a63f656a5670658', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: 'e180b75368843c56dd85e4243bb7e74e79af0d26', class: classes }, h("ds-icon", { key: '66ca3abcccda0e7c3e6a11daa0c3110f97a9c1d9', dsName: icon }), h("small", { key: 'df1304b07c01b8399734769869521f281bdc475f', id: this.identifier }, this.dsText)))));
     }
     static get style() { return dsInputValidityCss; }
 }, [0, "ds-input-validity", {

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

@@ -5,7 +5,7 @@ import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtil
 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,:host{--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 dsLinkWithArrowCss = ":root,:host{--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:2rem;height:2rem;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}@media (min-width: 30rem){.ds-link-with-arrow__icon{width:2.5rem;height:2.5rem}}.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 {
@@ -25,6 +25,7 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
     dsTarget;
     dsAriaLabel;
     dsTag = 'a';
+    iconSize = '2rem';
     get linkAttributes() {
         if (this.dsTag !== 'a')
             return {};
@@ -34,7 +35,14 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
             target: this.dsTarget
         };
     }
+    setIconSize = () => {
+        this.iconSize = window.innerWidth < 480 ? '1.5rem' : '2rem';
+    };
+    resizeListener() {
+        this.setIconSize();
+    }
     componentWillLoad() {
+        this.setIconSize();
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-label']),
             ...inheritSpecifiedAttributes(this.el, ['lang']),
@@ -50,7 +58,7 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
             'ds-link-with-arrow__icon--start': this.dsIconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.dsIconPosition === 'end',
         });
-        return (h(this.dsTag, { key: 'b142cdc185c70a015a7cbbc24ec939bab1213893', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: 'ecaa05624d6f769a261f82874542c5d8575b10c6', name: "prefix" }, this.dsIconPosition === 'start' && h("ds-icon", { key: 'd1ad08fa56dd3d1157cc777057a6071b056dca62', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), this.dsText, h("slot", { key: 'b10ea714396f7cbd59c3e067deb9b848b013364a', name: "suffix" }, this.dsIconPosition === 'end' && h("ds-icon", { key: 'fbb07740cf94729aa3e81b83f127f648818a72a8', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: '90c6af76ad761af742719ca200f607bddb0d16d3', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText())));
+        return (h(this.dsTag, { key: 'f33caca2eda5c54cc3d5b30f15e091f65006f2c2', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '2b4f7a313148bb5217d8907a5e3fad01a1ceff1d', name: "prefix" }, this.dsIconPosition === 'start' && h("ds-icon", { key: '7b826f07ce18fe842bca8a5006e474be98a0838b', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '1184a385c1f75a49e4820eac3d21910ba0b54b3f', name: "suffix" }, this.dsIconPosition === 'end' && h("ds-icon", { key: '16607d6ff25bce5fb3fae5c6aca9fd808cb2710f', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: 'e68cfe34cd5e6c78c9e4bdaa4cc0f4deac88a048', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
     }
     static get style() { return dsLinkWithArrowCss; }
 }, [1, "ds-link-with-arrow", {
@@ -59,8 +67,9 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
         "dsHref": [1, "ds-href"],
         "dsTarget": [1, "ds-target"],
         "dsAriaLabel": [1, "ds-aria-label"],
-        "dsTag": [1, "ds-tag"]
-    }]);
+        "dsTag": [1, "ds-tag"],
+        "iconSize": [32]
+    }, [[9, "resize", "resizeListener"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/ds-link.js

@@ -1,109 +1,4 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { c as classNames } from './index3.js';
-import { b as inheritSpecifiedAttributes, a as inheritAriaAttributes } from './attributes.js';
-import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils.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,:host{--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 {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    inheritedAttributes = {};
-    rel;
-    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
-    get el() { return this; }
-    dsText;
-    dsSize;
-    dsVariant = 'inline';
-    dsWeight = 'regular';
-    dsIcon = '';
-    dsIconPosition = 'end';
-    dsIconTitle;
-    dsIconHidden;
-    dsHref;
-    dsTarget;
-    dsDownload;
-    dsAriaLabel;
-    dsColour;
-    dsTag = 'a';
-    get linkAttributes() {
-        if (this.dsTag !== 'a')
-            return {};
-        return {
-            href: this.dsHref,
-            rel: this.rel,
-            target: this.dsTarget,
-            download: this.dsDownload
-        };
-    }
-    componentWillLoad() {
-        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.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.dsVariant}`]: this.dsIconPosition === 'start',
-            [`ds-link__icon--end-${this.dsVariant}`]: this.dsIconPosition === 'end',
-        });
-        return (h(this.dsTag, { key: '7dfe1669cb6eee4d9c34549db4bb63889db314c7', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '5658fff18e509c3e8b1e0896fa25d9b9078d2973', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (h("ds-icon", { key: 'd4082b28e19a2224e2555e0af18c267d949e071b', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, h("slot", { key: '77bc5d8f27eb890d523b34352d2a303d925c67d9', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (h("ds-icon", { key: '9a8be5140a2ed1c160dd0a11f4c53e4c53bc4890', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: 'dfe1d9995e5ee579b672b20d4987f8e061c6610e', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText())));
-    }
-    static get style() { return dsLinkCss; }
-}, [1, "ds-link", {
-        "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"],
-        "dsTag": [1, "ds-tag"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-link", "ds-icon", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsLink$1);
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { D as DsLink$1, d as defineCustomElement$1 } from './ds-link2.js';
 
 const DsLink = DsLink$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ds-link2.js

@@ -0,0 +1,117 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+import { c as classNames } from './index3.js';
+import { b as inheritSpecifiedAttributes, a as inheritAriaAttributes } from './attributes.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils.js';
+import { i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
+import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
+
+const dsLinkCss = ":root,:host{--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{box-sizing:border-box;display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);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 linkIconSizeMap = {
+    '2xLarge': '1.375rem',
+    'xLarge': '1.25rem',
+    'large': '1.125rem',
+    'medium': '1rem',
+    'small': '0.875rem',
+    'xSmall': '0.75rem',
+};
+const DsLink = proxyCustomElement(class DsLink extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    inheritedAttributes = {};
+    rel;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    get el() { return this; }
+    dsText;
+    dsSize;
+    dsVariant = 'inline';
+    dsWeight = 'regular';
+    dsIcon = '';
+    dsIconPosition = 'end';
+    dsIconTitle;
+    dsIconHidden;
+    dsHref;
+    dsTarget;
+    dsDownload;
+    dsAriaLabel;
+    dsColour;
+    dsTag = 'a';
+    get linkAttributes() {
+        if (this.dsTag !== 'a')
+            return {};
+        return {
+            href: this.dsHref,
+            rel: this.rel,
+            target: this.dsTarget,
+            download: this.dsDownload,
+        };
+    }
+    componentWillLoad() {
+        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.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.dsVariant}`]: this.dsIconPosition === 'start',
+            [`ds-link__icon--end-${this.dsVariant}`]: this.dsIconPosition === 'end',
+        });
+        const iconSize = linkIconSizeMap[this.dsSize] ?? '1rem';
+        return (h(this.dsTag, { key: 'c752b279607128f89e3972785faec2528a721421', part: "ds-link", class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '3a46af0939d725ca47dc903ec218776c53242e23', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (h("ds-icon", { key: '93461318d5c5ea371c2b2221b1574791edb7d307', dsName: this.dsIcon, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, h("slot", { key: 'a6a2a6c33680a5bdf15ab2cdcd45512298d8fae7', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (h("ds-icon", { key: '62beb495660c54c22640517ee5eef23109e11cb4', dsName: this.dsIcon, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: '6177cbc4a13aee2b63b69d12e46e402dad1f87a8', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
+    }
+    static get style() { return dsLinkCss; }
+}, [1, "ds-link", {
+        "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"],
+        "dsTag": [1, "ds-tag"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-link", "ds-icon", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsLink);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsLink as D, defineCustomElement as d };

package/dist/components/ds-option-group.d.ts

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

package/dist/components/ds-option-group.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+
+const dsOptionGroupCss = ".group.sc-ds-option-group ul.sc-ds-option-group{padding:0}.group-label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-palette-black-03);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.group-label.shadow.sc-ds-option-group{box-shadow:0 -2px 7px var(--ds-overlay-black-50)}";
+
+const DsOptionGroup$1 = proxyCustomElement(class DsOptionGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    dsLabel;
+    groupId;
+    dsLabelObserver(newValue) {
+        this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+    componentWillLoad() {
+        this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+    render() {
+        return (h("div", { key: '2471766ca7de5398081839e044d55fdddb578c3a', class: "group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: 'ae62a44855bc54f481ce12ec69f076798bf99699', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: '365deafb4b1add8c532eb261e3d73b8246f8bcab' })));
+    }
+    static get watchers() { return {
+        "dsLabel": ["dsLabelObserver"]
+    }; }
+    static get style() { return dsOptionGroupCss; }
+}, [6, "ds-option-group", {
+        "dsLabel": [1, "ds-label"],
+        "groupId": [32]
+    }, undefined, {
+        "dsLabel": ["dsLabelObserver"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-option-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-option-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsOptionGroup$1);
+            }
+            break;
+    } });
+}
+
+const DsOptionGroup = DsOptionGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsOptionGroup, defineCustomElement };

package/dist/components/ds-option.d.ts

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

package/dist/components/ds-option.js

@@ -0,0 +1,76 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+import { d as defineCustomElement$2 } from './ds-icon2.js';
+
+const dsOptionCss = ".sc-ds-option:root,.sc-ds-option-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.option.sc-ds-option{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:0.625rem var(--ds-spacing-small);position:relative;cursor:pointer;background-color:var(--ds-palette-white);color:var(--ds-palette-black-95)}.option.sc-ds-option:hover{background-color:var(--ds-palette-black-10)}.option.sc-ds-option:active{background-color:var(--ds-palette-black-20)}.option.active.sc-ds-option{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 * 1)}.option.selected.sc-ds-option{background-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-white)}.option.selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-palette-white)}.option.selected.sc-ds-option:hover{background-color:var(--ds-palette-mainBlue-80)}.option.selected.sc-ds-option:active{background-color:var(--ds-palette-mainBlue-90)}.option.sc-ds-option .option-label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;grid-column:1;grid-row:1}.option.sc-ds-option .check-icon.sc-ds-option{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin-left:auto;visibility:hidden}.option.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.option.sc-ds-option .option-description.sc-ds-option:not(:empty){display:block}.option.selected.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-white)}.option.sc-ds-option .option-check.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}";
+
+const DsOption$1 = proxyCustomElement(class DsOption extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get el() { return this; }
+    dsValue;
+    dsDisabled = false;
+    dsDescription;
+    dsActive = false;
+    dsSelected = false;
+    internalTabIndex = -1;
+    optionRef;
+    dsActiveObserver(newValue) {
+        this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
+        if (newValue && !this.dsDisabled) {
+            this.dsFocus();
+        }
+    }
+    async dsFocus() {
+        this.optionRef?.focus();
+    }
+    componentWillLoad() {
+        this.internalTabIndex = this.dsActive && !this.dsDisabled ? 0 : -1;
+    }
+    render() {
+        return (h("div", { key: '1299b9ceff5e1c29230a7693acf22a7f1c0b0dac', ref: el => this.optionRef = el, class: {
+                option: true,
+                active: this.dsActive,
+                selected: this.dsSelected,
+                disabled: this.dsDisabled,
+            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, h("span", { key: 'a02d4b4551d4c248a3eeebe8f365d889358ac2ac', class: "option-label" }, h("slot", { key: '9b55b8fb9d075a87bc3868d15133d2841de0c12b' }), this.dsDescription && h("span", { key: '9f1123d8a1d60ba2237ed1cd2a8bfd8bee1bcf2b', class: "option-description" }, this.dsDescription)), this.dsSelected && (h("ds-icon", { key: 'd1a0545f6599e154caf8df710aa5750539f8dfee', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
+    }
+    static get watchers() { return {
+        "dsActive": ["dsActiveObserver"]
+    }; }
+    static get style() { return dsOptionCss; }
+}, [6, "ds-option", {
+        "dsValue": [1, "ds-value"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsDescription": [1, "ds-description"],
+        "dsActive": [516, "ds-active"],
+        "dsSelected": [516, "ds-selected"],
+        "internalTabIndex": [32],
+        "dsFocus": [64]
+    }, undefined, {
+        "dsActive": ["dsActiveObserver"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-option", "ds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsOption$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsOption = DsOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsOption, defineCustomElement };

package/dist/components/ds-options.d.ts

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

package/dist/components/ds-options.js

@@ -0,0 +1,6 @@
+import { D as DsOptions$1, d as defineCustomElement$1 } from './ds-options2.js';
+
+const DsOptions = DsOptions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsOptions, defineCustomElement };