tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/radio.js

@@ -1,479 +1,425 @@
-/**
- * TyRadio + TyRadioGroup Web Components
- *
- * Exclusive selection within a group. ty-radio-group manages the selection
- * value and form integration; ty-radio is the individual choice element.
- *
- * Composition (container + children, like ty-select + ty-option):
- *   <ty-radio-group name="plan" value="pro" label="Plan">
- *     <ty-radio value="free">Free</ty-radio>
- *     <ty-radio value="pro">Pro</ty-radio>
- *     <ty-radio value="team">Team</ty-radio>
- *   </ty-radio-group>
- *
- * Keyboard:
- * - Tab focuses the group's currently-selected (or first) radio
- * - Arrow keys move focus AND selection within the group (per W3C ARIA)
- * - Space/Enter selects the focused radio
- */
+import { DEFAULT_SIZE } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { radioStyles, radioCustomFlavorCss } from "../styles/radio.js";
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
 export class TyRadio extends TyComponent {
-    constructor() {
-        super();
-        this._customFlavorSheet = null;
-        this._listenersSetup = false;
-        this._clickHandler = null;
-        this._focusHandler = null;
-        this._blurHandler = null;
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: radioStyles, id: "ty-radio" });
-    }
-    onConnect() {
-        // Re-arm listeners on RE-connect (base skips render() when already
-        // rendered; onDisconnect removed them). No-op on first connect.
-        this.setupEventListeners();
-        // Tell the group we exist. During HTML parsing the group connects BEFORE
-        // its children, so its own onConnect sync sees an empty group — each
-        // radio announcing itself lets the group re-sync as children arrive.
-        this.dispatchEvent(new CustomEvent("ty-radio-connected", { bubbles: true }));
-        this._syncCustomFlavor();
-    }
-    onDisconnect() {
-        this.removeEventListeners();
-    }
-    onPropertiesChanged(changes) {
-        if (changes.some((c) => c.name === "flavor")) {
-            this._syncCustomFlavor();
-        }
-    }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => radioCustomFlavorCss(base));
-    }
-    buildClassList() {
-        const classes = [this.size];
-        if (this.disabled)
-            classes.push("disabled");
-        return classes.join(" ");
-    }
-    handleClick(e) {
-        if (this.disabled)
-            return;
-        e.stopPropagation();
-        // Notify the group — group will set checked attribute on this and clear others
-        this.dispatchEvent(new CustomEvent("ty-radio-select", {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    removeEventListeners() {
-        if (!this._listenersSetup)
-            return;
-        // Click lives on the HOST (label delegation + full-element trigger) —
-        // remove it before the shadow-container guard below.
-        if (this._clickHandler) {
-            this.removeEventListener("click", this._clickHandler);
-            this._clickHandler = null;
-        }
-        const el = this.shadowRoot?.querySelector(".radio-container");
-        if (!el) {
-            this._listenersSetup = false;
-            return;
-        }
-        if (this._focusHandler) {
-            el.removeEventListener("focus", this._focusHandler);
-            this._focusHandler = null;
-        }
-        if (this._blurHandler) {
-            el.removeEventListener("blur", this._blurHandler);
-            this._blurHandler = null;
-        }
-        this._listenersSetup = false;
-    }
-    setupEventListeners() {
-        if (this._listenersSetup)
-            return;
-        const el = this.shadowRoot.querySelector(".radio-container");
-        if (!el)
-            return;
-        this._clickHandler = (e) => this.handleClick(e);
-        this._focusHandler = () => el.classList.add("focused");
-        this._blurHandler = () => el.classList.remove("focused");
-        // Click on the HOST: whole element is a trigger and a wrapping <label>
-        // delegates (the synthetic click lands on the host, not the shadow).
-        this.addEventListener("click", this._clickHandler);
-        el.addEventListener("focus", this._focusHandler);
-        el.addEventListener("blur", this._blurHandler);
-        this._listenersSetup = true;
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        let radioEl = shadow.querySelector(".radio-container");
-        const classes = this.buildClassList();
-        if (!radioEl) {
-            radioEl = document.createElement("div");
-            radioEl.className = "radio-container " + classes;
-            radioEl.tabIndex = this.disabled ? -1 : 0;
-            radioEl.setAttribute("role", "radio");
-            radioEl.setAttribute("aria-checked", String(this.checked));
-            radioEl.setAttribute("aria-disabled", String(this.disabled));
-            const circle = document.createElement("div");
-            circle.className = "radio-circle";
-            radioEl.appendChild(circle);
-            shadow.appendChild(radioEl);
-        }
-        else {
-            radioEl.className = "radio-container " + classes;
-            radioEl.tabIndex = this.disabled ? -1 : 0;
-            radioEl.setAttribute("aria-checked", String(this.checked));
-            radioEl.setAttribute("aria-disabled", String(this.disabled));
-        }
-        // (Re)attach listeners — onDisconnect removes them, so a reconnected
-        // element needs them again even though the container already exists.
-        this.setupEventListeners();
-        // a11y: name the role="radio" element from its wrapping <label>.
-        this.applyLabelName(radioEl);
-    }
-    // Property accessors
-    get value() { return this.getProperty("value"); }
-    set value(v) { this.setProperty("value", v); }
-    get checked() { return this.getProperty("checked"); }
-    set checked(v) { this.setProperty("checked", v); }
-    get disabled() { return this.getProperty("disabled"); }
-    set disabled(v) { this.setProperty("disabled", v); }
-    get size() { return this.getProperty("size"); }
-    set size(v) { this.setProperty("size", v); }
-    get flavor() { return this.getProperty("flavor"); }
-    set flavor(v) { this.setProperty("flavor", v); }
+constructor() {
+super();
+this._customFlavorSheet = null;
+this._listenersSetup = false;
+this._clickHandler = null;
+this._focusHandler = null;
+this._blurHandler = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: radioStyles, id: "ty-radio" });
+}
+onConnect() {
+this.setupEventListeners();
+this.dispatchEvent(new CustomEvent("ty-radio-connected", { bubbles: true }));
+this._syncCustomFlavor();
+}
+onDisconnect() {
+this.removeEventListeners();
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "flavor")) {
+this._syncCustomFlavor();
+}
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => radioCustomFlavorCss(base));
+}
+buildClassList() {
+const classes = [this.size];
+if (this.disabled)
+classes.push("disabled");
+return classes.join(" ");
+}
+handleClick(e) {
+if (this.disabled)
+return;
+e.stopPropagation();
+this.dispatchEvent(new CustomEvent("ty-radio-select", {
+detail: { value: this.value },
+bubbles: true,
+composed: true,
+}));
+}
+removeEventListeners() {
+if (!this._listenersSetup)
+return;
+if (this._clickHandler) {
+this.removeEventListener("click", this._clickHandler);
+this._clickHandler = null;
+}
+const el = this.shadowRoot?.querySelector(".radio-container");
+if (!el) {
+this._listenersSetup = false;
+return;
+}
+if (this._focusHandler) {
+el.removeEventListener("focus", this._focusHandler);
+this._focusHandler = null;
+}
+if (this._blurHandler) {
+el.removeEventListener("blur", this._blurHandler);
+this._blurHandler = null;
+}
+this._listenersSetup = false;
+}
+setupEventListeners() {
+if (this._listenersSetup)
+return;
+const el = this.shadowRoot.querySelector(".radio-container");
+if (!el)
+return;
+this._clickHandler = (e) => this.handleClick(e);
+this._focusHandler = () => el.classList.add("focused");
+this._blurHandler = () => el.classList.remove("focused");
+this.addEventListener("click", this._clickHandler);
+el.addEventListener("focus", this._focusHandler);
+el.addEventListener("blur", this._blurHandler);
+this._listenersSetup = true;
+}
+render() {
+const shadow = this.shadowRoot;
+let radioEl = shadow.querySelector(".radio-container");
+const classes = this.buildClassList();
+if (!radioEl) {
+radioEl = document.createElement("div");
+radioEl.className = "radio-container " + classes;
+radioEl.tabIndex = this.disabled ? -1 : 0;
+radioEl.setAttribute("role", "radio");
+radioEl.setAttribute("aria-checked", String(this.checked));
+radioEl.setAttribute("aria-disabled", String(this.disabled));
+const circle = document.createElement("div");
+circle.className = "radio-circle";
+radioEl.appendChild(circle);
+shadow.appendChild(radioEl);
+}
+else {
+radioEl.className = "radio-container " + classes;
+radioEl.tabIndex = this.disabled ? -1 : 0;
+radioEl.setAttribute("aria-checked", String(this.checked));
+radioEl.setAttribute("aria-disabled", String(this.disabled));
+}
+this.setupEventListeners();
+this.applyLabelName(radioEl);
+}
+get value() { return this.getProperty("value"); }
+set value(v) { this.setProperty("value", v); }
+get checked() { return this.getProperty("checked"); }
+set checked(v) { this.setProperty("checked", v); }
+get disabled() { return this.getProperty("disabled"); }
+set disabled(v) { this.setProperty("disabled", v); }
+get size() { return this.getProperty("size"); }
+set size(v) { this.setProperty("size", v); }
+get flavor() { return this.getProperty("flavor"); }
+set flavor(v) { this.setProperty("flavor", v); }
 }
 TyRadio.properties = {
-    value: { type: "string", default: "" },
-    checked: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    size: {
-        type: "string",
-        visual: true,
-        default: "md",
-    },
-    flavor: {
-        type: "string",
-        visual: true,
-        default: "primary",
-    },
+value: { type: "string", default: "" },
+checked: {
+type: "boolean",
+visual: true,
+default: false,
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
+size: {
+type: "string",
+visual: true,
+default: DEFAULT_SIZE,
+},
+flavor: {
+type: "string",
+visual: true,
+default: "primary",
+},
 };
 if (!customElements.get("ty-radio")) {
-    customElements.define("ty-radio", TyRadio);
+customElements.define("ty-radio", TyRadio);
 }
 export class TyRadioGroup extends TyComponent {
-    constructor() {
-        super();
-        this._listenersSetup = false;
-        this._selectHandler = null;
-        this._keydownHandler = null;
-        this._connectedHandler = null;
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: radioStyles, id: "ty-radio-group" });
-    }
-    onConnect() {
-        // Re-arm listeners on RE-connect; no-op on first (setup runs in render too)
-        this.setupEventListeners();
-        // Sync radio children with current value once light DOM is ready.
-        // NOTE: during HTML parsing this runs before children are parsed — the
-        // ty-radio-connected listener covers late-arriving radios.
-        queueMicrotask(() => this.syncChildren());
-    }
-    onDisconnect() {
-        this.removeEventListeners();
-    }
-    onPropertiesChanged(changes) {
-        if (changes.some((c) => c.name === "value" || c.name === "size" || c.name === "flavor" || c.name === "disabled")) {
-            this.syncChildren();
-        }
-    }
-    getFormValue() {
-        return this.value || null;
-    }
-    /**
-     * Find ty-radio descendants in this group's light DOM. Searches deeply
-     * because consumers may wrap each radio in a `<label>` for click delegation.
-     */
-    getRadios() {
-        return Array.from(this.querySelectorAll("ty-radio"));
-    }
-    /**
-     * Push group state down to each radio child.
-     */
-    syncChildren() {
-        const radios = this.getRadios();
-        for (const radio of radios) {
-            radio.checked = radio.value === this.value;
-            // Inherit size/flavor/disabled from group unless radio set its own
-            if (this.disabled)
-                radio.disabled = true;
-            radio.size = this.size;
-            radio.flavor = this.flavor;
-        }
-    }
-    /**
-     * Handle a child's select request — update value, sync, emit change.
-     */
-    handleRadioSelect(e) {
-        if (this.disabled)
-            return;
-        const detail = e.detail;
-        const newValue = detail?.value;
-        if (typeof newValue !== "string" || newValue === this.value)
-            return;
-        this.value = newValue;
-        this.syncChildren();
-        setTimeout(() => {
-            const eventDetail = {
-                value: newValue,
-                formValue: newValue,
-                originalEvent: e,
-            };
-            this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true, composed: true }));
-            this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
-        }, 0);
-    }
-    /**
-     * Arrow-key navigation within group (W3C radio practice: arrow keys move
-     * focus and selection together).
-     */
-    handleKeydown(e) {
-        if (this.disabled)
-            return;
-        const radios = this.getRadios().filter((r) => !r.disabled);
-        if (radios.length === 0)
-            return;
-        const active = document.activeElement;
-        const current = radios.find((r) => r === active || r.contains(active));
-        let nextIndex = -1;
-        if (["ArrowDown", "ArrowRight"].includes(e.key)) {
-            e.preventDefault();
-            nextIndex = current ? (radios.indexOf(current) + 1) % radios.length : 0;
-        }
-        else if (["ArrowUp", "ArrowLeft"].includes(e.key)) {
-            e.preventDefault();
-            nextIndex = current
-                ? (radios.indexOf(current) - 1 + radios.length) % radios.length
-                : radios.length - 1;
-        }
-        else if (["Space", " ", "Enter"].includes(e.key)) {
-            if (current) {
-                e.preventDefault();
-                this.value = current.value;
-                this.syncChildren();
-                const eventDetail = {
-                    value: current.value,
-                    formValue: current.value,
-                    originalEvent: e,
-                };
-                setTimeout(() => {
-                    this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
-                }, 0);
-            }
-            return;
-        }
-        else {
-            return;
-        }
-        const next = radios[nextIndex];
-        if (next) {
-            next.focus();
-            // Per W3C: arrow keys also change selection
-            this.value = next.value;
-            this.syncChildren();
-            const eventDetail = {
-                value: next.value,
-                formValue: next.value,
-                originalEvent: e,
-            };
-            setTimeout(() => {
-                this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
-            }, 0);
-        }
-    }
-    removeEventListeners() {
-        if (!this._listenersSetup)
-            return;
-        if (this._selectHandler) {
-            this.removeEventListener("ty-radio-select", this._selectHandler);
-            this._selectHandler = null;
-        }
-        if (this._keydownHandler) {
-            this.removeEventListener("keydown", this._keydownHandler);
-            this._keydownHandler = null;
-        }
-        if (this._connectedHandler) {
-            this.removeEventListener("ty-radio-connected", this._connectedHandler);
-            this._connectedHandler = null;
-        }
-        this._listenersSetup = false;
-    }
-    setupEventListeners() {
-        if (this._listenersSetup)
-            return;
-        this._selectHandler = (e) => this.handleRadioSelect(e);
-        this._keydownHandler = (e) => this.handleKeydown(e);
-        // Radios announce themselves on connect — re-sync so radios parsed AFTER
-        // the group's own onConnect still receive the group's value/size/flavor.
-        this._connectedHandler = () => this.syncChildren();
-        this.addEventListener("ty-radio-select", this._selectHandler);
-        this.addEventListener("keydown", this._keydownHandler);
-        this.addEventListener("ty-radio-connected", this._connectedHandler);
-        this._listenersSetup = true;
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        let container = shadow.querySelector(".radio-group-container");
-        if (!container) {
-            container = document.createElement("div");
-            container.className = "radio-group-container";
-            container.setAttribute("role", "radiogroup");
-            container.setAttribute("aria-disabled", String(this.disabled));
-            // Label
-            if (this.label) {
-                const labelEl = document.createElement("div");
-                labelEl.className = "radio-group-label";
-                labelEl.textContent = this.label;
-                if (this.required) {
-                    const req = document.createElement("span");
-                    req.className = "required-icon";
-                    req.innerHTML = REQUIRED_ICON_SVG;
-                    labelEl.appendChild(req);
-                }
-                container.appendChild(labelEl);
-            }
-            // List wrapper that hosts the slot
-            const list = document.createElement("div");
-            list.className = "radio-group-list " + this.orientation;
-            const slot = document.createElement("slot");
-            list.appendChild(slot);
-            container.appendChild(list);
-            if (this.error) {
-                const errorEl = document.createElement("div");
-                errorEl.className = "radio-group-error";
-                errorEl.textContent = this.error;
-                container.appendChild(errorEl);
-            }
-            shadow.appendChild(container);
-            this.setupEventListeners();
-        }
-        else {
-            // Update label
-            let labelEl = container.querySelector(".radio-group-label");
-            if (this.label) {
-                if (!labelEl) {
-                    labelEl = document.createElement("div");
-                    labelEl.className = "radio-group-label";
-                    container.insertBefore(labelEl, container.firstChild);
-                }
-                labelEl.textContent = this.label;
-                if (this.required && !labelEl.querySelector(".required-icon")) {
-                    const req = document.createElement("span");
-                    req.className = "required-icon";
-                    req.innerHTML = REQUIRED_ICON_SVG;
-                    labelEl.appendChild(req);
-                }
-                else if (!this.required) {
-                    labelEl.querySelector(".required-icon")?.remove();
-                }
-            }
-            else if (labelEl) {
-                labelEl.remove();
-            }
-            // Update orientation
-            const list = container.querySelector(".radio-group-list");
-            if (list)
-                list.className = "radio-group-list " + this.orientation;
-            // Update error
-            let errorEl = container.querySelector(".radio-group-error");
-            if (this.error) {
-                if (!errorEl) {
-                    errorEl = document.createElement("div");
-                    errorEl.className = "radio-group-error";
-                    container.appendChild(errorEl);
-                }
-                errorEl.textContent = this.error;
-            }
-            else if (errorEl) {
-                errorEl.remove();
-            }
-            container.setAttribute("aria-disabled", String(this.disabled));
-        }
-        // Always sync child radios after render
-        this.syncChildren();
-    }
-    // Property accessors
-    get value() { return this.getProperty("value"); }
-    set value(v) { this.setProperty("value", v); }
-    get name() { return this.getProperty("name"); }
-    set name(v) { this.setProperty("name", v); }
-    get label() { return this.getProperty("label"); }
-    set label(v) { this.setProperty("label", v); }
-    get disabled() { return this.getProperty("disabled"); }
-    set disabled(v) { this.setProperty("disabled", v); }
-    get required() { return this.getProperty("required"); }
-    set required(v) { this.setProperty("required", v); }
-    get error() { return this.getProperty("error"); }
-    set error(v) { this.setProperty("error", v); }
-    get orientation() {
-        return this.getProperty("orientation");
-    }
-    set orientation(v) {
-        this.setProperty("orientation", v);
-    }
-    get size() { return this.getProperty("size"); }
-    set size(v) { this.setProperty("size", v); }
-    get flavor() { return this.getProperty("flavor"); }
-    set flavor(v) { this.setProperty("flavor", v); }
-    get form() { return this._internals.form; }
+constructor() {
+super();
+this._listenersSetup = false;
+this._selectHandler = null;
+this._keydownHandler = null;
+this._connectedHandler = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: radioStyles, id: "ty-radio-group" });
+}
+onConnect() {
+this.setupEventListeners();
+queueMicrotask(() => this.syncChildren());
+}
+onDisconnect() {
+this.removeEventListeners();
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "value" || c.name === "size" || c.name === "flavor" || c.name === "disabled")) {
+this.syncChildren();
+}
+}
+getFormValue() {
+return this.value || null;
+}
+getRadios() {
+return Array.from(this.querySelectorAll("ty-radio"));
+}
+syncChildren() {
+const radios = this.getRadios();
+for (const radio of radios) {
+radio.checked = radio.value === this.value;
+if (this.disabled) {
+if (!radio.disabled) {
+radio.disabled = true;
+radio.dataset.tyGroupDisabled = "";
+}
+}
+else if ("tyGroupDisabled" in radio.dataset) {
+radio.disabled = false;
+delete radio.dataset.tyGroupDisabled;
+}
+radio.size = this.size;
+radio.flavor = this.flavor;
+}
+}
+handleRadioSelect(e) {
+if (this.disabled)
+return;
+const detail = e.detail;
+const newValue = detail?.value;
+if (typeof newValue !== "string" || newValue === this.value)
+return;
+this.value = newValue;
+this.syncChildren();
+setTimeout(() => {
+const eventDetail = {
+value: newValue,
+formValue: newValue,
+originalEvent: e,
+};
+this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true, composed: true }));
+this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
+}, 0);
+}
+handleKeydown(e) {
+if (this.disabled)
+return;
+const radios = this.getRadios().filter((r) => !r.disabled);
+if (radios.length === 0)
+return;
+const active = document.activeElement;
+const current = radios.find((r) => r === active || r.contains(active));
+let nextIndex = -1;
+if (["ArrowDown", "ArrowRight"].includes(e.key)) {
+e.preventDefault();
+nextIndex = current ? (radios.indexOf(current) + 1) % radios.length : 0;
+}
+else if (["ArrowUp", "ArrowLeft"].includes(e.key)) {
+e.preventDefault();
+nextIndex = current
+? (radios.indexOf(current) - 1 + radios.length) % radios.length
+: radios.length - 1;
+}
+else if (["Space", " ", "Enter"].includes(e.key)) {
+if (current) {
+e.preventDefault();
+this.value = current.value;
+this.syncChildren();
+const eventDetail = {
+value: current.value,
+formValue: current.value,
+originalEvent: e,
+};
+setTimeout(() => {
+this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
+}, 0);
+}
+return;
+}
+else {
+return;
+}
+const next = radios[nextIndex];
+if (next) {
+next.focus();
+this.value = next.value;
+this.syncChildren();
+const eventDetail = {
+value: next.value,
+formValue: next.value,
+originalEvent: e,
+};
+setTimeout(() => {
+this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
+}, 0);
+}
+}
+removeEventListeners() {
+if (!this._listenersSetup)
+return;
+if (this._selectHandler) {
+this.removeEventListener("ty-radio-select", this._selectHandler);
+this._selectHandler = null;
+}
+if (this._keydownHandler) {
+this.removeEventListener("keydown", this._keydownHandler);
+this._keydownHandler = null;
+}
+if (this._connectedHandler) {
+this.removeEventListener("ty-radio-connected", this._connectedHandler);
+this._connectedHandler = null;
+}
+this._listenersSetup = false;
+}
+setupEventListeners() {
+if (this._listenersSetup)
+return;
+this._selectHandler = (e) => this.handleRadioSelect(e);
+this._keydownHandler = (e) => this.handleKeydown(e);
+this._connectedHandler = () => this.syncChildren();
+this.addEventListener("ty-radio-select", this._selectHandler);
+this.addEventListener("keydown", this._keydownHandler);
+this.addEventListener("ty-radio-connected", this._connectedHandler);
+this._listenersSetup = true;
+}
+render() {
+const shadow = this.shadowRoot;
+let container = shadow.querySelector(".radio-group-container");
+if (!container) {
+container = document.createElement("div");
+container.className = "radio-group-container";
+container.setAttribute("role", "radiogroup");
+container.setAttribute("aria-disabled", String(this.disabled));
+if (this.label) {
+const labelEl = document.createElement("div");
+labelEl.className = "radio-group-label";
+labelEl.textContent = this.label;
+if (this.required) {
+const req = document.createElement("span");
+req.className = "required-icon";
+req.innerHTML = REQUIRED_ICON_SVG;
+labelEl.appendChild(req);
+}
+container.appendChild(labelEl);
+}
+const list = document.createElement("div");
+list.className = "radio-group-list " + this.orientation;
+const slot = document.createElement("slot");
+list.appendChild(slot);
+container.appendChild(list);
+if (this.error) {
+const errorEl = document.createElement("div");
+errorEl.className = "radio-group-error";
+errorEl.textContent = this.error;
+container.appendChild(errorEl);
+}
+shadow.appendChild(container);
+this.setupEventListeners();
+}
+else {
+let labelEl = container.querySelector(".radio-group-label");
+if (this.label) {
+if (!labelEl) {
+labelEl = document.createElement("div");
+labelEl.className = "radio-group-label";
+container.insertBefore(labelEl, container.firstChild);
+}
+labelEl.textContent = this.label;
+if (this.required && !labelEl.querySelector(".required-icon")) {
+const req = document.createElement("span");
+req.className = "required-icon";
+req.innerHTML = REQUIRED_ICON_SVG;
+labelEl.appendChild(req);
+}
+else if (!this.required) {
+labelEl.querySelector(".required-icon")?.remove();
+}
+}
+else if (labelEl) {
+labelEl.remove();
+}
+const list = container.querySelector(".radio-group-list");
+if (list)
+list.className = "radio-group-list " + this.orientation;
+let errorEl = container.querySelector(".radio-group-error");
+if (this.error) {
+if (!errorEl) {
+errorEl = document.createElement("div");
+errorEl.className = "radio-group-error";
+container.appendChild(errorEl);
+}
+errorEl.textContent = this.error;
+}
+else if (errorEl) {
+errorEl.remove();
+}
+container.setAttribute("aria-disabled", String(this.disabled));
+}
+this.syncChildren();
+}
+get value() { return this.getProperty("value"); }
+set value(v) { this.setProperty("value", v); }
+get name() { return this.getProperty("name"); }
+set name(v) { this.setProperty("name", v); }
+get label() { return this.getProperty("label"); }
+set label(v) { this.setProperty("label", v); }
+get disabled() { return this.getProperty("disabled"); }
+set disabled(v) { this.setProperty("disabled", v); }
+get required() { return this.getProperty("required"); }
+set required(v) { this.setProperty("required", v); }
+get error() { return this.getProperty("error"); }
+set error(v) { this.setProperty("error", v); }
+get orientation() {
+return this.getProperty("orientation");
+}
+set orientation(v) {
+this.setProperty("orientation", v);
+}
+get size() { return this.getProperty("size"); }
+set size(v) { this.setProperty("size", v); }
+get flavor() { return this.getProperty("flavor"); }
+set flavor(v) { this.setProperty("flavor", v); }
+get form() { return this._internals.form; }
 }
 TyRadioGroup.formAssociated = true;
 TyRadioGroup.properties = {
-    value: {
-        type: "string",
-        visual: true,
-        formValue: true,
-        emitChange: true,
-        default: "",
-    },
-    name: { type: "string", default: "" },
-    label: { type: "string", visual: true, default: "" },
-    disabled: { type: "boolean", visual: true, default: false },
-    required: { type: "boolean", visual: true, default: false },
-    error: { type: "string", visual: true, default: "" },
-    orientation: {
-        type: "string",
-        visual: true,
-        default: "vertical",
-    },
-    size: {
-        type: "string",
-        visual: true,
-        default: "md",
-    },
-    flavor: {
-        type: "string",
-        visual: true,
-        default: "primary",
-    },
+value: {
+type: "string",
+visual: true,
+formValue: true,
+emitChange: true,
+default: "",
+},
+name: { type: "string", default: "" },
+label: { type: "string", visual: true, default: "" },
+disabled: { type: "boolean", visual: true, default: false },
+required: { type: "boolean", visual: true, default: false },
+error: { type: "string", visual: true, default: "" },
+orientation: {
+type: "string",
+visual: true,
+default: "vertical",
+},
+size: {
+type: "string",
+visual: true,
+default: DEFAULT_SIZE,
+},
+flavor: {
+type: "string",
+visual: true,
+default: "primary",
+},
 };
 if (!customElements.get("ty-radio-group")) {
-    customElements.define("ty-radio-group", TyRadioGroup);
+customElements.define("ty-radio-group", TyRadioGroup);
 }
-//# sourceMappingURL=radio.js.map