@uh-design-system/component-library 1.5.2 → 1.6.0-rc.1

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination.js

@@ -2,7 +2,7 @@ import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { cx } from "../../../utils/cx";
 import { ellipsis } from "../../../utils/controls/controlUtils";
-import { pagination, firstPage, lastPage, previousPage, nextPage, goToFirstPage, goToLastPage, goToPreviousPage, goToNextPage, currentPage, } from "../../../utils/pagination/paginationUtils";
+import { pagination, firstPage, lastPage, previousPage, nextPage, goToFirstPage, goToLastPage, goToPreviousPage, goToNextPage, currentPage, pageNumber, } from "../../../utils/pagination/paginationUtils";
 import { providePaginationContextToSlots, storePaginationContext } from "./paginationContext";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
 export class DsPagination extends Mixin(componentFactory('ds-pagination', { stopRootTracking: true })) {
@@ -14,6 +14,7 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
     dsTotalPages = 1;
     dsLayout = 'auto';
     dsVariant = 'medium';
+    dsColour = 'blue';
     dsAriaLabel;
     get texts() {
         return {
@@ -27,9 +28,10 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
             goToNextPage: goToNextPage(),
             currentPage: currentPage(),
             ellipsis: ellipsis(),
+            pageNumber: (page) => pageNumber(page),
         };
     }
-    langObserver() {
+    configurationPropertyObserver() {
         this.updateContext();
     }
     dsCurrentPageObserver(newValue) {
@@ -69,6 +71,7 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
             currentPage: this.dsCurrentPage,
             totalPages: this.dsTotalPages,
             variant: this.dsVariant,
+            colour: this.dsColour,
             layout: this.dsLayout,
             isCompact: false,
             texts: this.texts,
@@ -76,13 +79,13 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
     }
     render() {
         const baseClass = cx('ds-pagination');
-        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`);
+        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`, `${baseClass}--${this.dsColour}`);
         const fontSize = this.dsVariant === 'small' ? 'var(--ds-fontSize-16)' : 'var(--ds-fontSize-18)';
         const minSize = this.dsVariant === 'small' ? 'var(--ds-spacing-large)' : 'calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))';
-        return (h("nav", { key: '37a0983233833510e18500c528483bf1bc01a3c1', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
+        return (h("nav", { key: 'ef22ab4865a3139b74d2d3e0e64c2d953dd723e5', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, h("div", { key: 'd61235ad8e8c3f1886e5cf4a555e6cbaf80a7dab', class: `${baseClass}__compact` }, h("slot", { key: 'a478f9bbdeb51e59af0a11b8dc24a90ad77b2400', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'dcf0e3b5ab81d3eec7f9ac614fe291901ff4f4cd', class: `${baseClass}__full` }, h("slot", { key: 'd4c69cbb062be42ed2af3b52764192348b332baa', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, h("div", { key: 'f6a5be74c7b21c633edb69cb340f1f8f6aa88a73', class: `${baseClass}__compact` }, h("slot", { key: '143093d797e6d97e3ad37ede26b53d819f3d6004', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: '7d4fb67fb8f5a1b56ee6de1cf70f190989793191', class: `${baseClass}__full` }, h("slot", { key: 'b934f23fe9506be0a929ed50ae5d0571cfe9676e', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get is() { return "ds-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -178,6 +181,26 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
                 "attribute": "ds-variant",
                 "defaultValue": "'medium'"
             },
+            "dsColour": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'blue' | 'black' | 'white'",
+                    "resolved": "\"black\" | \"blue\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour of the pagination. Inherited by child components."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-colour",
+                "defaultValue": "'blue'"
+            },
             "dsAriaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -203,7 +226,13 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
     static get watchers() {
         return [{
                 "propName": "lang",
-                "methodName": "langObserver"
+                "methodName": "configurationPropertyObserver"
+            }, {
+                "propName": "dsColour",
+                "methodName": "configurationPropertyObserver"
+            }, {
+                "propName": "dsVariant",
+                "methodName": "configurationPropertyObserver"
             }, {
                 "propName": "dsCurrentPage",
                 "methodName": "dsCurrentPageObserver"

package/dist/collection/components/01-base-components/ds-pagination/paginationContext.js

@@ -5,7 +5,8 @@ function getChildSelector(parentElement) {
     const itemTag = transformTagName('ds-pagination-item', 'ds-pagination', parentElement);
     const pageTag = transformTagName('ds-pagination-page', 'ds-pagination', parentElement);
     const ellipsisTag = transformTagName('ds-pagination-ellipsis', 'ds-pagination', parentElement);
-    return [itemTag, pageTag, ellipsisTag].join(', ');
+    const pageInfoTag = transformTagName('ds-pagination-page-info', 'ds-pagination', parentElement);
+    return [itemTag, pageTag, ellipsisTag, pageInfoTag].join(', ');
 }
 function dispatchContextUpdate(element, context, isCompact) {
     element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {
@@ -20,10 +21,10 @@ export function providePaginationContext(element, context) {
     element[CONTEXT_KEY] = context;
     const childSelector = getChildSelector(element);
     const children = element.querySelectorAll(childSelector);
-    children.forEach(child => {
+    for (const child of children) {
         const isCompact = child.getAttribute('slot') === 'compact';
         dispatchContextUpdate(child, context, isCompact);
-    });
+    }
 }
 export function providePaginationContextToSlots(element, context) {
     element[CONTEXT_KEY] = context;
@@ -34,26 +35,26 @@ export function providePaginationContextToSlots(element, context) {
     const compactSlot = shadowRoot.querySelector('slot[name="compact"]');
     if (compactSlot) {
         const compactElements = compactSlot.assignedElements({ flatten: true });
-        compactElements.forEach(el => {
+        for (const el of compactElements) {
             if (el.matches(childSelector)) {
                 dispatchContextUpdate(el, context, true);
             }
-            el.querySelectorAll(childSelector).forEach(child => {
+            for (const child of el.querySelectorAll(childSelector)) {
                 dispatchContextUpdate(child, context, true);
-            });
-        });
+            }
+        }
     }
     const fullSlot = shadowRoot.querySelector('slot[name="full"]');
     if (fullSlot) {
         const fullElements = fullSlot.assignedElements({ flatten: true });
-        fullElements.forEach(el => {
+        for (const el of fullElements) {
             if (el.matches(childSelector)) {
                 dispatchContextUpdate(el, context, false);
             }
-            el.querySelectorAll(childSelector).forEach(child => {
+            for (const child of el.querySelectorAll(childSelector)) {
                 dispatchContextUpdate(child, context, false);
-            });
-        });
+            }
+        }
     }
 }
 export function consumePaginationContext(element) {

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.css

@@ -1,23 +1,23 @@
-.ds-radio-button__MsKlb0 {
+.ds-radio-button__izAhxK {
   box-sizing: border-box;
   display: inline-flex;
   color: var(--ds-textColor-default);
 }
-.ds-radio-button__MsKlb0--disabled {
+.ds-radio-button__izAhxK--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-radio-button__MsKlb0:has(input:focus-visible) .ds-radio-button__MsKlb0__icon {
+.ds-radio-button__izAhxK:has(input:focus-visible) .ds-radio-button__izAhxK__icon {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 0.5);
 }
-.ds-radio-button__MsKlb0__icon {
+.ds-radio-button__izAhxK__icon {
   border-radius: 50%;
   height: 24px;
   width: 24px;
   margin: 10px 10px 10px 0;
 }
-.ds-radio-button__MsKlb0__text {
+.ds-radio-button__izAhxK__text {
   margin-top: 10px;
   padding-right: var(--ds-spacing-2xSmall);
   font-family: var(--ds-fontFamily-body);
@@ -26,99 +26,99 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-primary);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary);
 }
-.ds-radio-button__MsKlb0:hover:not(.ds-radio-button__MsKlb0--disabled):not(.ds-radio-button__MsKlb0--invalid) .ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK:hover:not(.ds-radio-button__izAhxK--disabled):not(.ds-radio-button__izAhxK--invalid) .ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white-hover);
 }
-.ds-radio-button__MsKlb0:hover:not(.ds-radio-button__MsKlb0--disabled):not(.ds-radio-button__MsKlb0--invalid) .ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK:hover:not(.ds-radio-button__izAhxK--disabled):not(.ds-radio-button__izAhxK--invalid) .ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-80);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__MsKlb0:hover:not(.ds-radio-button__MsKlb0--disabled):not(.ds-radio-button__MsKlb0--invalid) .ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK:hover:not(.ds-radio-button__izAhxK--disabled):not(.ds-radio-button__izAhxK--invalid) .ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary-hover);
 }
-.ds-radio-button__MsKlb0:active:not(.ds-radio-button__MsKlb0--disabled):not(.ds-radio-button__MsKlb0--invalid) .ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK:active:not(.ds-radio-button__izAhxK--disabled):not(.ds-radio-button__izAhxK--invalid) .ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white-active);
 }
-.ds-radio-button__MsKlb0:active:not(.ds-radio-button__MsKlb0--disabled):not(.ds-radio-button__MsKlb0--invalid) .ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK:active:not(.ds-radio-button__izAhxK--disabled):not(.ds-radio-button__izAhxK--invalid) .ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-90);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__MsKlb0:active:not(.ds-radio-button__MsKlb0--disabled):not(.ds-radio-button__MsKlb0--invalid) .ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK:active:not(.ds-radio-button__izAhxK--disabled):not(.ds-radio-button__izAhxK--invalid) .ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary-active);
 }
-.ds-radio-button__MsKlb0--disabled .ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK--disabled .ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-disabled-onLight);
   fill: var(--ds-bgColor-disabled-onLight);
 }
-.ds-radio-button__MsKlb0--disabled .ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK--disabled .ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-disabled-onLight);
   fill: var(--ds-bgColor-disabled-onLight);
 }
-.ds-radio-button__MsKlb0--disabled .ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK--disabled .ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-radio-button__MsKlb0--invalid .ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK--invalid .ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger);
 }
-.ds-radio-button__MsKlb0--invalid .ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK--invalid .ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger);
 }
-.ds-radio-button__MsKlb0--invalid .ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK--invalid .ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
-.ds-radio-button__MsKlb0--invalid:hover:not(.ds-radio-button__MsKlb0--disabled) .ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK--invalid:hover:not(.ds-radio-button__izAhxK--disabled) .ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-hover);
 }
-.ds-radio-button__MsKlb0--invalid:hover:not(.ds-radio-button__MsKlb0--disabled) .ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK--invalid:hover:not(.ds-radio-button__izAhxK--disabled) .ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-hover);
 }
-.ds-radio-button__MsKlb0--invalid:hover:not(.ds-radio-button__MsKlb0--disabled) .ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK--invalid:hover:not(.ds-radio-button__izAhxK--disabled) .ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
-.ds-radio-button__MsKlb0--invalid:active:not(.ds-radio-button__MsKlb0--disabled) .ds-radio-button__MsKlb0__icon__outer-circle {
+.ds-radio-button__izAhxK--invalid:active:not(.ds-radio-button__izAhxK--disabled) .ds-radio-button__izAhxK__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-active);
 }
-.ds-radio-button__MsKlb0--invalid:active:not(.ds-radio-button__MsKlb0--disabled) .ds-radio-button__MsKlb0__icon__outer-circle--checked {
+.ds-radio-button__izAhxK--invalid:active:not(.ds-radio-button__izAhxK--disabled) .ds-radio-button__izAhxK__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-active);
 }
-.ds-radio-button__MsKlb0--invalid:active:not(.ds-radio-button__MsKlb0--disabled) .ds-radio-button__MsKlb0__icon__inner-circle {
+.ds-radio-button__izAhxK--invalid:active:not(.ds-radio-button__izAhxK--disabled) .ds-radio-button__izAhxK__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
 
-.ds-radio-button__MsKlb0-fieldset {
+.ds-radio-button__izAhxK-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
   margin: 0;
   padding: 0;
 }
-.ds-radio-button__MsKlb0-fieldset__legend {
+.ds-radio-button__izAhxK-fieldset__legend {
   padding-inline: 0;
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
@@ -128,7 +128,7 @@
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-radio-button__MsKlb0-fieldset__assistive-text {
+.ds-radio-button__izAhxK-fieldset__assistive-text {
   display: inline;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js

@@ -521,7 +521,7 @@ export class DsRadioButton extends Mixin(componentFactory('ds-radio-button'), ar
         return [{
                 "method": "dsChange",
                 "name": "dsChange",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
@@ -534,7 +534,7 @@ export class DsRadioButton extends Mixin(componentFactory('ds-radio-button'), ar
                     "references": {
                         "DsRadioButtonChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
                             "id": "src/components/01-base-components/ds-radio-button/ds-radio-button.tsx::DsRadioButtonChangeEvent"
                         }
                     }
@@ -555,7 +555,7 @@ export class DsRadioButton extends Mixin(componentFactory('ds-radio-button'), ar
                     "references": {
                         "DsRadioButtonCheckEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
                             "id": "src/components/01-base-components/ds-radio-button/ds-radio-button.tsx::DsRadioButtonCheckEvent"
                         }
                     }
@@ -576,7 +576,7 @@ export class DsRadioButton extends Mixin(componentFactory('ds-radio-button'), ar
                     "references": {
                         "DsRadioButtonFocusEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
                             "id": "src/components/01-base-components/ds-radio-button/ds-radio-button.tsx::DsRadioButtonFocusEvent"
                         }
                     }
@@ -597,7 +597,7 @@ export class DsRadioButton extends Mixin(componentFactory('ds-radio-button'), ar
                     "references": {
                         "DsRadioButtonBlurEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
                             "id": "src/components/01-base-components/ds-radio-button/ds-radio-button.tsx::DsRadioButtonBlurEvent"
                         }
                     }

package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-radio-button-group__MsKlb0 {
+.ds-radio-button-group__izAhxK {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -16,15 +16,15 @@
   padding: 0;
   margin: 0;
 }
-.ds-radio-button-group__MsKlb0__radio-buttons-slot {
+.ds-radio-button-group__izAhxK__radio-buttons-slot {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-radio-button-group__MsKlb0__radio-buttons-slot--horizontal {
+.ds-radio-button-group__izAhxK__radio-buttons-slot--horizontal {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }
-.ds-radio-button-group__MsKlb0__legend {
+.ds-radio-button-group__izAhxK__legend {
   padding-inline: 0;
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
@@ -34,7 +34,7 @@
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-radio-button-group__MsKlb0__assistive-text {
+.ds-radio-button-group__izAhxK__assistive-text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);

package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.js

@@ -81,7 +81,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
     formResetCallback() {
         this.dsErrorText = '';
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input') ?? undefined);
         }
         else {
             this.internals?.setValidity({});
@@ -148,7 +148,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
         });
         this.syncErrorAriaDescribedby();
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input') ?? undefined);
         }
     }
     async getValue() {
@@ -166,7 +166,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
             this.dsChange.emit({ value });
         }
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input') ?? undefined);
         }
         if (this.wasInvalidOnBlur) {
             this.dsValidity.emit({
@@ -217,7 +217,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
             return;
         }
         e.preventDefault();
-        const currentIndex = radios.findIndex(r => r === targetRadio);
+        const currentIndex = radios.indexOf(targetRadio);
         let nextIndex = currentIndex;
         if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
             nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
@@ -240,7 +240,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
         });
         const errorClasses = classNames(`${baseClass}__error`);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
-        return (h(Host, { key: '492bdd624d08b1a3f74ed610296b0a8401f8479b', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'dc95e240361d7e3539588660fe87d34053fee1e6', id: this.fieldsetId, class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: '5deb758f5a4e5adb4a2a50f357c5759e51ece66a', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: 'b384fbf9b8591844f01b4df44066f1de199a2d79', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: '226a55d6f44e882e7a0bdf61b10fdc572a1518c1', class: radioButtonsSlotClasses }, h("slot", { key: '5de33b42d3ec92dfe1d43d43e952a679a4a4df4d' })), h("div", { key: '9cfe8b0934aebfb930883987c06e978b3650306c', class: errorClasses }, h(DsInputValidity, { key: '2434f28ca9d1c80bc6d489c719f03131869e0f7e', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
+        return (h(Host, { key: '0733c0a9c04691a265410376a1211fbbd34b1f81', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'f4714673d79620236ce854f700dc88a7d78bf3e1', id: this.fieldsetId, class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: '9c54939eca8a9b70335b741c9085813e4ea72275', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: 'a89970ed23e91b01f2752dbb829192e5630270f5', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: 'bad700b57c7c02dfce4470f47164c1ade6e17b73', class: radioButtonsSlotClasses }, h("slot", { key: 'a6113f4ca3c4cf6897e42d9050f24b173280c931' })), h("div", { key: '286d6eed005c1b00b19f3f54c5759a43cbcda50c', class: errorClasses }, h(DsInputValidity, { key: '58d55556cd4dcec58ab38b0adeff379a1d6861ca', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
     }
     static get is() { return "ds-radio-button-group"; }
     static get encapsulation() { return "scoped"; }
@@ -437,7 +437,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
                     "references": {
                         "DsRadioButtonGroupValueChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
                             "id": "src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx::DsRadioButtonGroupValueChangeEvent"
                         }
                     }
@@ -458,7 +458,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
                     "references": {
                         "DsRadioButtonGroupInvalidStateChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
                             "id": "src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx::DsRadioButtonGroupInvalidStateChangeEvent"
                         }
                     }
@@ -479,7 +479,7 @@ export class DsRadioButtonGroup extends Mixin(componentFactory('ds-radio-button-
                     "references": {
                         "DsRadioButtonGroupChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
                             "id": "src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx::DsRadioButtonGroupChangeEvent"
                         }
                     }