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/components/ds-icon-zoom-in-map.js CHANGED Viewed

@@ -10,9 +10,9 @@ const DsIconZoomInMap$1 = proxyCustomElement(class DsIconZoomInMap extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'f1ce9da50093991871642f55ac6f7e66819ed4c3', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b4ae7398805f4388967f1874f3bc844123bd215f', 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 }, h("path", { key: '69082359c2a2114153d9bcaecdb12eef2461066a', d: "m147-79-68-68 130-130H95v-94h276v276h-94v-114L147-79Zm666 0L684-209v114h-95v-276h277v94H751l130 130-68 68ZM95-589v-95h114L79-813l68-68 130 130v-115h94v277H95Zm494 0v-277h95v115l130-131 68 68-131 130h115v95H589Z" }))));
+        return (h(Host, { key: '1589842db49941d3390c74454f14d2bcdf73a48c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '67b923fa7d291aabd992d394d1e874dcb3c0af10', 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 }, h("path", { key: '88bba27ef34269db870ebec896e032fdd77d7884', d: "m147-79-68-68 130-130H95v-94h276v276h-94v-114L147-79Zm666 0L684-209v114h-95v-276h277v94H751l130 130-68 68ZM95-589v-95h114L79-813l68-68 130 130v-115h94v277H95Zm494 0v-277h95v115l130-131 68 68-131 130h115v95H589Z" }))));
     }
-}, [0, "ds-icon-zoom-in-map", {
+}, [256, "ds-icon-zoom-in-map", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-zoom-in.js CHANGED Viewed

@@ -10,9 +10,9 @@ const DsIconZoomIn$1 = proxyCustomElement(class DsIconZoomIn extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'e7d0687249d8e5e885fa8ac58501d7d18f33ee14', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b6f6daea8b552829000550afc6ea7d66bbc39c04', 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 }, h("path", { key: 'f3a0a8f6d16adf423e5015d179db00f6a684f49e', 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-406Zm-31.85-73v-77H263v-60h77v-77h60v77h77v60.5h-77v76.5h-60.5Z" }))));
+        return (h(Host, { key: 'fce82d2edc323ca8671c589cc6f65a3228eb07b7', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '070c7eaa490552a76f640fa74dc58569c5b2017e', 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 }, h("path", { key: '1df036ec30c3322f394337ae68cd7ced65d84716', 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-406Zm-31.85-73v-77H263v-60h77v-77h60v77h77v60.5h-77v76.5h-60.5Z" }))));
     }
-}, [0, "ds-icon-zoom-in", {
+}, [256, "ds-icon-zoom-in", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-zoom-out-map.js CHANGED Viewed

@@ -10,9 +10,9 @@ const DsIconZoomOutMap$1 = proxyCustomElement(class DsIconZoomOutMap extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'c1241b76db7afa679983a444bb832aa8f932ed01', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ec002690fe752685dc44e2693a501aa2384a5c75', 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 }, h("path", { key: 'd99accf19538f71536a2af9114c87e8551ed0256', d: "M95-95v-276h94v115l131-131 67 67-131 131h115v94H95Zm494 0v-94h115L574-319l67-67 130 130v-115h95v276H589ZM319-574 189-704v115H95v-277h276v95H256l130 130-67 67Zm322 0-67-67 130-130H589v-95h277v277h-95v-115L641-574Z" }))));
+        return (h(Host, { key: 'b19056cb5e258c2ed59b2db9dbdb65ac6c3082bc', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '65c11757730d18e3c9a223c8d5dfff206d78f053', 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 }, h("path", { key: '5be050d10a9320106558ab7fadf934b29805db13', d: "M95-95v-276h94v115l131-131 67 67-131 131h115v94H95Zm494 0v-94h115L574-319l67-67 130 130v-115h95v276H589ZM319-574 189-704v115H95v-277h276v95H256l130 130-67 67Zm322 0-67-67 130-130H589v-95h277v277h-95v-115L641-574Z" }))));
     }
-}, [0, "ds-icon-zoom-out-map", {
+}, [256, "ds-icon-zoom-out-map", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

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

@@ -10,9 +10,9 @@ const DsIconZoomOut$1 = proxyCustomElement(class DsIconZoomOut extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'fd491a71429b5f0b066644fe15af1cc04d34db35', style: { display: 'flex' }, title: this.dsTitle }, 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 }, 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 (h(Host, { key: '4dbb9c229c9af03538818800b6341324c2c2e09d', style: { display: 'flex' }, title: this.dsTitle }, 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 }, 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" }))));
     }
-}, [0, "ds-icon-zoom-out", {
+}, [256, "ds-icon-zoom-out", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon2.js CHANGED Viewed

@@ -23,10 +23,10 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
     render() {
         const iconComponentName = `ds-icon-${this.dsName.replace(/_/g, "-")}`;
         const IconTag = transformTagName(iconComponentName, 'ds-icon', this.el);
-        return (h(Fragment, { key: '7eaf2c94d82646aced5d1809adf1dc3878f462ab' }, h("span", { key: '534afbeb6d1aefaac7dd700a5925deef5f800dcb', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, h(IconTag, { key: '528a25680f0198ba67054c23adab754aeff179f1', dsSize: remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
+        return (h(Fragment, { key: '07581e5bc92ec162bee2975b6baa64c1803b5c38' }, h("span", { key: '1537fe69ea7815c3611551269b8ead4c68511342', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, h(IconTag, { key: 'c8b81d1b90b6434698e793db95916e2d7493d5db', dsSize: remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
     }
     static get style() { return dsIconCss; }
-}, [1, "ds-icon", {
+}, [257, "ds-icon", {
         "dsName": [1, "ds-name"],
         "dsColour": [1, "ds-colour"],
         "dsSize": [1, "ds-size"],

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

@@ -3,7 +3,7 @@ import { c as classNames } from './index3.js';
 import { t as transformTagName, d as declareComponentDependencies } from './utils.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__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 = proxyCustomElement(class DsInputValidity extends H {
     constructor() {
@@ -28,10 +28,10 @@ const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
         });
         const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
         const DsIcon = transformTagName('ds-icon', 'ds-input-validity', this.el);
-        return (h("div", { key: 'd39ec88fafa158e6ae3e0fde34ab9012454507a8', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: '8c3863ba4dde84c806fd994af040cc91265f9679', class: classes }, h(DsIcon, { key: '221dd7009c9a3fc02fbf29d85abe4640ff26d3ce', class: "ds-input-validity__icon", dsName: icon }), h("small", { key: '7709de0ba98a75ab413a24309ca20d224f34ea25', id: this.identifier }, this.dsText)))));
+        return (h("div", { key: 'd3f2ee11099c03634e4aa883047b0b3e703a4396', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: '50cea574413bea4202c41515d2099c4804a433e1', class: classes }, h(DsIcon, { key: '4c8e325756ed286ad16af21774f35b34835cfb51', class: "ds-input-validity__icon", dsName: icon }), h("small", { key: 'f8eb469911f41094c9f071645dbc29f364cad8c3', id: this.identifier }, this.dsText)))));
     }
     static get style() { return dsInputValidityCss; }
-}, [0, "ds-input-validity", {
+}, [256, "ds-input-validity", {
         "dsText": [1, "ds-text"],
         "dsType": [1, "ds-type"],
         "dsValidityRole": [1, "ds-validity-role"],

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

@@ -6,7 +6,7 @@ import { i as idGenerator, t as transformTagName, d as declareComponentDependenc
 import { 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: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 = idGenerator('visually-hidden-assistive-text');
 const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
@@ -16,7 +16,8 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
         this.__attachShadow();
     }
     inheritedAttributes = {};
-    icon = 'arrow_forward';
+    defaultIcon = 'arrow_forward';
+    icon = this.defaultIcon;
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return this; }
@@ -26,6 +27,8 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
     dsTarget;
     dsAriaLabel;
     dsTag = 'a';
+    dsFullWidth = false;
+    dsIcon = this.defaultIcon;
     iconSize = '2rem';
     get linkAttributes() {
         if (this.dsTag !== 'a')
@@ -33,7 +36,7 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
         return {
             href: this.dsHref,
             rel: this.rel,
-            target: this.dsTarget
+            target: this.dsTarget,
         };
     }
     setIconSize = () => {
@@ -52,25 +55,32 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
         }
+        else {
+            this.icon = this.dsIcon;
+        }
     }
     render() {
-        const classes = classNames('ds-link-with-arrow');
+        const classes = classNames('ds-link-with-arrow', {
+            'ds-link-with-arrow--full-width': this.dsFullWidth,
+        });
         const iconClasses = 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 = transformTagName('ds-icon', 'ds-link-with-arrow', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-with-arrow', this.el);
-        return (h(this.dsTag, { key: '0ac18a498b618b19d34678322ffd06a54e8c625a', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '1fff2cf38044e37faa80a943bb2f42ca713652bf', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'b8e3df94d512a117bee451c89e78f6345baa54fd', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '416046d940aa1e926deffae714554584b3271f91', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '3fd4abdcdedd11a9da56d11f203aa6d146323b45', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && h(DsVisuallyHidden, { key: 'de624fe88d1760f941e3db7d0bdc7f7fac15397c', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
+        return (h(this.dsTag, { key: 'e68e7ed503d0eaaf491db3ce726f665176056a8f', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '16a31dd1d81895a04988bcae91ba965d0356f1b1', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'c9293c89cf109394f51126b43f7681528ad90976', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'b26c0bf85a7c5884b87cf0720680cf2c0b1efb8a', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '96089f23ca51f6d10cd32358fdbce3f921f3897b', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '382ed115a490f6c815628a07c4e874868a412ab8', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText()))));
     }
     static get style() { return dsLinkWithArrowCss; }
-}, [1, "ds-link-with-arrow", {
+}, [257, "ds-link-with-arrow", {
         "dsText": [1, "ds-text"],
         "dsIconPosition": [1, "ds-icon-position"],
         "dsHref": [1, "ds-href"],
         "dsTarget": [1, "ds-target"],
         "dsAriaLabel": [1, "ds-aria-label"],
         "dsTag": [1, "ds-tag"],
+        "dsFullWidth": [4, "ds-full-width"],
+        "dsIcon": [1, "ds-icon"],
         "iconSize": [32]
     }, [[9, "resize", "resizeListener"]]]);
 declareComponentDependencies([h("ds-icon", null), h("ds-visually-hidden", null)]);

package/dist/components/ds-link2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { i as idGenerator, t as transformTagName, d as declareComponentDependenc
 import { 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 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 = idGenerator('visually-hidden-assistive-text');
 const linkIconSizeMap = {
@@ -77,7 +77,7 @@ const DsLink = proxyCustomElement(class DsLink extends H {
         return (h(this.dsTag, { key: '95d9b62ac717adebe61d0a4e6aa88401ffba0159', part: "link", class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '3838c29e4d3c98b818e3985948fccef66ae7e26d', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (h(DsIcon, { key: '2498a2e9d053d7e83cbf01f1190301b427b1f9ae', dsName: this.dsIcon, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, h("slot", { key: '96a550a8433c3a60cc82be30f1b8289f80d8c1e2', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (h(DsIcon, { key: 'f117bc9bd27dd90e4a2100d86a88a3ba0fa2dcc7', dsName: this.dsIcon, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), opensInNewTab(this.dsTarget) && h(DsVisuallyHidden, { key: '2029deefab55e6205d254a7d5be3841cc7870ebe', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
     }
     static get style() { return dsLinkCss; }
-}, [1, "ds-link", {
+}, [257, "ds-link", {
         "dsText": [1, "ds-text"],
         "dsSize": [1, "ds-size"],
         "dsVariant": [1, "ds-variant"],

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

@@ -1,31 +1,50 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
+import { c as classNames } from './index3.js';
+import { t as transformTagName } from './utils.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 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$1 = proxyCustomElement(class DsOptionGroup extends H {
     constructor() {
         super();
         this.__registerHost();
     }
+    get el() { return 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(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 (h("div", { key: 'c764a70cf7cd2881404ea90b114957227259d37c', class: "group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: '6a38a5db89ff8462704c740a7921e40312a9f466', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: 'b6bac535b5c569175f9fb84550d823829208142b' })));
+        return (h("div", { key: '873571d0c78360054d6f8352b2a14ef8d06803e8', class: classNames('group', {
+                'group--hidden': this.dsHidden,
+            }), role: "group", "aria-labelledby": this.groupId }, h("div", { key: '07c960ebdd6920c7f94d1e035086f3205909a183', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: '214b727349c10865482e50f707764c985eb3abf5' })));
     }
     static get watchers() { return {
         "dsLabel": ["dsLabelObserver"]
     }; }
     static get style() { return dsOptionGroupCss; }
-}, [6, "ds-option-group", {
+}, [262, "ds-option-group", {
         "dsLabel": [1, "ds-label"],
-        "groupId": [32]
-    }, undefined, {
+        "dsHidden": [4, "ds-hidden"],
+        "dsMouseDownPreventDefault": [4, "ds-mouse-down-prevent-default"],
+        "groupId": [32],
+        "dsHasVisibleOptions": [64]
+    }, [[0, "mousedown", "onMouseDown"]], {
         "dsLabel": ["dsLabelObserver"]
     }]);
 function defineCustomElement$1() {

package/dist/components/ds-option.js CHANGED Viewed

@@ -1,28 +1,51 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
+import { c as classNames } from './index3.js';
+import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils.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 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 = idGenerator('ds-option');
 const DsOption$1 = proxyCustomElement(class DsOption extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.dsOptionClick = createEvent(this, "dsOptionClick");
     }
     get el() { return 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) {
+        if (newValue && !this.dsDisabled && this.dsFocusOnActiveChange) {
             this.dsFocus();
         }
     }
+    async dsGetLabel() {
+        return this.optionLabelTextRef?.textContent || '';
+    }
+    async dsGetGroup() {
+        return this.el.closest(transformTagName('ds-option-group', 'ds-option', this.el));
+    }
     async dsFocus() {
         this.optionRef?.focus();
     }
@@ -31,26 +54,32 @@ const DsOption$1 = proxyCustomElement(class DsOption extends H {
     }
     render() {
         const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: 'b051e2ccd61a02f1c33e5c74f7f66dec856e1d04', 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: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
+        return (h("div", { key: '975d51fb896caf57c2ffca545f71c9dda33cfcfe', ref: el => (this.optionRef = el), id: this.dsId, class: 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 }, h("span", { key: 'ec79b16d03f6bdda6f533edc1cc9a96cf6364413', class: "option-label" }, h("span", { key: 'd3502cc899d73961ea2dea968519f97900e9459e', ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '449f853782f92f2adbf77b595646668a02bca4e0' })), this.dsDescription && h("span", { key: '3efb602ea3a9cd8f7dc4ca558d1101192f9fd1cd', class: "option-description" }, this.dsDescription)), this.dsSelected && h(DsIcon, { key: '790aaa6c644ef1ba0cf6b65e426c5c761a45e689', dsName: "check", class: "option-check", "aria-hidden": "true" })));
     }
     static get watchers() { return {
         "dsActive": ["dsActiveObserver"]
     }; }
     static get style() { return dsOptionCss; }
-}, [6, "ds-option", {
+}, [262, "ds-option", {
+        "dsId": [1, "ds-id"],
         "dsValue": [1, "ds-value"],
         "dsDisabled": [4, "ds-disabled"],
         "dsDescription": [1, "ds-description"],
         "dsActive": [516, "ds-active"],
         "dsSelected": [516, "ds-selected"],
+        "dsHidden": [4, "ds-hidden"],
+        "dsMouseDownPreventDefault": [4, "ds-mouse-down-prevent-default"],
+        "dsFocusOnActiveChange": [4, "ds-focus-on-active-change"],
         "internalTabIndex": [32],
+        "dsGetLabel": [64],
+        "dsGetGroup": [64],
         "dsFocus": [64]
-    }, undefined, {
+    }, [[0, "mousedown", "onMouseDown"], [0, "click", "onClick"]], {
         "dsActive": ["dsActiveObserver"]
     }]);
 declareComponentDependencies([h("ds-icon", null)]);

package/dist/components/ds-options-message.d.ts ADDED Viewed

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

package/dist/components/ds-options-message.js ADDED Viewed

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

package/dist/components/ds-options-message2.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+import { g as getLanguage } from './index.js';
+import { w as weCouldNotLoadOptions, t as tryAgainOrIfTheProblemPersists, l as loadingOptions, n as noResultsFound, b as tryADifferentSearchTerm, c as thereAreOptionsToBrowse } from './controlUtils.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils.js';
+import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$2 } from './ds-spinner2.js';
+import { d as defineCustomElement$1 } from './ds-visually-hidden2.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 = proxyCustomElement(class DsOptionsMessage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get el() { return this; }
+    dsLoading = false;
+    dsError = false;
+    dsNoResults = false;
+    dsErrorTitle = weCouldNotLoadOptions();
+    dsErrorText = tryAgainOrIfTheProblemPersists();
+    dsLoadingText = loadingOptions();
+    dsNoResultsTitle = noResultsFound();
+    dsNoResultsText = tryADifferentSearchTerm();
+    render() {
+        const DsIcon = transformTagName('ds-icon', 'ds-options-message', this.el);
+        const DsSpinner = transformTagName('ds-spinner', 'ds-options-message', this.el);
+        const DsVisuallyHidden = 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 (h("div", { key: 'bc45f7277c4b41c7abf84d84ca96f276bbe4ec5b', role: "status", "aria-live": "polite", "aria-atomic": "true" }, !this.dsLoading && !this.dsError && !this.dsNoResults ? (h(DsVisuallyHidden, null, thereAreOptionsToBrowse())) : (h("div", { class: baseClass }, this.dsError ? (h("div", { class: errorClass }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: `${errorClass}__icon` }), h("div", { class: `${errorClass}__title` }, this.dsErrorTitle), h("div", { class: `${errorClass}__text` }, this.dsErrorText))) : this.dsLoading ? (h("div", { class: loadingClass }, h(DsSpinner, { dsSize: "large" }), h("div", { class: `${loadingClass}__text` }, this.dsLoadingText))) : (h("div", { class: noResultsClass }, h("div", { class: `${noResultsClass}__title`, lang: getLanguage() }, this.dsNoResultsTitle), h("div", { class: `${noResultsClass}__text` }, this.dsNoResultsText)))))));
+    }
+    static get style() { return dsOptionsMessageCss; }
+}, [258, "ds-options-message", {
+        "dsLoading": [4, "ds-loading"],
+        "dsError": [4, "ds-error"],
+        "dsNoResults": [4, "ds-no-results"],
+        "dsErrorTitle": [1, "ds-error-title"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsLoadingText": [1, "ds-loading-text"],
+        "dsNoResultsTitle": [1, "ds-no-results-title"],
+        "dsNoResultsText": [1, "ds-no-results-text"]
+    }]);
+declareComponentDependencies([h("ds-icon", null), h("ds-spinner", null), h("ds-visually-hidden", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-options-message", "ds-icon", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-options-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsOptionsMessage);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { DsOptionsMessage as D, defineCustomElement as d };

package/dist/components/ds-options2.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-spinner2.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
-const dsOptionsCss = ".options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.options-list.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0}.options-list.sc-ds-options:focus{outline:none}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.options-loading.sc-ds-options,.options-error.sc-ds-options{height:18.5rem;align-items:center;justify-content:center}.options-loading--loading-text.sc-ds-options{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}.options-error.sc-ds-options{color:var(--ds-palette-red-70)}.options-error--error-message.sc-ds-options{color:var(--ds-palette-black-95);text-align:center}.options-error--error-title.sc-ds-options{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.options-error--error-text.sc-ds-options{padding-bottom:var(--ds-spacing-small)}.top-scrim.sc-ds-options,.bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.options-list.has-top-scrim.sc-ds-options .top-scrim.sc-ds-options{display:block}.options-list.has-bottom-scrim.sc-ds-options .bottom-scrim.sc-ds-options{display:block}li.sc-ds-options{cursor:pointer}li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
+const dsOptionsCss = ".sc-ds-options:root,.sc-ds-options-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)}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.options-list.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0}.options-list.sc-ds-options:focus{outline:none}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.options-loading.sc-ds-options,.options-error.sc-ds-options{height:18.5rem;align-items:center;justify-content:center}.options-loading--loading-text.sc-ds-options{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}.options-error.sc-ds-options{color:var(--ds-textColor-danger)}.options-error--error-message.sc-ds-options{color:var(--ds-textColor-default);text-align:center}.options-error--error-title.sc-ds-options{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.options-error--error-text.sc-ds-options{padding-bottom:var(--ds-spacing-small)}.top-scrim.sc-ds-options,.bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.options-list.has-top-scrim.sc-ds-options .top-scrim.sc-ds-options{display:block}.options-list.has-bottom-scrim.sc-ds-options .bottom-scrim.sc-ds-options{display:block}li.sc-ds-options{cursor:pointer}li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
 const DsOptions = proxyCustomElement(class DsOptions extends H {
     constructor() {
@@ -16,6 +16,7 @@ const DsOptions = proxyCustomElement(class DsOptions extends H {
     get el() { return this; }
     optionsListRef;
     optionsListInnerRef;
+    dsId;
     dsSelectedValue;
     dsOptions = [];
     dsActiveIndex = 0;
@@ -115,18 +116,19 @@ const DsOptions = proxyCustomElement(class DsOptions extends H {
         }
     };
     dsOptionsError = false;
-    dsOptionsErrorTitle = "We couldn’t load the options";
-    dsOptionsErrorText = "Try again or if the problem persists contact support.";
+    dsOptionsErrorTitle = 'We couldn’t load the options';
+    dsOptionsErrorText = 'Try again or if the problem persists contact support.';
     render() {
         const DsIcon = transformTagName('ds-icon', 'ds-options', this.el);
         const DsSpinner = transformTagName('ds-spinner', 'ds-options', this.el);
-        return (h("div", { key: '656aaa2ab4989958bf7d33914df5f082c91f7477', class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => this.optionsListRef = el, onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, h("slot", { key: '9aaef6b026ca0b5d8c7264ee69457df801fbdc19', name: "groups" }), h("div", { key: '399b0989af2d6cd0eadc10e18b10e2dac2e0f976', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '5eabc020be41e0fb2afcdb5c4e2cb3519212ac00', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h(DsSpinner, { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: 'a3180baebc60c132bd328e10fa77a554642a9d22', class: "bottom-scrim", "aria-hidden": "true" }))));
+        return (h("div", { key: '14cb98aa2c547dff59858bbbc7be8865523e7c7a', id: this.dsId, class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, h("slot", { key: '742bef67faea9b6b97cb20784be1c3116c3bd896', name: "groups" }), h("div", { key: '0b3463b06faac8bf302d065e209789d0cd1f023c', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '9af505259c0cd9f0e4102db26f2d3dd3dfd61a11', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h(DsSpinner, { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: '0587f561552f1634a572ed5a09529cb8fecacb0f', class: "bottom-scrim", "aria-hidden": "true" }))));
     }
     static get watchers() { return {
         "dsActiveIndex": ["onActiveIndexChange"]
     }; }
     static get style() { return dsOptionsCss; }
-}, [6, "ds-options", {
+}, [262, "ds-options", {
+        "dsId": [1, "ds-id"],
         "dsSelectedValue": [1, "ds-selected-value"],
         "dsOptions": [16, "ds-options"],
         "dsActiveIndex": [2, "ds-active-index"],