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

package/dist/components/ds-icon-warning.js

@@ -10,7 +10,7 @@ const DsIconWarning$1 = proxyCustomElement(class DsIconWarning extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '4b41adb90ae559188a33fde374f1186228ac9396', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1cec524b96a67a6147fc6855376718669acd29a0', 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: '56de9e0a0c36b143e0120d5d543adb3828e4642a', d: "m18-107 462-799 462 799H18Zm145-84h634L480-739 163-191Zm321.18-48q13.4 0 23.61-10.39Q518-259.78 518-273.18q0-13.4-10.39-23.11-10.39-9.71-23.79-9.71-13.4 0-23.61 9.89Q450-286.22 450-272.82q0 13.4 10.39 23.61Q470.78-239 484.18-239ZM454-348h60v-216h-60v216Zm26-117Z" }))));
+        return (h(Host, { key: '65140a4ee77b6c23dc75baf2ec08f9940b54c7ec', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b5cfabc723114479a1aa883c968d5bbcf3198adb', 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: 'e5b8542153a43de0fa6c232549d66fb4300f7742', d: "m18-107 462-799 462 799H18Zm145-84h634L480-739 163-191Zm321.18-48q13.4 0 23.61-10.39Q518-259.78 518-273.18q0-13.4-10.39-23.11-10.39-9.71-23.79-9.71-13.4 0-23.61 9.89Q450-286.22 450-272.82q0 13.4 10.39 23.61Q470.78-239 484.18-239ZM454-348h60v-216h-60v216Zm26-117Z" }))));
     }
 }, [0, "ds-icon-warning", {
         "dsSize": [1, "ds-size"],

package/dist/components/ds-icon-widget-small-fill.js

@@ -10,7 +10,7 @@ const DsIconWidgetSmallFill$1 = proxyCustomElement(class DsIconWidgetSmallFill e
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'ecbacd9ddcd692c01bad981a9208ecbc4667374c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7e8f0e776876f85e69d29f1c08b9ac376d5cc536', 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: '4c8909282cdb6851af6353d6dd9a13a2964e77d0', d: "M55-55v-240h240v240H55Zm304 0v-240h242v240H359Zm306 0v-240h241v240H665ZM55-359v-242h240v242H55Zm304 0v-242h242v242H359Zm306 0v-242h241v242H665ZM55-665v-241h240v241H55Zm304 0v-241h242v241H359Zm306 0v-241h241v241H665Z" }))));
+        return (h(Host, { key: 'e05c083cdc3dac7cded57832a5d0fff71e568119', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b325c0eee759e9a2c5eee568a9acf33485860fad', 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: '09c518966b6c0ddf377bc72b3a9b8133f4688f63', d: "M55-55v-240h240v240H55Zm304 0v-240h242v240H359Zm306 0v-240h241v240H665ZM55-359v-242h240v242H55Zm304 0v-242h242v242H359Zm306 0v-242h241v242H665ZM55-665v-241h240v241H55Zm304 0v-241h242v241H359Zm306 0v-241h241v241H665Z" }))));
     }
 }, [0, "ds-icon-widget-small-fill", {
         "dsSize": [1, "ds-size"],

package/dist/components/ds-icon-widget-small.js

@@ -10,7 +10,7 @@ const DsIconWidgetSmall$1 = proxyCustomElement(class DsIconWidgetSmall extends H
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '4788d30cbe57530fedad096ce42f1a137fb18a8a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '33bab707a54f1a493eee463481035bac23573fd9', 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: 'ba2577641cde1d437cfa317eef71631d3f980ace', d: "M55-55v-240h240v240H55Zm304 0v-240h242v240H359Zm306 0v-240h241v240H665ZM55-359v-242h240v242H55Zm304 0v-242h242v242H359Zm306 0v-242h241v242H665ZM55-665v-241h240v241H55Zm304 0v-241h242v241H359Zm306 0v-241h241v241H665ZM213-212Zm229 0h76-76Zm306 0ZM213-443v-74 74Zm267-37Zm268 37v-74 74ZM442-748h76-76Zm306 0ZM137-138h76v-74h-76v74Zm305 0h76v-74h-76v74Zm306 0h75v-74h-75v74ZM137-443h76v-74h-76v74Zm305 0h76v-74h-76v74Zm306 0h75v-74h-75v74ZM442-748h76v-74h-76v74Zm306 0h75v-74h-75v74Z" }))));
+        return (h(Host, { key: 'ac28bf0b1b6c5f873dcb1b68e61463541f940dd2', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f134883d1f69eb879a45630c828471d970f9de39', 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: '09da6733f0713319e216b5b09632a097ddc3b149', d: "M55-55v-240h240v240H55Zm304 0v-240h242v240H359Zm306 0v-240h241v240H665ZM55-359v-242h240v242H55Zm304 0v-242h242v242H359Zm306 0v-242h241v242H665ZM55-665v-241h240v241H55Zm304 0v-241h242v241H359Zm306 0v-241h241v241H665ZM213-212Zm229 0h76-76Zm306 0ZM213-443v-74 74Zm267-37Zm268 37v-74 74ZM442-748h76-76Zm306 0ZM137-138h76v-74h-76v74Zm305 0h76v-74h-76v74Zm306 0h75v-74h-75v74ZM137-443h76v-74h-76v74Zm305 0h76v-74h-76v74Zm306 0h75v-74h-75v74ZM442-748h76v-74h-76v74Zm306 0h75v-74h-75v74Z" }))));
     }
 }, [0, "ds-icon-widget-small", {
         "dsSize": [1, "ds-size"],

package/dist/components/ds-icon-x.js

@@ -10,7 +10,7 @@ const DsIconX$1 = proxyCustomElement(class DsIconX extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '05ac4306b2cd9150c341d529c52a23569629ea2d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '14b111b337532a7688372511c4a95c347c441fb4', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'b31a0ea754bef3f77b5241c5fa2ddf83d09c6342', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.00003 3.00002C3.00001 4.00002 3.00002 4.00002 3.00002 5.00002L3.00002 21C4.5 21 4.00002 21 5.00002 21L21 21C21 20 21 20 21 19L21 3.00003C20 2.99999 20 3.00002 19 3.00002H3.00003ZM16.9092 7.00001H15.2128L12.4175 10.1954L10.0005 7.00001H6.50002L10.6826 12.4692L6.71848 17H8.41591L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7.00001Z" }), h("path", { key: 'f6124bee3093f09f1a01f61a87f6d91be1b92cd3', d: "M14.6175 15.9846H15.5575L9.48976 7.96207H8.48104L14.6175 15.9846Z" }))));
+        return (h(Host, { key: 'ef7622f96567688d7bf4d82e79af40a676758d32', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '22bd171f5ad8388f97b7ae4e547712f73971ac2e', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'bc5eb6a915d47091736213b5181a402ca855e849', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.00003 3.00002C3.00001 4.00002 3.00002 4.00002 3.00002 5.00002L3.00002 21C4.5 21 4.00002 21 5.00002 21L21 21C21 20 21 20 21 19L21 3.00003C20 2.99999 20 3.00002 19 3.00002H3.00003ZM16.9092 7.00001H15.2128L12.4175 10.1954L10.0005 7.00001H6.50002L10.6826 12.4692L6.71848 17H8.41591L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7.00001Z" }), h("path", { key: 'f0b1e2be00f4125e8355d74d4e90d06bc4a97b1f', d: "M14.6175 15.9846H15.5575L9.48976 7.96207H8.48104L14.6175 15.9846Z" }))));
     }
 }, [0, "ds-icon-x", {
         "dsSize": [1, "ds-size"],

package/dist/components/ds-icon-youtube.js

@@ -10,7 +10,7 @@ const DsIconYoutube$1 = proxyCustomElement(class DsIconYoutube extends H {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'f586cb781f9592fae6ee9a0b0dc8815491c96fe4', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'bad3da434182100bad1f1ef3b5cf0ec6fad30c6c', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '7282291d76c53091aa2c4672f7e27d3ec0703cbb', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 3.00002C21 8.3569 21 15.643 21 21.0001C15 20.9806 8.99999 21 3 21V3.00019C8.35684 2.99992 15.6429 3.00002 21 3.00002ZM12.4663 7.00165L11.7079 7.0004C10.7113 7.00644 7.45039 7.04509 6.52908 7.29244C5.92669 7.4538 5.45224 7.92917 5.29122 8.5328C5.06455 9.38044 5.01349 10.9415 5.00199 11.6018V12.2175C5.01349 12.8778 5.06455 14.4389 5.29122 15.2865C5.45224 15.8901 5.92669 16.3457 6.52908 16.5071C7.36319 16.731 10.115 16.7839 11.368 16.7964H12.6307C13.8837 16.7839 16.6355 16.731 17.4696 16.5071C18.072 16.3457 18.5464 15.8901 18.7074 15.2865C18.8713 14.6738 18.9434 13.6884 18.9751 12.9398L18.9995 11.817C18.9958 11.3789 18.9649 9.49561 18.7074 8.5328C18.5464 7.92917 18.072 7.45378 17.4696 7.29244C16.5968 7.05811 13.6241 7.01109 12.4663 7.00165ZM10.5992 9.79955L14.0995 11.8998L10.5992 14V9.79955Z" }))));
+        return (h(Host, { key: '5d2db278f760c473088e17e89680ccdff2812609', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ff1e44836c67f31ea053c4db20d4c70dcc5b84df', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'f1b1b3bd01681aaea37cb92c5be8a5d71266e29a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 3.00002C21 8.3569 21 15.643 21 21.0001C15 20.9806 8.99999 21 3 21V3.00019C8.35684 2.99992 15.6429 3.00002 21 3.00002ZM12.4663 7.00165L11.7079 7.0004C10.7113 7.00644 7.45039 7.04509 6.52908 7.29244C5.92669 7.4538 5.45224 7.92917 5.29122 8.5328C5.06455 9.38044 5.01349 10.9415 5.00199 11.6018V12.2175C5.01349 12.8778 5.06455 14.4389 5.29122 15.2865C5.45224 15.8901 5.92669 16.3457 6.52908 16.5071C7.36319 16.731 10.115 16.7839 11.368 16.7964H12.6307C13.8837 16.7839 16.6355 16.731 17.4696 16.5071C18.072 16.3457 18.5464 15.8901 18.7074 15.2865C18.8713 14.6738 18.9434 13.6884 18.9751 12.9398L18.9995 11.817C18.9958 11.3789 18.9649 9.49561 18.7074 8.5328C18.5464 7.92917 18.072 7.45378 17.4696 7.29244C16.5968 7.05811 13.6241 7.01109 12.4663 7.00165ZM10.5992 9.79955L14.0995 11.8998L10.5992 14V9.79955Z" }))));
     }
 }, [0, "ds-icon-youtube", {
         "dsSize": [1, "ds-size"],

package/dist/components/ds-icon-zoom-in-map.js

@@ -10,7 +10,7 @@ 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", {
         "dsSize": [1, "ds-size"],

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

@@ -10,7 +10,7 @@ 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", {
         "dsSize": [1, "ds-size"],

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

@@ -10,7 +10,7 @@ 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", {
         "dsSize": [1, "ds-size"],

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

@@ -10,7 +10,7 @@ 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", {
         "dsSize": [1, "ds-size"],

package/dist/components/ds-icon2.js

@@ -23,7 +23,7 @@ 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", {

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

@@ -28,7 +28,7 @@ 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", {

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

@@ -61,7 +61,7 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
         });
         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: 'a1e030299a975afd2818e82976dd6166d488b426', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '345fb6f2fdb81c70646076ed5fb93f13f6413e56', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '99b9e3070e11301659ebe39ff6c37925f058c16d', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '9493cfeaf5fcf7136078956653a93320ee050f7a', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '435a437918a676418caca28e3d88afcbcbdd46fc', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && h(DsVisuallyHidden, { key: '102c343c69d543027008bc51d9f17275fb0d263a', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
     }
     static get style() { return dsLinkWithArrowCss; }
 }, [1, "ds-link-with-arrow", {

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

@@ -1,22 +1,38 @@
 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 = ".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-palette-black-03);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"]
@@ -24,8 +40,11 @@ const DsOptionGroup$1 = proxyCustomElement(class DsOptionGroup extends H {
     static get style() { return dsOptionGroupCss; }
 }, [6, "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

@@ -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-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-palette-white);color:var(--ds-palette-black-95)}.ds-option--hidden.sc-ds-option{display:none}.ds-option.sc-ds-option:hover{background-color:var(--ds-palette-black-10)}.ds-option.sc-ds-option:active{background-color:var(--ds-palette-black-20)}.ds-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)}.ds-option--selected.sc-ds-option{background-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-white)}.ds-option--selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-palette-white)}.ds-option--selected.sc-ds-option:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-option--selected.sc-ds-option:active{background-color:var(--ds-palette-mainBlue-90)}.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-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}.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-palette-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", {
+        "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

@@ -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

@@ -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

@@ -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 = ".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-palette-red-70);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-palette-black-95);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-palette-black-95);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; }
+}, [2, "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

@@ -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 = ".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;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-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 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", {
+        "dsId": [1, "ds-id"],
         "dsSelectedValue": [1, "ds-selected-value"],
         "dsOptions": [16, "ds-options"],
         "dsActiveIndex": [2, "ds-active-index"],

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

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 import { c as classNames } from './index3.js';
 import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils.js';
 import { a as inheritAriaAttributes } from './attributes.js';
-import { g as getRequiredText, b as atLeastOneOption } from './controlUtils.js';
+import { g as getRequiredText, d as atLeastOneOption } from './controlUtils.js';
 import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-input-validity2.js';
 

package/dist/components/ds-select.js

@@ -211,7 +211,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends H {
         const activeOption = allOptions[this.activeIndex];
         if (activeOption) {
             activeOption.focus();
-            activeOption.scrollIntoView({ block: 'nearest' });
+            activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
         }
     }
     getAllOptions() {
@@ -305,7 +305,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends H {
             } }, h(DsOptions, { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, h("slot", null)))), !!this.dsErrorText && (h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     render() {
-        return (h("div", { key: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+        return (h("div", { key: '9e3e4a236e65ad5002e3bcd3c86b4be35664f5d6', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
             ? this.renderNativeSelect()
             : this.renderCustomSelect()));
     }

package/dist/components/ds-spinner2.js

@@ -53,11 +53,11 @@ const DsSpinner = proxyCustomElement(class DsSpinner extends H {
         const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = (index) => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (h("div", { key: '41ac2e9d4a4d47ba260cf0573c625c4cc3285772', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: '717b10fb2a73640df5c104205af85f119129ad99', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '8f275e0bdbdd5ace7ad4c9cf3c7ce367ba5882ee', class: "ds-spinner__spinner" }, h("div", { key: '2ae06bbf92492d0f6c63054c360257da685a2310', class: segmentClasses(1) }), h("div", { key: 'c5a12fd927eee963657c2a82d91ecfa81eb88a2d', class: segmentClasses(2) }), h("div", { key: '80c36207963e53a3ca4041d993e60854f74dccae', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'aea851246b5b233128c94b4dc49eee409d19cc15' }, h("span", { key: '6ffda5a7cc47eb4842dc8cf945ae7a2dbb4f49c7' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '020b3ccab3864a19ce3939661183731ae4db1d08', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: '0ef5e3de363770fc1b15b4c20b78246f4c11eb03', class: "ds-spinner__spinner" }, h("div", { key: '65f925540b6fd8c0214d6392e3c6fe8751fc7de4', class: segmentClasses(1) }), h("div", { key: '1e062bc0fc9e78b9cd6d2413a61428d710f621b7', class: segmentClasses(2) }), h("div", { key: '520be4f4915f2c455ba58c009f12853b651f2f1b', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'b26675a2f64cc5833cbeeed1f7874b833352fa9f' }, h("span", { key: 'aedee4d1d142804207bb0764d212c0c7a9075a56' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '681c87db1c71a74461e68ba6702f3e766a7c4674', class: textClasses }, this.dsText)));
     }
     static get style() { return dsSpinnerCss; }
 }, [1, "ds-spinner", {

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 
-const dsTagGroupCss = ".ds-tag-group__label{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-tag-group__tags{display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
+const dsTagGroupCss = ".ds-tag-group__label{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-95)}.ds-tag-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-tag-group__tags{display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
 
 const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
     constructor() {
@@ -14,7 +14,7 @@ const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
     render() {
         const assistiveTextId = this.dsAssistiveText ? 'ds-tag-group-assistive-text' : undefined;
         const ariaDescribedBy = assistiveTextId ? assistiveTextId : undefined;
-        return (h("div", { key: '5e132f0aa006d74722358f2ac3b0b74c4116ea9a', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '2fe72fffe735931ff5472162cac5b3babda6b957' }, this.dsLabel && (h("div", { key: '5388aa1fb591062e25c51f03390af5f34a9e81e9', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'd63eb8fc20ef2e361890a45709d2a7e54c4f9a02', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '35f882de376802e7048f4ea6b06291288d233c64', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
+        return (h("div", { key: '8dd881ca483b1141dc2805d1c366cf113e319983', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '8ade266da86fd06e2fec19e68dad547bffae769a' }, this.dsLabel && (h("div", { key: '4c3867f4c1ee11ee8afd2c94c07303212477e432', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'eb2cee2d745da0cc0782e7d7958973419eec8b45', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '2fd183e8bd7a02310d7b178513b7f5ceb39da676', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
     }
     static get style() { return dsTagGroupCss; }
 }, [1, "ds-tag-group", {

package/dist/components/ds-tag.js

@@ -26,7 +26,7 @@ const DsTag$1 = proxyCustomElement(class DsTag extends H {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
-        return (h("div", { key: '40d1e7607357b556097b27c6aad58a1b2e5af0fb', class: classes }, h("slot", { key: '416e038155b38f758d5f31994ee45e619facff1b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'a276c53fd88b357f40a6a0227d79576318c0b708' }, this.dsHref ? (h(DsLink, { class: "ds-tag__link", dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: 'e0ec39cd2378889d15b4a22e62742e730ce33a21', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '5d8a76a14859706d464cd1adeb9ab5c582fa96f0', class: classes }, h("slot", { key: '362817b32966797fca889c46db2df2ab9fa30c97', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '1e85dfbd43e344798f6e839a690183f6a5f65f38' }, this.dsHref ? (h(DsLink, { class: "ds-tag__link", dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: '082057267859654374533f420dc774cbf9d4cdb1', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get style() { return dsTagCss; }
 }, [4, "ds-tag", {

package/dist/components/ds-visually-hidden2.js

@@ -10,7 +10,7 @@ const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
     }
     dsTag = 'div';
     render() {
-        return (h(this.dsTag, { key: '4294edab8fcf553ad50c2e0f268df30e9338382f', class: "ds-visually-hidden" }, h("slot", { key: '33181a1b5924f4e58b71a1795ebcc42e72b66971' })));
+        return (h(this.dsTag, { key: '12110ddea5e3ca5632d213e91c86adff4f9b279f', class: "ds-visually-hidden" }, h("slot", { key: '6e1f3a1cc4327d4b0b67b1104926e51ed21d505e' })));
     }
     static get style() { return dsVisuallyHiddenCss; }
 }, [1, "ds-visually-hidden", {