@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/popup/test/popup.a11y.play.js

@@ -0,0 +1,50 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('closed popup', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-button id="trigger">Open</ds-button>
+    <ds-popup id="popup" label="Popup">
+      <p>Popup content.</p>
+    </ds-popup>
+    <script>
+      window.addEventListener('DOMContentLoaded', () => {
+        const popup = document.getElementById('popup')
+        const trigger = document.getElementById('trigger')
+        popup.trigger = trigger
+      })
+    </script>
+  `);
+    await a11y('ds-popup');
+});
+test('open popup', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-button id="trigger">Open</ds-button>
+    <ds-popup id="popup" label="Popup">
+      <p>Popup content.</p>
+    </ds-popup>
+  `);
+    await page.evaluate(() => document.getElementById('popup').present());
+    await a11y('ds-popup');
+});
+test('open popup closable', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-button id="trigger">Open</ds-button>
+    <ds-popup id="popup" label="Popup" closable>
+      <p>Popup content.</p>
+    </ds-popup>
+  `);
+    await page.evaluate(() => document.getElementById('popup').present());
+    await a11y('ds-popup');
+});
+test('open popup with backdrop', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-button id="trigger">Open</ds-button>
+    <ds-popup id="popup" label="Popup" backdrop backdrop-dismiss>
+      <p>Popup content.</p>
+    </ds-popup>
+  `);
+    await page.evaluate(() => document.getElementById('popup').present());
+    await a11y('ds-popup');
+});

package/dist/collection/components/popup/test/popup.component.play.js

@@ -0,0 +1,168 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsPopup, expect, test } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('should render ds-popup closed by default', async ({ page }) => {
+        await page.mount(`
+      <ds-button id="trigger">Open</ds-button>
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await dsPopup.assertToBeClosed();
+    });
+    test('should open popup on present()', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await dsPopup.assertToBeClosed();
+        await page.evaluate(() => document.getElementById('popup').present());
+        await dsPopup.assertToBeOpen();
+    });
+    test('should close popup on dismiss()', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup').present());
+        await dsPopup.assertToBeOpen();
+        await page.evaluate(() => document.getElementById('popup').dismiss());
+        await dsPopup.assertToBeClosed();
+    });
+    test('should toggle popup on toggle()', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup').toggle());
+        await dsPopup.assertToBeOpen();
+        await page.evaluate(() => document.getElementById('popup').toggle());
+        await dsPopup.assertToBeClosed();
+    });
+    test('should emit dsWillPresent and dsDidPresent on open', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        const willPresent = await dsPopup.el.spyOnEvent('dsWillPresent');
+        const didPresent = await dsPopup.el.spyOnEvent('dsDidPresent');
+        await page.evaluate(() => document.getElementById('popup').present());
+        expect(willPresent).toHaveReceivedEventTimes(1);
+        expect(didPresent).toHaveReceivedEventTimes(1);
+    });
+    test('should emit dsWillDismiss and dsDidDismiss on close', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup').present());
+        const willDismiss = await dsPopup.el.spyOnEvent('dsWillDismiss');
+        const didDismiss = await dsPopup.el.spyOnEvent('dsDidDismiss');
+        await page.evaluate(() => document.getElementById('popup').dismiss());
+        expect(willDismiss).toHaveReceivedEventTimes(1);
+        expect(didDismiss).toHaveReceivedEventTimes(1);
+    });
+    test('should render close button when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup" closable>
+        <p>Content</p>
+      </ds-popup>
+    `);
+        await page.evaluate(() => document.getElementById('popup').present());
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await expect(dsPopup.close.el).toBeAttached();
+    });
+    test('should not render close button when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        await page.evaluate(() => document.getElementById('popup').present());
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await expect(dsPopup.close.el).not.toBeAttached();
+    });
+    test('should close on close button click when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup" closable>
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup').present());
+        await dsPopup.assertToBeOpen();
+        await dsPopup.close.click();
+        await dsPopup.assertToBeClosed();
+    });
+    test('should close on Escape key when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-popup id="popup" label="Popup" closable>
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup').present());
+        await dsPopup.assertToBeOpen();
+        await page.keyboard.press('Escape');
+        await dsPopup.assertToBeClosed();
+    });
+    test('should open via declarative data-popup trigger', async ({ page }) => {
+        await page.mount(`
+      <ds-button data-popup="popup-declarative">Open</ds-button>
+      <ds-popup id="popup-declarative" label="Declarative Popup">
+        <p>Content</p>
+      </ds-popup>
+    `);
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.getByRole('button', { name: 'Open' }).click();
+        await dsPopup.assertToBeOpen();
+    });
+    test('should set trigger via programmatic API', async ({ page }) => {
+        await page.mount(`
+      <ds-button id="prog-trigger">Open</ds-button>
+      <ds-popup id="popup-prog" label="Programmatic Popup" backdrop-dismiss>
+        <p>Content</p>
+      </ds-popup>
+    `);
+        await page.evaluate(() => {
+            const popup = document.getElementById('popup-prog');
+            popup.trigger = document.getElementById('prog-trigger');
+        });
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup-prog').present());
+        await dsPopup.assertToBeOpen();
+        // Click outside should dismiss
+        await page.mouse.click(128, 128);
+        await dsPopup.assertToBeClosed();
+    });
+    test('should not close on trigger click when backdrop-dismiss and trigger set', async ({ page }) => {
+        await page.mount(`
+      <ds-button id="trigger-bd">Open</ds-button>
+      <ds-popup id="popup-bd" label="Popup" backdrop-dismiss>
+        <p>Content</p>
+      </ds-popup>
+    `);
+        await page.evaluate(() => {
+            const popup = document.getElementById('popup-bd');
+            popup.trigger = document.getElementById('trigger-bd');
+        });
+        const dsPopup = new DsPopup(page.locator('ds-popup'));
+        await page.evaluate(() => document.getElementById('popup-bd').present());
+        await dsPopup.assertToBeOpen();
+        await page.getByRole('button', { name: 'Open' }).click();
+        await dsPopup.assertToBeOpen();
+    });
+});

package/dist/collection/components/popup/test/popup.visual.play.js

@@ -0,0 +1,33 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsPopup, expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'popup';
+const VARIANTS = [
+    { testId: 'basic', popupId: 'popup-basic' },
+    { testId: 'placement-top', popupId: 'popup-top' },
+    { testId: 'placement-right', popupId: 'popup-right' },
+    { testId: 'placement-left', popupId: 'popup-left' },
+    { testId: 'backdrop-overlay', popupId: 'popup-overlay' },
+    { testId: 'focus-trap', popupId: 'popup-focus' },
+];
+const image = screenshot(TAG);
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS.forEach(({ testId, popupId }) => {
+        test(testId, async ({ page }) => {
+            const section = page.getByTestId(testId);
+            await section.getByRole('button').first().click();
+            const popup = new DsPopup(page.locator(`ds-popup#${popupId}`));
+            await popup.assertToBeOpen();
+            await expectScreenshot(page.locator('body'), image(testId));
+            await page.evaluate((id) => {
+                const el = document.getElementById(id);
+                return el === null || el === void 0 ? void 0 : el.dismiss();
+            }, popupId);
+            await popup.assertToBeClosed();
+        });
+    });
+});

package/dist/collection/components/progress-bar/progress-bar.host.css

@@ -1 +1 @@
-:host{--_progress-bar-height: var(--progress-bar-height, var(--mod-progress-bar-height, var(--ds-progress-bar-height)));--_progress-bar-radius: var(--progress-bar-radius, var(--mod-progress-bar-radius, var(--ds-progress-bar-line-radius)));--_progress-bar-background: var(--progress-bar-background, var(--mod-progress-bar-background, var(--ds-progress-bar-background-dark)));--_progress-bar-line-color: var(--progress-bar-line-color, var(--mod-progress-bar-line-color, var(--ds-progress-bar-line-color-primary)))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block;width:100%;min-width:0;height:var(--_progress-bar-height);background:var(--_progress-bar-background)}:host #line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block;height:var(--_progress-bar-height);width:0;background:var(--_progress-bar-line-color);border-top-right-radius:var(--_progress-bar-radius);border-bottom-right-radius:var(--_progress-bar-radius)}:host #line.is-animated{will-change:width;transition:all 300ms ease-in-out}:host #line.is-full{border-top-right-radius:0;border-bottom-right-radius:0}:host(.is-light){--mod-progress-bar-background: var(--ds-progress-bar-background-light)}:host(.is-primary){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-primary)}:host(.is-primary.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-dark)}:host(.is-purple){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-purple)}:host(.is-purple.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-purple)}:host(.is-yellow){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-yellow)}:host(.is-yellow.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-yellow)}:host(.is-red){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-red)}:host(.is-red.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-red)}:host(.is-green){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-green)}:host(.is-green.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-green)}
+:host{--_progress-bar-height: var(--progress-bar-height, var(--mod-progress-bar-height, var(--ds-progress-bar-height, 4px)));--_progress-bar-radius: var(--progress-bar-radius, var(--mod-progress-bar-radius, var(--ds-progress-bar-line-radius)));--_progress-bar-background: var(--progress-bar-background, var(--mod-progress-bar-background, var(--ds-progress-bar-background-dark)));--_progress-bar-line-color: var(--progress-bar-line-color, var(--mod-progress-bar-line-color, var(--ds-progress-bar-line-color-primary)))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block;width:100%;min-width:0;height:var(--_progress-bar-height);background:var(--_progress-bar-background)}:host #line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block;height:var(--_progress-bar-height);width:0;background:var(--_progress-bar-line-color);border-top-right-radius:var(--_progress-bar-radius);border-bottom-right-radius:var(--_progress-bar-radius)}:host #line.is-animated{will-change:width;transition:all 300ms ease-in-out}:host #line.is-full{border-top-right-radius:0;border-bottom-right-radius:0}:host(.is-light){--mod-progress-bar-background: var(--ds-progress-bar-background-light)}:host(.is-primary){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-primary)}:host(.is-primary.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-dark)}:host(.is-purple){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-purple)}:host(.is-purple.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-purple)}:host(.is-yellow){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-yellow)}:host(.is-yellow.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-yellow)}:host(.is-red){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-red)}:host(.is-red.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-red)}:host(.is-green){--mod-progress-bar-line-color: var(--ds-progress-bar-line-color-green)}:host(.is-green.is-dark){--mod-progress-bar-background: var(--ds-progress-bar-background-green)}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { Host, h } from "@stencil/core";
-import { Logger, ListenToBreakpoints, raf, ListenToWindowResize, initialBreakpoints, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, ListenToBreakpoints, raf, ListenToWindowResize, initialBreakpoints, hasValue, OneOf, Type, } from "../../utils/index";
 import { ListenToConfig, defaultConfig, } from "../../global/index";
 import { i18nDsProgressBar } from "./progress-bar.i18n";
 import { PROGRESS_BAR_BACKGROUNDS, PROGRESS_BAR_COLORS, } from "./progress-bar.interfaces";
@@ -38,13 +38,6 @@ export class ProgressBar {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     componentDidRender() {
         this.updateProgress();
     }
@@ -92,15 +85,15 @@ export class ProgressBar {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '3a3a5ca051766fb90b5da4421eac744d91908314', role: "progressbar", "aria-label": `${i18nDsProgressBar[this.language].progress}: ${this.value}%`, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
-                'is-light': this.background === 'light',
-                'is-dark': this.background === 'dark',
-                'is-primary': this.color === 'primary',
-                'is-purple': this.color === 'purple',
-                'is-yellow': this.color === 'yellow',
-                'is-red': this.color === 'red',
-                'is-green': this.color === 'green',
-            } }, h("div", { key: '742d598fcf33bdf697c546c47c7d89c36d2b09e9', id: "line", part: "line", class: {
+        return (h(Host, { key: 'a62c9348298ce8a4d17ada8d666433060930c5dd', role: "progressbar", "aria-label": `${i18nDsProgressBar[this.language].progress}: ${this.value}%`, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
+                'is-light': hasValue(this.background) && this.background === 'light',
+                'is-dark': !hasValue(this.background) || this.background === 'dark',
+                'is-primary': !hasValue(this.color) || this.color === 'primary',
+                'is-purple': hasValue(this.color) && this.color === 'purple',
+                'is-yellow': hasValue(this.color) && this.color === 'yellow',
+                'is-red': hasValue(this.color) && this.color === 'red',
+                'is-green': hasValue(this.color) && this.color === 'green',
+            } }, h("div", { key: '7bfac5f71dd4ff19597606a588477658d0cff944', id: "line", part: "line", class: {
                 'is-animated': this.animated,
             }, ref: lineEl => (this.lineEl = lineEl) })));
     }
@@ -242,15 +235,15 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], ProgressBar.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...PROGRESS_BAR_BACKGROUNDS),
+    OneOf(PROGRESS_BAR_BACKGROUNDS),
     __metadata("design:type", String)
 ], ProgressBar.prototype, "background", void 0);
 __decorate([
-    ValidateOneOf(...PROGRESS_BAR_COLORS),
+    OneOf(PROGRESS_BAR_COLORS),
     __metadata("design:type", String)
 ], ProgressBar.prototype, "color", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], ProgressBar.prototype, "value", void 0);
 __decorate([

package/dist/collection/components/radio/radio-group/radio-group.host.css

@@ -1 +1 @@
-:host{--_radio-group-label-color: var(--radio-group-label-color, var(--mod-radio-group-label-color, var(--ds-input-label-color-base)));--_radio-group-label-family: var(--radio-group-label-family, var(--mod-radio-group-label-family, var(--ds-input-label-family)));--_radio-group-label-weight: var(--radio-group-label-weight, var(--mod-radio-group-label-weight, var(--ds-input-label-weight)));--_radio-group-label-line-height: var(--radio-group-label-line-height, var(--mod-radio-group-label-line-height, var(--ds-input-label-line-height)));--_radio-group-label-size: var(--radio-group-label-size, var(--mod-radio-group-label-size, var(--ds-input-label-size-device)));--_radio-group-description-color: var(--radio-group-description-color, var(--mod-radio-group-description-color, var(--ds-input-description-color-base)));--_radio-group-description-family: var(--radio-group-description-family, var(--mod-radio-group-description-family, var(--ds-input-description-family)));--_radio-group-description-weight: var(--radio-group-description-weight, var(--mod-radio-group-description-weight, var(--ds-input-description-weight)));--_radio-group-description-line-height: var(--radio-group-description-line-height, var(--mod-radio-group-description-line-height, var(--ds-input-description-line-height)));--_radio-group-description-size: var(--radio-group-description-size, var(--mod-radio-group-description-size, var(--ds-input-description-size-device)))}:host{display:block}:host #inner{position:relative;display:grid;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_radio-group-label-color);font-family:var(--_radio-group-label-family);font-weight:var(--_radio-group-label-weight);font-size:var(--_radio-group-label-size);line-height:var(--_radio-group-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_radio-group-description-color);font-family:var(--_radio-group-description-family);font-weight:var(--_radio-group-description-weight);font-size:var(--_radio-group-description-size);line-height:var(--_radio-group-description-line-height)}:host #description ds-icon{--icon-color: var(--_radio-group-description-color)}:host #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-radio-group-description-color: var(--ds-input-description-color-danger)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-radio-group-label-color: var(--ds-input-label-color-disabled);--mod-radio-group-description-color: var(--ds-input-description-color-disabled)}:host(.is-tile) #container{flex-wrap:wrap}
+:host{--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)))}:host{display:block}:host #inner{position:relative;display:grid;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-radio-group-description-color: var(--ds-form-description-color-danger)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-radio-group-label-color: var(--ds-form-label-color-disabled);--mod-radio-group-description-color: var(--ds-form-description-color-disabled)}:host(.is-tile) #container{flex-wrap:wrap}

package/dist/collection/components/radio/radio-group/radio-group.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
-import { Logger, stopEventBubbling, hasTagName, isDescendant, ValidateOneOf, ValidateType, setupValidation, } from "../../../utils/index";
+import { Logger, stopEventBubbling, hasTagName, isDescendant, OneOf, Type } from "../../../utils/index";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
 import { INPUT_COLORS } from "../../input/input.interfaces";
@@ -134,7 +134,6 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
         this.passDownAttributes();
@@ -281,10 +280,10 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '8159d4f48203cf480bb5ecb52759ea985882c4a2', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '6b73d9b9050aea5ad17c934f5c57667aa36b65e4', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            }, onClick: this.handleClick }, h("slot", { key: '5705208f63515b8ba56b26c36a41de2caa5e3545' })));
+            }, onClick: this.handleClick }, h("slot", { key: '6c090a936fab5b14946544e52cf30890f719c2ff' })));
     }
     static get is() { return "ds-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -592,7 +591,7 @@ export class RadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -906,75 +905,75 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], RadioGroup.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "allowEmptySelection", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], RadioGroup.prototype, "cols", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], RadioGroup.prototype, "colsMobile", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], RadioGroup.prototype, "colsTablet", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "invalidText", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_LABEL_POSITIONS),
+    OneOf(RADIO_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "loading", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "tile", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_TILE_COLORS),
+    OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)
 ], RadioGroup.prototype, "tileColor", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "vertical", void 0);
 __decorate([

package/dist/collection/components/radio/radio.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { Logger, isSpaceKey, inheritAttributes, isDescendant, waitAfterIdleCallback, stopEventBubbling, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, isSpaceKey, inheritAttributes, isDescendant, waitAfterIdleCallback, stopEventBubbling, hasValue, OneOf, Type, } from "../../utils/index";
 import { FOCUS_KEYS } from "../app/app.focus.util";
 import { RADIO_GROUP_COLUMNS, RADIO_TILE_COLORS, RADIO_LABEL_POSITIONS, } from "./radio.interfaces";
 /**
@@ -146,7 +146,6 @@ export class Radio {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         if (this.value === undefined) {
             this.value = this.inputId;
         }
@@ -235,18 +234,18 @@ export class Radio {
         if (this.buttonTabindex !== undefined) {
             inputAttributes['tabIndex'] = this.buttonTabindex;
         }
-        return (h(Host, { key: 'f5348673582c3f0fb64464e0cdf3274e18bc6bb8', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: '9b383a941268929daf06b1b489a999eea2155609', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
                 'is-disabled': this.disabled || this.readonly,
                 'is-invalid': this.invalid,
                 'is-checked': this.checked,
                 'is-tile': this.tile,
-                [`has-tile-${this.tileColor}`]: this.tile && !!this.tileColor,
+                [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
                 'has-label-left': this.labelPosition === 'left',
                 'has-label-top': this.labelPosition === 'top',
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            }, onClick: this.handleClick }, h("label", { key: '54d4bfcfec491025e485b3209e89ced7edbb8b31', id: "label", part: "label" }, h("input", Object.assign({ key: 'b7a5c0c381a5a649c3f95e0a998468c3115aa42b', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), h("div", { key: '4615f6096e5c77bb76c1f50e5d90def61b0295e2', id: "slot", part: "slot" }, h("slot", { key: 'dffad20376dc7cd26b3bee13c4884eae3ab0a49c' })))));
+            }, onClick: this.handleClick }, h("label", { key: '7d482ce4dc292979056c742e570fb5c896dbf03a', id: "label", part: "label" }, h("input", Object.assign({ key: '69cce42bde7dff626f0ee9114b6843638c184555', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), h("div", { key: '3fb5e32fe8b94aee3e88723e85a735e42b3d4238', id: "slot", part: "slot" }, h("slot", { key: '9dbee7d427ddda925a7e0846cbb6d01eb7a4f9ed' })))));
     }
     static get is() { return "ds-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -496,7 +495,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -788,59 +787,59 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Radio.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "autoInvalidOff", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "checked", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Radio.prototype, "cols", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Radio.prototype, "colsMobile", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Radio.prototype, "colsTablet", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Radio.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_LABEL_POSITIONS),
+    OneOf(RADIO_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], Radio.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Radio.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "tile", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_TILE_COLORS),
+    OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)
 ], Radio.prototype, "tileColor", void 0);
 let radioIds = 0;