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

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: 'f58b0f36bace8a5e6afa02993dd51b9f22c02ec8', 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: '512721ca39c4c559b40bdd0a4d7d51da7d5ef6f2', 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";
@@ -86,6 +86,10 @@ export class RadioGroup {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile checkbox.
          */
@@ -102,6 +106,10 @@ export class RadioGroup {
             this.setRadioTabindex(this.value);
             this.setRadioChecked();
         };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
         this.handleClick = (ev) => {
             const element = ev.target;
             if (element.href) {
@@ -134,7 +142,6 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
         this.passDownAttributes();
@@ -145,6 +152,9 @@ export class RadioGroup {
     componentWillUpdate() {
         this.passDownAttributes();
     }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -233,6 +243,7 @@ export class RadioGroup {
      */
     passDownAttributes() {
         this.getRadios().forEach(radio => {
+            var _a;
             if (this.disabled !== undefined) {
                 radio.disabled = this.disabled;
             }
@@ -244,7 +255,8 @@ export class RadioGroup {
             }
             radio.labelPosition = this.labelPosition;
             radio.tile = this.tile;
-            radio.tileColor = this.tileColor;
+            radio.hideTrigger = this.hideTrigger;
+            radio.tileColor = (_a = radio.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
             radio.cols = this.cols;
             radio.colsTablet = this.colsTablet;
             radio.colsMobile = this.colsMobile;
@@ -281,10 +293,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: 'e52d1c8b0aafdbf523cd91bae9dfc0d563eb5002', 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: 'd235eec63f1e13a9de4988b841ea124f05d9a2a3', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -592,7 +604,7 @@ export class RadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -656,6 +668,26 @@ export class RadioGroup {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "tileColor": {
                 "type": "string",
                 "mutable": false,
@@ -906,75 +938,79 @@ __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),
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "hideTrigger", void 0);
+__decorate([
+    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.host.css

@@ -1 +1 @@
-:host{--_radio-gap: var(--radio-gap, var(--mod-radio-gap, 0.5rem));--_radio-label-base-color: var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));--_radio-label-hover-color: var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));--_radio-label-active-color: var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));--_radio-size: var(--radio-size, var(--mod-radio-size, 1.5rem));--_radio-border-width: var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));--_radio-radius: var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));--_radio-tile-radius: var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));--_radio-tile-padding: var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));--_radio-tile-border-width: var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));--_radio-tile-base-background-color: var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));--_radio-tile-base-border-color: var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));--_radio-tile-hover-background-color: var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-2)));--_radio-tile-hover-border-color: var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));--_radio-tile-active-background-color: var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-2)));--_radio-tile-active-border-color: var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));--_radio-unchecked-base-color-background: var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));--_radio-unchecked-base-color-border: var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_radio-unchecked-hover-color-background: var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-hover-color-border: var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-unchecked-active-color-background: var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-active-color-border: var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_radio-checked-base-color-background: var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));--_radio-checked-base-color-border: var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));--_radio-checked-base-color-icon: var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));--_radio-checked-hover-color-background: var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));--_radio-checked-hover-color-border: var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-checked-active-color-background: var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));--_radio-checked-active-color-border: var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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:inline-flex;align-items:center;gap:var(--_radio-gap);cursor:pointer;user-select:none;color:var(--_radio-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_radio-label-hover-color)}}label:active{color:var(--_radio-label-active-color)}label #slot{flex:1}:host input[type=radio]{position:relative;appearance:none;flex:none;display:inline-flex;width:var(--_radio-size);height:var(--_radio-size);background:var(--_radio-unchecked-base-color-background);border:var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);border-radius:var(--_radio-radius);vertical-align:top;cursor:pointer;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=radio]:disabled{cursor:default}:host input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_radio-radius)}:host input[type=radio]:not(:disabled):hover,:host:hover input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-hover-color-background);border-color:var(--_radio-unchecked-hover-color-border)}:host input[type=radio]:not(:disabled):active,:host:active input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-active-color-background);border-color:var(--_radio-unchecked-active-color-border)}:host input[type=radio]:checked{background:var(--_radio-checked-base-color-background);border-color:var(--_radio-checked-base-color-border)}:host input[type=radio]:checked:not(:disabled):hover,:host:hover input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-hover-color-background);border-color:var(--_radio-checked-hover-color-border)}:host input[type=radio]:checked:not(:disabled):active,:host:active input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-active-color-background);border-color:var(--_radio-checked-active-color-border)}:host input[type=radio]::after{content:"";display:block;border-radius:var(--_radio-radius);height:0;width:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;background:rgba(0,0,0,0);transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out}:host input[type=radio]:checked::after{background-color:var(--_radio-checked-base-color-icon);height:.5rem;width:.5rem;opacity:1}:host(.is-invalid:not(.is-disabled)){--mod-radio-label-base-color: var(--ds-global-color-danger-4);--mod-radio-label-hover-color: var(--ds-global-color-danger-5);--mod-radio-label-active-color: var(--ds-global-color-danger-6);--mod-radio-unchecked-base-color-background: transparent;--mod-radio-unchecked-base-color-border: var(--ds-divider-color-danger);--mod-radio-unchecked-hover-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-unchecked-active-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-active-color-border: var(--ds-divider-color-danger-darker);--mod-radio-checked-base-color-background: var(--ds-divider-color-danger);--mod-radio-checked-base-color-border: var(--ds-divider-color-danger);--mod-radio-checked-hover-color-background: var(--ds-divider-color-danger-dark);--mod-radio-checked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-checked-active-color-background: var(--ds-divider-color-danger-darker);--mod-radio-checked-active-color-border: var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-radio-label-base-color: var(--ds-global-color-grey-5);--mod-radio-label-hover-color: var(--ds-global-color-grey-5);--mod-radio-label-active-color: var(--ds-global-color-grey-5);--mod-radio-unchecked-base-color-background: var(--ds-global-color-grey-2);--mod-radio-unchecked-base-color-border: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-background: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-border: var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_radio-tile-padding);border-style:solid;border-width:var(--_radio-tile-border-width);border-radius:var(--_radio-tile-radius);border-color:var(--_radio-tile-base-border-color);background:var(--_radio-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_radio-tile-hover-border-color);background:var(--_radio-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_radio-tile-active-border-color);background:var(--_radio-tile-active-background-color)}:host(.is-tile.is-checked){--mod-radio-tile-base-border-color: var(--_radio-checked-base-color-background)}:host(.is-tile.has-tile-green.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-radio-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-active-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-radio-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}
+:host{--_radio-gap: var(--radio-gap, var(--mod-radio-gap, 0.5rem));--_radio-label-base-color: var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));--_radio-label-hover-color: var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));--_radio-label-active-color: var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));--_radio-size: var(--radio-size, var(--mod-radio-size, 1.5rem));--_radio-border-width: var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));--_radio-radius: var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));--_radio-tile-radius: var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));--_radio-tile-padding: var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));--_radio-tile-border-width: var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));--_radio-tile-base-background-color: var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));--_radio-tile-base-border-color: var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));--_radio-tile-hover-background-color: var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-0)));--_radio-tile-hover-border-color: var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));--_radio-tile-active-background-color: var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-0)));--_radio-tile-active-border-color: var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));--_radio-unchecked-base-color-background: var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));--_radio-unchecked-base-color-border: var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_radio-unchecked-hover-color-background: var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-1)));--_radio-unchecked-hover-color-border: var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-unchecked-active-color-background: var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-active-color-border: var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_radio-checked-base-color-background: var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));--_radio-checked-base-color-border: var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));--_radio-checked-base-color-icon: var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));--_radio-checked-hover-color-background: var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));--_radio-checked-hover-color-border: var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-checked-active-color-background: var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));--_radio-checked-active-color-border: var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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:inline-flex;align-items:center;gap:var(--_radio-gap);cursor:pointer;user-select:none;color:var(--_radio-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_radio-label-hover-color)}}label:active{color:var(--_radio-label-active-color)}label #slot{flex:1}:host input[type=radio]{position:relative;appearance:none;flex:none;display:inline-flex;width:var(--_radio-size);height:var(--_radio-size);background:var(--_radio-unchecked-base-color-background);border:var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);border-radius:var(--_radio-radius);vertical-align:top;cursor:pointer;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=radio]:disabled{cursor:default}:host input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_radio-radius)}:host input[type=radio]:not(:disabled):hover,:host:hover input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-hover-color-background);border-color:var(--_radio-unchecked-hover-color-border)}:host input[type=radio]:not(:disabled):active,:host:active input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-active-color-background);border-color:var(--_radio-unchecked-active-color-border)}:host input[type=radio]:checked{background:var(--_radio-checked-base-color-background);border-color:var(--_radio-checked-base-color-border)}:host input[type=radio]:checked:not(:disabled):hover,:host:hover input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-hover-color-background);border-color:var(--_radio-checked-hover-color-border)}:host input[type=radio]:checked:not(:disabled):active,:host:active input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-active-color-background);border-color:var(--_radio-checked-active-color-border)}:host input[type=radio]::after{content:"";display:block;border-radius:var(--_radio-radius);height:0;width:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;background:rgba(0,0,0,0);transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out}:host input[type=radio]:checked::after{background-color:var(--_radio-checked-base-color-icon);height:.5rem;width:.5rem;opacity:1}:host(.is-invalid:not(.is-disabled)){--mod-radio-label-base-color: var(--ds-global-color-danger-4);--mod-radio-label-hover-color: var(--ds-global-color-danger-5);--mod-radio-label-active-color: var(--ds-global-color-danger-6);--mod-radio-unchecked-base-color-background: transparent;--mod-radio-unchecked-base-color-border: var(--ds-divider-color-danger);--mod-radio-unchecked-hover-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-unchecked-active-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-active-color-border: var(--ds-divider-color-danger-darker);--mod-radio-checked-base-color-background: var(--ds-divider-color-danger);--mod-radio-checked-base-color-border: var(--ds-divider-color-danger);--mod-radio-checked-hover-color-background: var(--ds-divider-color-danger-dark);--mod-radio-checked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-checked-active-color-background: var(--ds-divider-color-danger-darker);--mod-radio-checked-active-color-border: var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-radio-label-base-color: var(--ds-global-color-grey-5);--mod-radio-label-hover-color: var(--ds-global-color-grey-5);--mod-radio-label-active-color: var(--ds-global-color-grey-5);--mod-radio-unchecked-base-color-background: var(--ds-global-color-grey-2);--mod-radio-unchecked-base-color-border: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-background: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-border: var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_radio-tile-padding);border-style:solid;border-width:var(--_radio-tile-border-width);border-radius:var(--_radio-tile-radius);border-color:var(--_radio-tile-base-border-color);background:var(--_radio-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_radio-tile-hover-border-color);background:var(--_radio-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_radio-tile-active-border-color);background:var(--_radio-tile-active-background-color)}:host(.is-tile.is-checked){--mod-radio-tile-base-border-color: var(--_radio-checked-base-color-background)}:host(.is-tile.hide-trigger) label{position:relative}:host(.is-tile.hide-trigger) input[type=radio]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(.is-tile.hide-trigger.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-primary-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-primary-1);--mod-radio-tile-active-background-color: var(--ds-global-color-primary-1)}:host(.is-tile.has-tile-green.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-green-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-green-1);--mod-radio-tile-active-background-color: var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-red-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-red-1);--mod-radio-tile-active-background-color: var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-yellow-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-yellow-1);--mod-radio-tile-active-background-color: var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-purple-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-purple-1);--mod-radio-tile-active-background-color: var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-radio-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-active-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-radio-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}