npm - @uh-design-system/component-library - Versions diffs - 0.7.1 → 0.7.2-rc.1 - Mend

@uh-design-system/component-library 0.7.1 → 0.7.2-rc.1

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

Files changed (1575) hide show

package/dist/cjs/ds-icon-zoom-out.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 const DsIconZoomOut = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const DsIconZoomOut = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (index.h(index.Host, { key: 'fd491a71429b5f0b066644fe15af1cc04d34db35', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: 'bd9b6fa2ffdd44b9f6379db612c129e856a9f2e8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, index.h("path", { key: '8baa46aa0f4623e64281e045410066f42eb2cab9', d: "M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406ZM269-556v-60h201v60H269Z" }))));
+        return (index.h(index.Host, { key: '4dbb9c229c9af03538818800b6341324c2c2e09d', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: 'e453c09381d8ed8d9a8785e124b442c9ee4557d1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, index.h("path", { key: '67afdd52a4e982d374916c6a189efd4022af5920', d: "M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406ZM269-556v-60h201v60H269Z" }))));
     }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 var utils = require('./utils-CQYRBA7R.js');
 const dsIconCss = ":host{display:flex}.ds-icon--container{display:flex}";
@@ -23,7 +23,7 @@ const DsIcon = class {
     render() {
         const iconComponentName = `ds-icon-${this.dsName.replace(/_/g, "-")}`;
         const IconTag = utils.transformTagName(iconComponentName, 'ds-icon', this.el);
-        return (index.h(index.Fragment, { key: '7eaf2c94d82646aced5d1809adf1dc3878f462ab' }, index.h("span", { key: '534afbeb6d1aefaac7dd700a5925deef5f800dcb', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, index.h(IconTag, { key: '528a25680f0198ba67054c23adab754aeff179f1', dsSize: utils.remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
+        return (index.h(index.Fragment, { key: '07581e5bc92ec162bee2975b6baa64c1803b5c38' }, index.h("span", { key: '1537fe69ea7815c3611551269b8ead4c68511342', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, index.h(IconTag, { key: 'c8b81d1b90b6434698e793db95916e2d7493d5db', dsSize: utils.remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
     }
 };
 DsIcon.style = dsIconCss;

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

@@ -1,10 +1,10 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-CQYRBA7R.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__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 dsInputValidityCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root,:host{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.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__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) {
@@ -28,7 +28,7 @@ const DsInputValidity = class {
         });
         const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
         const DsIcon = utils.transformTagName('ds-icon', 'ds-input-validity', this.el);
-        return (index.h("div", { key: 'd39ec88fafa158e6ae3e0fde34ab9012454507a8', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (index.h("div", { key: '8c3863ba4dde84c806fd994af040cc91265f9679', class: classes }, index.h(DsIcon, { key: '221dd7009c9a3fc02fbf29d85abe4640ff26d3ce', class: "ds-input-validity__icon", dsName: icon }), index.h("small", { key: '7709de0ba98a75ab413a24309ca20d224f34ea25', id: this.identifier }, this.dsText)))));
+        return (index.h("div", { key: 'd3f2ee11099c03634e4aa883047b0b3e703a4396', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (index.h("div", { key: '50cea574413bea4202c41515d2099c4804a433e1', class: classes }, index.h(DsIcon, { key: '4c8e325756ed286ad16af21774f35b34835cfb51', class: "ds-input-validity__icon", dsName: icon }), index.h("small", { key: 'f8eb469911f41094c9f071645dbc29f364cad8c3', id: this.identifier }, this.dsText)))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", null)]);

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var linkUtils = require('./linkUtils-d3jBbGmk.js');
+var linkUtils = require('./linkUtils-CnJFD7vY.js');
 var utils = require('./utils-CQYRBA7R.js');
-require('./index-DwxkNCwi.js');
+require('./index-CS1B-DeV.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: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{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-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}: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}:host:has(.ds-link-with-arrow--full-width){width:100%}.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:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);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--full-width{width:100%;justify-content:space-between}.ds-link-with-arrow__icon{display:inline-flex;flex-shrink:0;width:2rem;height:2rem;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}@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{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 visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const DsLinkWithArrow = class {
@@ -15,7 +15,8 @@ const DsLinkWithArrow = class {
         index.registerInstance(this, hostRef);
     }
     inheritedAttributes = {};
-    icon = 'arrow_forward';
+    defaultIcon = 'arrow_forward';
+    icon = this.defaultIcon;
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return index.getElement(this); }
@@ -25,6 +26,8 @@ const DsLinkWithArrow = class {
     dsTarget;
     dsAriaLabel;
     dsTag = 'a';
+    dsFullWidth = false;
+    dsIcon = this.defaultIcon;
     iconSize = '2rem';
     get linkAttributes() {
         if (this.dsTag !== 'a')
@@ -32,7 +35,7 @@ const DsLinkWithArrow = class {
         return {
             href: this.dsHref,
             rel: this.rel,
-            target: this.dsTarget
+            target: this.dsTarget,
         };
     }
     setIconSize = () => {
@@ -51,16 +54,21 @@ const DsLinkWithArrow = class {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
         }
+        else {
+            this.icon = this.dsIcon;
+        }
     }
     render() {
-        const classes = index$1.classNames('ds-link-with-arrow');
+        const classes = index$1.classNames('ds-link-with-arrow', {
+            'ds-link-with-arrow--full-width': this.dsFullWidth,
+        });
         const iconClasses = index$1.classNames('ds-link-with-arrow__icon', {
             'ds-link-with-arrow__icon--start': this.dsIconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.dsIconPosition === 'end',
         });
         const DsIcon = utils.transformTagName('ds-icon', 'ds-link-with-arrow', this.el);
         const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-link-with-arrow', this.el);
-        return (index.h(this.dsTag, { key: '0ac18a498b618b19d34678322ffd06a54e8c625a', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, index.h("slot", { key: '1fff2cf38044e37faa80a943bb2f42ca713652bf', name: "prefix" }, this.dsIconPosition === 'start' && index.h(DsIcon, { key: 'b8e3df94d512a117bee451c89e78f6345baa54fd', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, index.h("slot", { key: '416046d940aa1e926deffae714554584b3271f91', name: "suffix" }, this.dsIconPosition === 'end' && index.h(DsIcon, { key: '3fd4abdcdedd11a9da56d11f203aa6d146323b45', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), linkUtils.opensInNewTab(this.dsTarget) && index.h(DsVisuallyHidden, { key: 'de624fe88d1760f941e3db7d0bdc7f7fac15397c', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, linkUtils.visuallyHiddenAssistiveText())));
+        return (index.h(this.dsTag, { key: 'e68e7ed503d0eaaf491db3ce726f665176056a8f', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, index.h("slot", { key: '16a31dd1d81895a04988bcae91ba965d0356f1b1', name: "prefix" }, this.dsIconPosition === 'start' && index.h(DsIcon, { key: 'c9293c89cf109394f51126b43f7681528ad90976', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, index.h("slot", { key: 'b26c0bf85a7c5884b87cf0720680cf2c0b1efb8a', name: "suffix" }, this.dsIconPosition === 'end' && index.h(DsIcon, { key: '96089f23ca51f6d10cd32358fdbce3f921f3897b', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '382ed115a490f6c815628a07c4e874868a412ab8', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, linkUtils.visuallyHiddenAssistiveText()))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", null), index.h("ds-visually-hidden", null)]);

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var linkUtils = require('./linkUtils-d3jBbGmk.js');
+var linkUtils = require('./linkUtils-CnJFD7vY.js');
 var utils = require('./utils-CQYRBA7R.js');
-require('./index-DwxkNCwi.js');
+require('./index-CS1B-DeV.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 dsLinkCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root,:host{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}:host{display:inline-block}.ds-link{box-sizing:border-box;display:inline-flex;align-items:center;color:var(--ds-textColor-link);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-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);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-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)}.ds-link--colour-white{color:var(--ds-textColor-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-textColor-white)}.ds-link--colour-black{color:var(--ds-textColor-default)}.ds-link--colour-black:hover,.ds-link--colour-black:active,.ds-link--colour-black:visited,.ds-link--colour-black:focus-visible{color:var(--ds-textColor-default)}";
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const linkIconSizeMap = {

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

@@ -0,0 +1,109 @@
+'use strict';
+var index = require('./index-DscNJSZx.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var utils = require('./utils-CQYRBA7R.js');
+const dsOptionCss = ".sc-ds-option:root,.sc-ds-option-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.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}.ds-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-bgColor-white);color:var(--ds-textColor-default)}.ds-option--hidden.sc-ds-option{display:none}.ds-option.sc-ds-option:hover{background-color:var(--ds-bgColor-white-hover)}.ds-option.sc-ds-option:active{background-color:var(--ds-bgColor-white-active)}.ds-option--active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-option--selected.sc-ds-option{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option--selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option--selected.sc-ds-option:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-option--selected.sc-ds-option:active{background-color:var(--ds-bgColor-primary-active)}.ds-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}.ds-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}.ds-option.sc-ds-option .option-description.sc-ds-option{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option.sc-ds-option .option-description.sc-ds-option:not(:empty){display:block}.ds-option--selected.sc-ds-option .option-description.sc-ds-option{color:var(--ds-textColor-white)}.ds-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 optionIdGenerator = utils.idGenerator('ds-option');
+const DsOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsOptionClick = index.createEvent(this, "dsOptionClick");
+    }
+    get el() { return index.getElement(this); }
+    optionLabelTextRef;
+    dsOptionClick;
+    dsId = optionIdGenerator.next().value;
+    dsValue;
+    dsDisabled = false;
+    dsDescription;
+    dsActive = false;
+    dsSelected = false;
+    dsHidden = false;
+    dsMouseDownPreventDefault = false;
+    dsFocusOnActiveChange = true;
+    internalTabIndex = -1;
+    optionRef;
+    onMouseDown(event) {
+        if (this.dsMouseDownPreventDefault) {
+            event.preventDefault();
+        }
+    }
+    onClick() {
+        this.dsOptionClick.emit(this.el);
+    }
+    dsActiveObserver(newValue) {
+        this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
+        if (newValue && !this.dsDisabled && this.dsFocusOnActiveChange) {
+            this.dsFocus();
+        }
+    }
+    async dsGetLabel() {
+        return this.optionLabelTextRef?.textContent || '';
+    }
+    async dsGetGroup() {
+        return this.el.closest(utils.transformTagName('ds-option-group', 'ds-option', this.el));
+    }
+    async dsFocus() {
+        this.optionRef?.focus();
+    }
+    componentWillLoad() {
+        this.internalTabIndex = this.dsActive && !this.dsDisabled ? 0 : -1;
+    }
+    render() {
+        const DsIcon = utils.transformTagName('ds-icon', 'ds-option', this.el);
+        return (index.h("div", { key: '975d51fb896caf57c2ffca545f71c9dda33cfcfe', ref: el => (this.optionRef = el), id: this.dsId, class: index$1.classNames('ds-option', {
+                'ds-option--active': this.dsActive,
+                'ds-option--selected': this.dsSelected,
+                'disabled': this.dsDisabled,
+                'ds-option--hidden': this.dsHidden,
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex }, index.h("span", { key: 'ec79b16d03f6bdda6f533edc1cc9a96cf6364413', class: "option-label" }, index.h("span", { key: 'd3502cc899d73961ea2dea968519f97900e9459e', ref: el => (this.optionLabelTextRef = el) }, index.h("slot", { key: '449f853782f92f2adbf77b595646668a02bca4e0' })), this.dsDescription && index.h("span", { key: '3efb602ea3a9cd8f7dc4ca558d1101192f9fd1cd', class: "option-description" }, this.dsDescription)), this.dsSelected && index.h(DsIcon, { key: '790aaa6c644ef1ba0cf6b65e426c5c761a45e689', dsName: "check", class: "option-check", "aria-hidden": "true" })));
+    }
+    static get watchers() { return {
+        "dsActive": ["dsActiveObserver"]
+    }; }
+};
+utils.declareComponentDependencies([index.h("ds-icon", null)]);
+DsOption.style = dsOptionCss;
+const dsOptionGroupCss = ".sc-ds-option-group:root,.sc-ds-option-group-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.group.sc-ds-option-group{display:block}.group--hidden.sc-ds-option-group{display:none}.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-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.group-label.shadow.sc-ds-option-group{box-shadow:0 -2px 7px var(--ds-overlay-black-50)}";
+const DsOptionGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    dsLabel;
+    dsHidden = false;
+    dsMouseDownPreventDefault = false;
+    groupId;
+    dsLabelObserver(newValue) {
+        this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+    async dsHasVisibleOptions() {
+        const options = Array.from(this.el.querySelectorAll(utils.transformTagName('ds-option', 'ds-option-group', this.el)));
+        return options.some(option => !option.dsHidden);
+    }
+    componentWillLoad() {
+        this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+    onMouseDown(event) {
+        if (this.dsMouseDownPreventDefault) {
+            event.preventDefault();
+        }
+    }
+    render() {
+        return (index.h("div", { key: '873571d0c78360054d6f8352b2a14ef8d06803e8', class: index$1.classNames('group', {
+                'group--hidden': this.dsHidden,
+            }), role: "group", "aria-labelledby": this.groupId }, index.h("div", { key: '07c960ebdd6920c7f94d1e035086f3205909a183', class: "group-label", id: this.groupId }, this.dsLabel), index.h("slot", { key: '214b727349c10865482e50f707764c985eb3abf5' })));
+    }
+    static get watchers() { return {
+        "dsLabel": ["dsLabelObserver"]
+    }; }
+};
+DsOptionGroup.style = dsOptionGroupCss;
+exports.ds_option = DsOption;
+exports.ds_option_group = DsOptionGroup;

package/dist/cjs/ds-options-message.cjs.entry.js ADDED Viewed

@@ -0,0 +1,37 @@
+'use strict';
+var index = require('./index-DscNJSZx.js');
+var index$1 = require('./index-CS1B-DeV.js');
+var controlUtils = require('./controlUtils-qCtArL_U.js');
+var utils = require('./utils-CQYRBA7R.js');
+const dsOptionsMessageCss = ".sc-ds-options-message:root,.sc-ds-options-message-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.ds-options-message.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center}.ds-options-message__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__error__title.sc-ds-options-message,.ds-options-message__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__error__text.sc-ds-options-message,.ds-options-message__loading__text.sc-ds-options-message,.ds-options-message__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}.ds-options-message__loading__text.sc-ds-options-message{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}";
+const DsOptionsMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    dsLoading = false;
+    dsError = false;
+    dsNoResults = false;
+    dsErrorTitle = controlUtils.weCouldNotLoadOptions();
+    dsErrorText = controlUtils.tryAgainOrIfTheProblemPersists();
+    dsLoadingText = controlUtils.loadingOptions();
+    dsNoResultsTitle = controlUtils.noResultsFound();
+    dsNoResultsText = controlUtils.tryADifferentSearchTerm();
+    render() {
+        const DsIcon = utils.transformTagName('ds-icon', 'ds-options-message', this.el);
+        const DsSpinner = utils.transformTagName('ds-spinner', 'ds-options-message', this.el);
+        const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-options-message', this.el);
+        const baseClass = 'ds-options-message';
+        const errorClass = `${baseClass}__error`;
+        const loadingClass = `${baseClass}__loading`;
+        const noResultsClass = `${baseClass}__no-results`;
+        return (index.h("div", { key: 'bc45f7277c4b41c7abf84d84ca96f276bbe4ec5b', role: "status", "aria-live": "polite", "aria-atomic": "true" }, !this.dsLoading && !this.dsError && !this.dsNoResults ? (index.h(DsVisuallyHidden, null, controlUtils.thereAreOptionsToBrowse())) : (index.h("div", { class: baseClass }, this.dsError ? (index.h("div", { class: errorClass }, index.h(DsIcon, { dsName: "warning", dsSize: '2rem', class: `${errorClass}__icon` }), index.h("div", { class: `${errorClass}__title` }, this.dsErrorTitle), index.h("div", { class: `${errorClass}__text` }, this.dsErrorText))) : this.dsLoading ? (index.h("div", { class: loadingClass }, index.h(DsSpinner, { dsSize: "large" }), index.h("div", { class: `${loadingClass}__text` }, this.dsLoadingText))) : (index.h("div", { class: noResultsClass }, index.h("div", { class: `${noResultsClass}__title`, lang: index$1.getLanguage() }, this.dsNoResultsTitle), index.h("div", { class: `${noResultsClass}__text` }, this.dsNoResultsText)))))));
+    }
+};
+utils.declareComponentDependencies([index.h("ds-icon", null), index.h("ds-spinner", null), index.h("ds-visually-hidden", null)]);
+DsOptionsMessage.style = dsOptionsMessageCss;
+exports.ds_options_message = DsOptionsMessage;