@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/packages/radio/radio.test.js

@@ -1,11 +1,11 @@
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './radio.js';
-import { userEvent } from 'vitest/browser';
-test('checks on click and remains checked on subsequent clicks', async () => {
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./radio.js";
+import { userEvent } from "vitest/browser";
+test("checks on click and remains checked on subsequent clicks", async () => {
     render(html `<w-radio value="alpha">Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
     expect(radio.checked).toBe(false);
     radio.click();
@@ -15,9 +15,9 @@ test('checks on click and remains checked on subsequent clicks', async () => {
     await radio.updateComplete;
     expect(radio.checked).toBe(true);
 });
-test('does not check when disabled', async () => {
+test("does not check when disabled", async () => {
     render(html `<w-radio value="alpha" disabled>Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
     expect(radio.checked).toBe(false);
     expect(radio.disabled).toBe(true);
@@ -26,9 +26,9 @@ test('does not check when disabled', async () => {
     await radio.updateComplete;
     expect(radio.checked).toBe(false);
 });
-test('updates checked state and tabIndex when checked', async () => {
+test("updates checked state and tabIndex when checked", async () => {
     render(html `<w-radio value="alpha">Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
     expect(radio.checked).toBe(false);
     radio.checked = true;
@@ -37,38 +37,39 @@ test('updates checked state and tabIndex when checked', async () => {
     // tabIndex is set after RAF for hydration compatibility
     await expect.poll(() => radio.tabIndex).toBe(0);
 });
-test('checked state uses selected border color', async () => {
+test("checked state uses selected border color", async () => {
     render(html `<w-radio value="alpha">Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
-    const control = radio.shadowRoot?.querySelector('.control');
+    const control = radio.shadowRoot?.querySelector(".control");
     if (!control) {
-        throw new Error('Expected radio control element to exist');
+        throw new Error("Expected radio control element to exist");
     }
     radio.click();
     await radio.updateComplete;
-    const swatch = document.createElement('div');
-    swatch.style.borderColor = 'var(--w-s-color-border-selected)';
+    const swatch = document.createElement("div");
+    swatch.style.borderColor = "var(--w-s-color-border-selected)";
     document.body.append(swatch);
     const selectedColor = getComputedStyle(swatch).borderColor;
     swatch.remove();
     expect(getComputedStyle(control).borderColor).toBe(selectedColor);
 });
-test('disabled control uses disabled background and border colors', async () => {
+test("disabled control uses disabled background and border colors", async () => {
     render(html `<w-radio value="alpha" disabled>Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
-    const control = radio.shadowRoot?.querySelector('.control');
+    const control = radio.shadowRoot?.querySelector(".control");
     if (!control) {
-        throw new Error('Expected radio control element to exist');
+        throw new Error("Expected radio control element to exist");
     }
-    const bgSwatch = document.createElement('div');
-    bgSwatch.style.backgroundColor = 'var(--w-s-color-background-disabled-subtle)';
+    const bgSwatch = document.createElement("div");
+    bgSwatch.style.backgroundColor =
+        "var(--w-s-color-background-disabled-subtle)";
     document.body.append(bgSwatch);
     const disabledBg = getComputedStyle(bgSwatch).backgroundColor;
     bgSwatch.remove();
-    const borderSwatch = document.createElement('div');
-    borderSwatch.style.borderColor = 'var(--w-s-color-border-disabled)';
+    const borderSwatch = document.createElement("div");
+    borderSwatch.style.borderColor = "var(--w-s-color-border-disabled)";
     document.body.append(borderSwatch);
     const disabledBorder = getComputedStyle(borderSwatch).borderColor;
     borderSwatch.remove();
@@ -76,9 +77,9 @@ test('disabled control uses disabled background and border colors', async () =>
     expect(controlStyle.backgroundColor).toBe(disabledBg);
     expect(controlStyle.borderColor).toBe(disabledBorder);
 });
-test('reflects disabled state changes and updates tabIndex', async () => {
+test("reflects disabled state changes and updates tabIndex", async () => {
     render(html `<w-radio value="alpha">Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
     expect(radio.disabled).toBe(false);
     // tabIndex is set after RAF for hydration compatibility
@@ -95,44 +96,44 @@ test('reflects disabled state changes and updates tabIndex', async () => {
     expect(radio.disabled).toBe(false);
     await expect.poll(() => radio.tabIndex).toBe(0);
 });
-test('focuses the host element', async () => {
+test("focuses the host element", async () => {
     render(html `<w-radio value="alpha">Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
     // Wait for tabindex to be set (delayed for hydration compatibility)
     await expect.poll(() => radio.tabIndex).toBe(0);
     radio.focus();
     await expect.poll(() => document.activeElement).toBe(radio);
 });
-test('associates selected value with form submission', async () => {
+test("associates selected value with form submission", async () => {
     render(html `
-    <form>
-      <w-radio name="choice" value="alpha">Alpha</w-radio>
-      <w-radio name="choice" value="beta">Beta</w-radio>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio name="choice" value="alpha">Alpha</w-radio>
+			<w-radio name="choice" value="beta">Beta</w-radio>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const radios = [...document.querySelectorAll("w-radio")];
     await radios[0].updateComplete;
     let data = new FormData(form);
-    expect(data.get('choice')).toBeNull();
+    expect(data.get("choice")).toBeNull();
     radios[0].click();
     await radios[0].updateComplete;
     data = new FormData(form);
-    expect(data.get('choice')).toBe('alpha');
+    expect(data.get("choice")).toBe("alpha");
     radios[1].click();
     await radios[1].updateComplete;
     expect(radios[0].checked).toBe(false);
     expect(radios[1].checked).toBe(true);
     data = new FormData(form);
-    expect(data.get('choice')).toBe('beta');
+    expect(data.get("choice")).toBe("beta");
 });
-test('standalone radios with same name are mutually exclusive', async () => {
+test("standalone radios with same name are mutually exclusive", async () => {
     render(html `
-    <w-radio name="group" value="one">One</w-radio>
-    <w-radio name="group" value="two">Two</w-radio>
-  `);
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio name="group" value="one">One</w-radio>
+		<w-radio name="group" value="two">Two</w-radio>
+	`);
+    const radios = [...document.querySelectorAll("w-radio")];
     await radios[0].updateComplete;
     radios[0].click();
     await radios[0].updateComplete;
@@ -143,13 +144,13 @@ test('standalone radios with same name are mutually exclusive', async () => {
     expect(radios[0].checked).toBe(false);
     expect(radios[1].checked).toBe(true);
 });
-test('standalone radios with same name use roving tab order', async () => {
+test("standalone radios with same name use roving tab order", async () => {
     render(html `
-    <w-radio name="group" value="one">One</w-radio>
-    <w-radio name="group" value="two">Two</w-radio>
-    <w-radio name="group" value="three">Three</w-radio>
-  `);
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio name="group" value="one">One</w-radio>
+		<w-radio name="group" value="two">Two</w-radio>
+		<w-radio name="group" value="three">Three</w-radio>
+	`);
+    const radios = [...document.querySelectorAll("w-radio")];
     await Promise.all(radios.map((radio) => radio.updateComplete));
     // tabIndex is set after RAF to avoid hydration mismatch, so poll for it
     await expect.poll(() => radios[0].tabIndex).toBe(0);
@@ -161,52 +162,52 @@ test('standalone radios with same name use roving tab order', async () => {
     expect(radios[0].tabIndex).toBe(-1);
     expect(radios[1].tabIndex).toBe(-1);
 });
-test('arrow keys move selection between standalone radios with same name', async () => {
+test("arrow keys move selection between standalone radios with same name", async () => {
     render(html `
-    <w-radio name="group" value="one">One</w-radio>
-    <w-radio name="group" value="two">Two</w-radio>
-    <w-radio name="group" value="three">Three</w-radio>
-  `);
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio name="group" value="one">One</w-radio>
+		<w-radio name="group" value="two">Two</w-radio>
+		<w-radio name="group" value="three">Three</w-radio>
+	`);
+    const radios = [...document.querySelectorAll("w-radio")];
     await Promise.all(radios.map((radio) => radio.updateComplete));
     // Wait for initial tabIndex to be set (delayed for hydration compatibility)
     await expect.poll(() => radios[0].tabIndex).toBe(0);
     radios[0].focus();
-    radios[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    radios[0].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
     await Promise.all(radios.map((radio) => radio.updateComplete));
     expect(radios[0].checked).toBe(false);
     expect(radios[1].checked).toBe(true);
     await expect.poll(() => radios[1].tabIndex).toBe(0);
     await expect.poll(() => document.activeElement).toBe(radios[1]);
 });
-test('required radio reports validity based on checked state', async () => {
+test("required radio reports validity based on checked state", async () => {
     render(html `<w-radio name="choice" value="alpha" required>Alpha</w-radio>`);
-    const radio = document.querySelector('w-radio');
+    const radio = document.querySelector("w-radio");
     await radio.updateComplete;
     await expect.poll(() => radio.reportValidity()).toBe(false);
-    expect(radio.validationMessage).not.toBe('');
+    expect(radio.validationMessage).not.toBe("");
     expect(radio.invalid).toBe(true);
     radio.click();
     await radio.updateComplete;
     await expect.poll(() => radio.reportValidity()).toBe(true);
     expect(radio.invalid).toBe(false);
 });
-test('submits the associated form when radio has focus and user presses Enter', async () => {
+test("submits the associated form when radio has focus and user presses Enter", async () => {
     const screen = render(html `
-    <form>
-      <w-radio name="group" value="one">One</w-radio>
-      <w-radio name="group" value="two">Two</w-radio>
-      <button type="submit">Submit</button>
-    </form>
-  `);
+		<form>
+			<w-radio name="group" value="one">One</w-radio>
+			<w-radio name="group" value="two">Two</w-radio>
+			<button type="submit">Submit</button>
+		</form>
+	`);
     const onSubmit = vi.fn();
-    const form = document.querySelector('form');
-    form.addEventListener('submit', (event) => {
+    const form = document.querySelector("form");
+    form.addEventListener("submit", (event) => {
         event.preventDefault();
         onSubmit();
     });
-    await userEvent.click(screen.getByText('One'));
-    await userEvent.keyboard('{Space}');
-    await userEvent.keyboard('{Enter}');
+    await userEvent.click(screen.getByText("One"));
+    await userEvent.keyboard("{Space}");
+    await userEvent.keyboard("{Enter}");
     expect(onSubmit).toHaveBeenCalled();
 });

package/dist/packages/radio/react.d.ts

@@ -1,2 +1,2 @@
-import { WarpRadio } from './radio.js';
+import { WarpRadio } from "./radio.js";
 export declare const Radio: import("@lit/react").ReactWebComponent<WarpRadio, {}>;

package/dist/packages/radio/react.js

@@ -1,11 +1,11 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 export const Radio = createComponent({
-    tagName: 'w-radio',
+    tagName: "w-radio",
     elementClass: Component,
     react: React,
 });

package/dist/packages/radio/required-validator.d.ts

@@ -1,4 +1,4 @@
-import type { Validator } from './form-associated-element';
+import type { Validator } from "./form-associated-element";
 export interface RequiredValidatorOptions {
     /** This is a cheap way for us to get translation strings for the user without having proper translations. */
     validationElement?: HTMLSelectElement | HTMLInputElement;

package/dist/packages/radio/required-validator.js

@@ -1,21 +1,23 @@
 export const RequiredValidator = (options = {}) => {
     let { validationElement, validationProperty } = options;
     if (!validationElement) {
-        validationElement = Object.assign(document.createElement('input'), { required: true });
+        validationElement = Object.assign(document.createElement("input"), {
+            required: true,
+        });
     }
     if (!validationProperty) {
-        validationProperty = 'value';
+        validationProperty = "value";
     }
     const obj = {
-        observedAttributes: ['required'],
+        observedAttributes: ["required"],
         message: validationElement.validationMessage, // @TODO: Add a translation.
         checkValidity(element) {
             const validity = {
-                message: '',
+                message: "",
                 isValid: true,
                 invalidKeys: [],
             };
-            const isRequired = element.required ?? element.hasAttribute('required');
+            const isRequired = element.required ?? element.hasAttribute("required");
             // Always true if the element isn't required.
             if (!isRequired) {
                 return validity;
@@ -23,9 +25,12 @@ export const RequiredValidator = (options = {}) => {
             const value = element[validationProperty];
             const isEmpty = !value;
             if (isEmpty) {
-                validity.message = typeof obj.message === 'function' ? obj.message(element) : obj.message || '';
+                validity.message =
+                    typeof obj.message === "function"
+                        ? obj.message(element)
+                        : obj.message || "";
                 validity.isValid = false;
-                validity.invalidKeys.push('valueMissing');
+                validity.invalidKeys.push("valueMissing");
             }
             return validity;
         },

package/dist/packages/radio/slot.d.ts

@@ -1,4 +1,4 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from "lit";
 /** A reactive controller that determines when slots exist. */
 export declare class HasSlotController implements ReactiveController {
     host: ReactiveControllerHost & Element;

package/dist/packages/radio/slot.js

@@ -4,7 +4,8 @@ export class HasSlotController {
         this.slotNames = [];
         this.handleSlotChange = (event) => {
             const slot = event.target;
-            if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+            if ((this.slotNames.includes("[default]") && !slot.name) ||
+                (slot.name && this.slotNames.includes(slot.name))) {
                 this.host.requestUpdate();
             }
         };
@@ -13,18 +14,18 @@ export class HasSlotController {
     }
     hasDefaultSlot() {
         return [...this.host.childNodes].some((node) => {
-            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '') {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== "") {
                 return true;
             }
             if (node.nodeType === Node.ELEMENT_NODE) {
                 const el = node;
                 const tagName = el.tagName.toLowerCase();
                 // Ignore visually hidden elements since they aren't rendered
-                if (tagName === 'w-visually-hidden') {
+                if (tagName === "w-visually-hidden") {
                     return false;
                 }
                 // If it doesn't have a slot attribute, it's part of the default slot
-                if (!el.hasAttribute('slot')) {
+                if (!el.hasAttribute("slot")) {
                     return true;
                 }
             }
@@ -35,13 +36,15 @@ export class HasSlotController {
         return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
     }
     test(slotName) {
-        return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+        return slotName === "[default]"
+            ? this.hasDefaultSlot()
+            : this.hasNamedSlot(slotName);
     }
     hostConnected() {
-        this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);
+        this.host.shadowRoot?.addEventListener("slotchange", this.handleSlotChange);
     }
     hostDisconnected() {
-        this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);
+        this.host.shadowRoot?.removeEventListener("slotchange", this.handleSlotChange);
     }
 }
 /**
@@ -51,7 +54,7 @@ export class HasSlotController {
  * @param callback - A function that can be used to customize the HTML output for specific types of nodes. If the function returns undefined, the default HTML output will be used.
  */
 export function getInnerHTML(nodes, callback) {
-    let html = '';
+    let html = "";
     for (const node of nodes) {
         if (callback) {
             const customHTML = callback(node);

package/dist/packages/radio/watch.d.ts

@@ -1,4 +1,4 @@
-import type { LitElement } from 'lit';
+import type { LitElement } from "lit";
 type UpdateHandler = (prev?: unknown, next?: unknown) => void;
 type NonUndefined<A> = A extends undefined ? never : A;
 type UpdateHandlerFunctionKeys<T extends object> = {

package/dist/packages/radio/watch.js

@@ -18,7 +18,9 @@ export function watch(propertyName, options) {
     return (proto, decoratedFnName) => {
         // @ts-expect-error - update is a protected property
         const { update } = proto;
-        const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+        const watchedProperties = Array.isArray(propertyName)
+            ? propertyName
+            : [propertyName];
         // @ts-expect-error - update is a protected property
         proto.update = function (changedProps) {
             watchedProperties.forEach((property) => {

package/dist/packages/radio-group/radio-group-styles.js

@@ -1,90 +1,123 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-  :host {
-    display: block;
-
-    --_label-font-size: var(--w-c-radio-group-label-font-size, var(--w-font-size-s));
-    --_label-line-height: var(--w-c-radio-group-label-line-height, var(--w-line-height-s));
-    --_label-font-weight: var(--w-c-radio-group-label-font-weight, 700);
-    --_label-color: var(--w-c-radio-group-label-color, var(--w-s-color-text));
-    --_label-color-disabled: var(--w-c-radio-group-label-color-disabled, var(--w-s-color-text-disabled));
-    --_label-padding-bottom: var(--w-c-radio-group-label-padding-bottom, 16px);
-
-    --_optional-font-weight: var(--w-c-radio-group-optional-font-weight, 400);
-    --_optional-color: var(--w-c-radio-group-optional-color, var(--w-s-color-text-subtle));
-    --_optional-margin-inline-start: var(--w-c-radio-group-optional-margin-inline-start, 0.5rem);
-
-    --_radios-gap: var(--w-c-radio-group-gap, 16px);
-
-    --_help-text-margin-block-start: var(--w-c-radio-group-help-text-margin-block-start, 16px);
-    --_help-text-font-size: var(--w-c-radio-group-help-text-font-size, var(--w-font-size-xs));
-    --_help-text-line-height: var(--w-c-radio-group-help-text-line-height, var(--w-line-height-xs));
-    --_help-text-color: var(--w-c-radio-group-help-text-color, var(--w-s-color-text-subtle));
-    --_help-text-color-disabled: var(--w-c-radio-group-help-text-color-disabled, var(--w-s-color-text-disabled));
-    --_help-text-color-error: var(--w-c-radio-group-help-text-color-error, var(--w-s-color-text-negative));
-  }
-
-  [part='form-control'] {
-    position: relative;
-
-    border: 0;
-    padding: 0;
-    margin: 0;
-
-    min-inline-size: 0;
-  }
-
-  [part='form-control-label'] {
-    display: block;
-    cursor: pointer;
-
-    font-size: var(--_label-font-size);
-    line-height: var(--_label-line-height);
-    font-weight: var(--_label-font-weight);
-    color: var(--_label-color);
-
-    padding-bottom: var(--_label-padding-bottom);
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: grayscale;
-  }
-
-  :host([disabled]) [part='form-control-label'] {
-    cursor: default;
-    color: var(--_label-color-disabled);
-  }
-
-  :host([required]) [part='form-control-label']::after {
-    content: var(--wa-form-control-required-content);
-    margin-inline-start: var(--wa-form-control-required-content-offset);
-  }
-
-  .optional {
-    font-weight: var(--_optional-font-weight);
-    color: var(--_optional-color);
-    margin-inline-start: var(--_optional-margin-inline-start);
-  }
-
-  [part~='form-control-input'] {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: var(--_radios-gap);
-  }
-
-  [part~='help-text'] {
-    margin-block-start: var(--_help-text-margin-block-start);
-    font-size: var(--_help-text-font-size);
-    line-height: var(--_help-text-line-height);
-    color: var(--_help-text-color);
-  }
-
-  :host([disabled]) [part~='help-text'] {
-    color: var(--_help-text-color-disabled);
-  }
-
-  :host([data-show-error]) [part~='help-text'] {
-    color: var(--_help-text-color-error);
-  }
+	:host {
+		display: block;
+
+		--_label-font-size: var(
+			--w-c-radio-group-label-font-size,
+			var(--w-font-size-s)
+		);
+		--_label-line-height: var(
+			--w-c-radio-group-label-line-height,
+			var(--w-line-height-s)
+		);
+		--_label-font-weight: var(--w-c-radio-group-label-font-weight, 700);
+		--_label-color: var(--w-c-radio-group-label-color, var(--w-s-color-text));
+		--_label-color-disabled: var(
+			--w-c-radio-group-label-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+		--_label-padding-bottom: var(--w-c-radio-group-label-padding-bottom, 16px);
+
+		--_optional-font-weight: var(--w-c-radio-group-optional-font-weight, 400);
+		--_optional-color: var(
+			--w-c-radio-group-optional-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_optional-margin-inline-start: var(
+			--w-c-radio-group-optional-margin-inline-start,
+			0.5rem
+		);
+
+		--_radios-gap: var(--w-c-radio-group-gap, 16px);
+
+		--_help-text-margin-block-start: var(
+			--w-c-radio-group-help-text-margin-block-start,
+			16px
+		);
+		--_help-text-font-size: var(
+			--w-c-radio-group-help-text-font-size,
+			var(--w-font-size-xs)
+		);
+		--_help-text-line-height: var(
+			--w-c-radio-group-help-text-line-height,
+			var(--w-line-height-xs)
+		);
+		--_help-text-color: var(
+			--w-c-radio-group-help-text-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_help-text-color-disabled: var(
+			--w-c-radio-group-help-text-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+		--_help-text-color-error: var(
+			--w-c-radio-group-help-text-color-error,
+			var(--w-s-color-text-negative)
+		);
+	}
+
+	[part="form-control"] {
+		position: relative;
+
+		border: 0;
+		padding: 0;
+		margin: 0;
+
+		min-inline-size: 0;
+	}
+
+	[part="form-control-label"] {
+		display: block;
+		cursor: pointer;
+
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		font-weight: var(--_label-font-weight);
+		color: var(--_label-color);
+
+		padding-bottom: var(--_label-padding-bottom);
+
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		font-smoothing: grayscale;
+	}
+
+	:host([disabled]) [part="form-control-label"] {
+		cursor: default;
+		color: var(--_label-color-disabled);
+	}
+
+	:host([required]) [part="form-control-label"]::after {
+		content: var(--wa-form-control-required-content);
+		margin-inline-start: var(--wa-form-control-required-content-offset);
+	}
+
+	.optional {
+		font-weight: var(--_optional-font-weight);
+		color: var(--_optional-color);
+		margin-inline-start: var(--_optional-margin-inline-start);
+	}
+
+	[part~="form-control-input"] {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		gap: var(--_radios-gap);
+	}
+
+	[part~="help-text"] {
+		margin-block-start: var(--_help-text-margin-block-start);
+		font-size: var(--_help-text-font-size);
+		line-height: var(--_help-text-line-height);
+		color: var(--_help-text-color);
+	}
+
+	:host([disabled]) [part~="help-text"] {
+		color: var(--_help-text-color-disabled);
+	}
+
+	:host([data-show-error]) [part~="help-text"] {
+		color: var(--_help-text-color-error);
+	}
 `;

package/dist/packages/radio-group/radio-group.a11y.test.d.ts

@@ -1,2 +1,2 @@
-import './radio-group.js';
-import '../radio/radio.js';
+import "./radio-group.js";
+import "../radio/radio.js";