igniteui-webcomponents 4.3.1 → 4.4.0

package/components/radio/radio.js

@@ -14,57 +14,119 @@ import { alternateName } from '../common/decorators/alternateName.js';
 import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
 import { watch } from '../common/decorators/watch.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { createCounter, partNameMap } from '../common/util.js';
+import { any, createCounter, isLTR, partNameMap, wrap, } from '../common/util.js';
 import { styles } from './themes/light/radio.base.css.js';
 import { styles as bootstrap } from './themes/light/radio.bootstrap.css.js';
 import { styles as fluent } from './themes/light/radio.fluent.css.js';
 import { styles as indigo } from './themes/light/radio.indigo.css.js';
 import { styles as material } from './themes/light/radio.material.css.js';
-let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends EventEmitterMixin(LitElement) {
+import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
+import messages from '../common/localization/validation-en.js';
+const arrowKeys = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
+const arrowKeyDelta = new Map(Object.entries({
+    ArrowUp: () => -1,
+    ArrowLeft: (ltr) => (ltr ? -1 : 1),
+    ArrowRight: (ltr) => (ltr ? 1 : -1),
+    ArrowDown: () => 1,
+}));
+let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(LitElement)) {
+    get radioGroup() {
+        const radios = Array.from(document.querySelectorAll(`${this.tagName}[name='${this.name}']`));
+        const nonDisabled = [];
+        const siblings = [];
+        for (const radio of radios) {
+            if (!radio.disabled) {
+                nonDisabled.push(radio);
+            }
+            if (!radio.isSameNode(this)) {
+                siblings.push(radio);
+            }
+        }
+        return { radios, nonDisabled, siblings };
+    }
+    setDefaultValue() {
+        const firstChecked = this.radioGroup.radios.find((r) => r.checked);
+        if (firstChecked && firstChecked.isSameNode(this)) {
+            this._defaultValue = true;
+        }
+        else {
+            this._defaultValue = false;
+        }
+    }
     constructor() {
-        super(...arguments);
+        super();
+        this.validators = [
+            {
+                key: 'valueMissing',
+                message: messages.required,
+                isValid: () => {
+                    const { radios } = this.radioGroup;
+                    return any(radios, 'required') ? any(radios, 'checked') : true;
+                },
+            },
+        ];
         this.inputId = `radio-${IgcRadioComponent_1.increment()}`;
         this.labelId = `radio-label-${this.inputId}`;
         this._tabIndex = 0;
         this.focused = false;
         this.hideLabel = false;
-        this.required = false;
         this.checked = false;
-        this.disabled = false;
-        this.invalid = false;
         this.labelPosition = 'after';
+        this.addEventListener('keyup', this.handleKeyUp);
+        this.addEventListener('keydown', this.handleKeyDown);
     }
     click() {
         this.input.click();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keyup', this.handleKeyUp);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('keyup', this.handleKeyUp);
-        super.disconnectedCallback();
-    }
-    handleKeyUp() {
-        if (!this.focused) {
-            this.focused = true;
-        }
-    }
     focus(options) {
         this.input.focus(options);
     }
     blur() {
         this.input.blur();
     }
-    reportValidity() {
-        return this.input.reportValidity();
+    setCustomValidity(message) {
+        const { radios } = this.radioGroup;
+        for (const radio of radios) {
+            radio.updateValidity(message);
+            radio.setInvalidState();
+        }
     }
-    checkValidity() {
-        return this.input.checkValidity();
+    requiredChange() {
+        const { radios } = this.radioGroup;
+        for (const radio of radios) {
+            radio.updateValidity();
+            radio.setInvalidState();
+        }
     }
-    setCustomValidity(message) {
-        this.input.setCustomValidity(message);
-        this.invalid = !this.input.checkValidity();
+    _updateCheckedState() {
+        var _a;
+        const siblings = this.radioGroup.siblings;
+        this.setFormValue(this.value || 'on');
+        this.updateValidity();
+        this.setInvalidState();
+        this._tabIndex = 0;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        for (const radio of siblings) {
+            radio.checked = false;
+            radio._tabIndex = -1;
+            radio.updateValidity();
+            radio.setInvalidState();
+        }
+    }
+    _updateUncheckedState() {
+        const siblings = this.radioGroup.siblings;
+        this.setFormValue(null);
+        this.updateValidity();
+        this.setInvalidState();
+        if (this.hasUpdated) {
+            this._tabIndex = -1;
+        }
+        for (const radio of siblings) {
+            radio.updateValidity();
+        }
+    }
+    checkedChanged() {
+        this.checked ? this._updateCheckedState() : this._updateUncheckedState();
     }
     handleMouseDown(event) {
         event.preventDefault();
@@ -73,6 +135,7 @@ let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends Ev
     }
     handleClick() {
         this.checked = true;
+        this.emitEvent('igcChange', { detail: this.checked });
     }
     handleBlur() {
         this.emitEvent('igcBlur');
@@ -81,79 +144,66 @@ let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends Ev
     handleFocus() {
         this.emitEvent('igcFocus');
     }
-    handleChange() {
-        if (this.checked) {
-            this.getSiblings().forEach((radio) => {
-                radio.checked = false;
-                radio._tabIndex = -1;
-            });
-            this.input.focus();
-            this._tabIndex = 0;
-            this.emitEvent('igcChange', { detail: this.checked });
-        }
-        else {
-            if (this.required) {
-                this.required = false;
-                this.getAllInGroup()[0].required = true;
-            }
+    handleKeyUp() {
+        if (!this.focused) {
+            this.focused = true;
         }
     }
-    getSiblings() {
-        return this.getAllInGroup().filter((radio) => radio.name === this.name && radio !== this);
-    }
-    getAllInGroup() {
-        const group = this.closest('igc-radio-group');
-        if (!group)
-            return [];
-        return Array.from(group.querySelectorAll('igc-radio'));
+    handleKeyDown(event) {
+        if (!arrowKeys.has(event.key))
+            return;
+        event.preventDefault();
+        const { nonDisabled } = this.radioGroup;
+        const LTR = isLTR(this);
+        const idx = wrap(0, nonDisabled.length - 1, nonDisabled.indexOf(this) + arrowKeyDelta.get(event.key)(LTR));
+        const target = nonDisabled[idx];
+        target.focus();
+        target.checked = true;
+        target.emitEvent('igcChange', { detail: target.checked });
     }
-    async firstUpdated() {
-        if (this.label.length === 0) {
-            this.hideLabel = true;
-        }
-        await this.updateComplete;
+    handleSlotChange() {
+        this.hideLabel = this.label.length < 1;
     }
     render() {
+        const labelledBy = this.getAttribute('aria-labelledby');
         return html `
       <label
-        part="${partNameMap({
+        part=${partNameMap({
             base: true,
             checked: this.checked,
             focused: this.focused,
-        })}"
-        for="${this.inputId}"
-        @pointerdown="${this.handleMouseDown}"
+        })}
+        for=${this.inputId}
+        @pointerdown=${this.handleMouseDown}
       >
         <input
-          id="${this.inputId}"
+          id=${this.inputId}
           type="radio"
-          name="${ifDefined(this.name)}"
-          value="${ifDefined(this.value)}"
-          .required="${this.required}"
-          .disabled="${this.disabled}"
-          .checked="${live(this.checked)}"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .checked=${live(this.checked)}
           tabindex=${this._tabIndex}
-          aria-checked="${this.checked ? 'true' : 'false'}"
-          aria-disabled="${this.disabled ? 'true' : 'false'}"
-          aria-labelledby="${this.ariaLabelledby
-            ? this.ariaLabelledby
-            : this.labelId}"
-          @click="${this.handleClick}"
-          @blur="${this.handleBlur}"
-          @focus="${this.handleFocus}"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          aria-labelledby=${labelledBy ? labelledBy : this.labelId}
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
         />
-        <span part="${partNameMap({ control: true, checked: this.checked })}">
+        <span part=${partNameMap({ control: true, checked: this.checked })}>
           <span
-            .hidden="${this.disabled}"
-            part="${partNameMap({ ripple: true, checked: this.checked })}"
+            .hidden=${this.disabled}
+            part=${partNameMap({ ripple: true, checked: this.checked })}
           ></span>
         </span>
         <span
-          .hidden="${this.hideLabel}"
-          part="${partNameMap({ label: true, checked: this.checked })}"
-          id="${this.labelId}"
+          .hidden=${this.hideLabel}
+          part=${partNameMap({ label: true, checked: this.checked })}
+          id=${this.labelId}
         >
-          <slot></slot>
+          <slot @slotchange=${this.handleSlotChange}></slot>
         </span>
       </label>
     `;
@@ -163,7 +213,7 @@ IgcRadioComponent.tagName = 'igc-radio';
 IgcRadioComponent.styles = styles;
 IgcRadioComponent.increment = createCounter();
 __decorate([
-    query('input[type="radio"]', true)
+    query('input[type="radio"]')
 ], IgcRadioComponent.prototype, "input", void 0);
 __decorate([
     queryAssignedNodes({ flatten: true })
@@ -177,31 +227,16 @@ __decorate([
 __decorate([
     state()
 ], IgcRadioComponent.prototype, "hideLabel", void 0);
-__decorate([
-    property()
-], IgcRadioComponent.prototype, "name", void 0);
 __decorate([
     property()
 ], IgcRadioComponent.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRadioComponent.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
     blazorTwoWayBind('igcChange', 'detail')
 ], IgcRadioComponent.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRadioComponent.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRadioComponent.prototype, "invalid", void 0);
 __decorate([
     property({ reflect: true, attribute: 'label-position' })
 ], IgcRadioComponent.prototype, "labelPosition", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'aria-labelledby' })
-], IgcRadioComponent.prototype, "ariaLabelledby", void 0);
 __decorate([
     alternateName('focusComponent')
 ], IgcRadioComponent.prototype, "focus", null);
@@ -209,8 +244,11 @@ __decorate([
     alternateName('blurComponent')
 ], IgcRadioComponent.prototype, "blur", null);
 __decorate([
-    watch('checked', { waitUntilFirstUpdate: true })
-], IgcRadioComponent.prototype, "handleChange", null);
+    watch('required', { waitUntilFirstUpdate: true })
+], IgcRadioComponent.prototype, "requiredChange", null);
+__decorate([
+    watch('checked')
+], IgcRadioComponent.prototype, "checkedChanged", null);
 IgcRadioComponent = IgcRadioComponent_1 = __decorate([
     themes({ material, bootstrap, fluent, indigo })
 ], IgcRadioComponent);

package/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { createCounter, partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/radio.base.css.js';\nimport { styles as bootstrap } from './themes/light/radio.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/radio.fluent.css.js';\nimport { styles as indigo } from './themes/light/radio.indigo.css.js';\nimport { styles as material } from './themes/light/radio.material.css.js';\n\nexport interface IgcRadioEventMap {\n  igcChange: CustomEvent<boolean>;\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcFocus - Emitted when the control gains focus.\n * @fires igcBlur - Emitted when the control loses focus.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio control.\n * @csspart label - The radio control label.\n */\n@themes({ material, bootstrap, fluent, indigo })\nexport default class IgcRadioComponent extends EventEmitterMixin<\n  IgcRadioEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-radio';\n  protected static styles = styles;\n  private static readonly increment = createCounter();\n\n  private inputId = `radio-${IgcRadioComponent.increment()}`;\n  private labelId = `radio-label-${this.inputId}`;\n\n  @query('input[type=\"radio\"]', true)\n  protected input!: HTMLInputElement;\n\n  @queryAssignedNodes({ flatten: true })\n  protected label!: Array<Node>;\n\n  @state()\n  private _tabIndex = 0;\n\n  @state()\n  private focused = false;\n\n  @state()\n  protected hideLabel = false;\n\n  /**\n   * The name attribute of the control.\n   * @attr\n   */\n  @property()\n  public name!: string;\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * Makes the control a required field.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public required = false;\n\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  @blazorTwoWayBind('igcChange', 'detail')\n  public checked = false;\n\n  /**\n   * Disables the radio control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Controls the validity of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public invalid = false;\n\n  /**\n   * The label position of the radio control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: 'before' | 'after' = 'after';\n\n  /**\n   * Sets the aria-labelledby attribute for the radio control.\n   * @attr\n   */\n  @property({ reflect: true, attribute: 'aria-labelledby' })\n  public ariaLabelledby!: string;\n\n  /** Simulates a click on the radio control. */\n  public override click() {\n    this.input.click();\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  public override disconnectedCallback() {\n    this.removeEventListener('keyup', this.handleKeyUp);\n    super.disconnectedCallback();\n  }\n\n  protected handleKeyUp() {\n    if (!this.focused) {\n      this.focused = true;\n    }\n  }\n\n  /** Sets focus on the radio control. */\n  @alternateName('focusComponent')\n  public override focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio control. */\n  @alternateName('blurComponent')\n  public override blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  protected handleMouseDown(event: PointerEvent) {\n    event.preventDefault();\n    this.input.focus();\n    this.focused = false;\n  }\n\n  protected handleClick() {\n    this.checked = true;\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n    this.focused = false;\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  protected handleChange() {\n    if (this.checked) {\n      this.getSiblings().forEach((radio) => {\n        radio.checked = false;\n        radio._tabIndex = -1;\n      });\n      this.input.focus();\n      this._tabIndex = 0;\n      this.emitEvent('igcChange', { detail: this.checked });\n    } else {\n      if (this.required) {\n        this.required = false;\n        this.getAllInGroup()[0].required = true;\n      }\n    }\n  }\n\n  protected getSiblings() {\n    return this.getAllInGroup().filter(\n      (radio) => radio.name === this.name && radio !== this\n    );\n  }\n\n  protected getAllInGroup() {\n    const group = this.closest('igc-radio-group');\n    if (!group) return [];\n\n    return Array.from<IgcRadioComponent>(group.querySelectorAll('igc-radio'));\n  }\n\n  protected override async firstUpdated() {\n    if (this.label.length === 0) {\n      this.hideLabel = true;\n    }\n\n    await this.updateComplete;\n  }\n\n  protected override render() {\n    return html`\n      <label\n        part=\"${partNameMap({\n          base: true,\n          checked: this.checked,\n          focused: this.focused,\n        })}\"\n        for=\"${this.inputId}\"\n        @pointerdown=\"${this.handleMouseDown}\"\n      >\n        <input\n          id=\"${this.inputId}\"\n          type=\"radio\"\n          name=\"${ifDefined(this.name)}\"\n          value=\"${ifDefined(this.value)}\"\n          .required=\"${this.required}\"\n          .disabled=\"${this.disabled}\"\n          .checked=\"${live(this.checked)}\"\n          tabindex=${this._tabIndex}\n          aria-checked=\"${this.checked ? 'true' : 'false'}\"\n          aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n          aria-labelledby=\"${this.ariaLabelledby\n            ? this.ariaLabelledby\n            : this.labelId}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @focus=\"${this.handleFocus}\"\n        />\n        <span part=\"${partNameMap({ control: true, checked: this.checked })}\">\n          <span\n            .hidden=\"${this.disabled}\"\n            part=\"${partNameMap({ ripple: true, checked: this.checked })}\"\n          ></span>\n        </span>\n        <span\n          .hidden=\"${this.hideLabel}\"\n          part=\"${partNameMap({ label: true, checked: this.checked })}\"\n          id=\"${this.labelId}\"\n        >\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio': IgcRadioComponent;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n  any,\n  createCounter,\n  isLTR,\n  partNameMap,\n  wrap,\n} from '../common/util.js';\nimport { styles } from './themes/light/radio.base.css.js';\nimport { styles as bootstrap } from './themes/light/radio.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/radio.fluent.css.js';\nimport { styles as indigo } from './themes/light/radio.indigo.css.js';\nimport { styles as material } from './themes/light/radio.material.css.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';\nimport messages from '../common/localization/validation-en.js';\nimport { Validator } from '../common/validators.js';\n\nexport interface IgcRadioEventMap {\n  igcChange: CustomEvent<boolean>;\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\nconst arrowKeys = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);\nconst arrowKeyDelta = new Map(\n  Object.entries({\n    ArrowUp: () => -1,\n    ArrowLeft: (ltr?: boolean) => (ltr ? -1 : 1),\n    ArrowRight: (ltr?: boolean) => (ltr ? 1 : -1),\n    ArrowDown: () => 1,\n  })\n);\n\ntype RadioQueryResult = {\n  /** All the radio components under the same name */\n  radios: IgcRadioComponent[];\n  /** All the radio components under the same name which are not disabled */\n  nonDisabled: IgcRadioComponent[];\n  /** All the radio components under the same name except the caller */\n  siblings: IgcRadioComponent[];\n};\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcFocus - Emitted when the control gains focus.\n * @fires igcBlur - Emitted when the control loses focus.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio control.\n * @csspart label - The radio control label.\n */\n@themes({ material, bootstrap, fluent, indigo })\nexport default class IgcRadioComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<IgcRadioEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-radio';\n  protected static styles = styles;\n  private static readonly increment = createCounter();\n\n  protected override validators: Validator<this>[] = [\n    {\n      key: 'valueMissing',\n      message: messages.required,\n      isValid: () => {\n        const { radios } = this.radioGroup;\n        return any(radios, 'required') ? any(radios, 'checked') : true;\n      },\n    },\n  ];\n\n  private inputId = `radio-${IgcRadioComponent.increment()}`;\n  private labelId = `radio-label-${this.inputId}`;\n\n  @query('input[type=\"radio\"]')\n  protected input!: HTMLInputElement;\n\n  @queryAssignedNodes({ flatten: true })\n  protected label!: Array<Node>;\n\n  @state()\n  private _tabIndex = 0;\n\n  @state()\n  private focused = false;\n\n  @state()\n  protected hideLabel = false;\n\n  private get radioGroup(): RadioQueryResult {\n    const radios: IgcRadioComponent[] = Array.from(\n      document.querySelectorAll(`${this.tagName}[name='${this.name}']`)\n    );\n    const nonDisabled = [];\n    const siblings = [];\n\n    for (const radio of radios) {\n      if (!radio.disabled) {\n        nonDisabled.push(radio);\n      }\n      if (!radio.isSameNode(this)) {\n        siblings.push(radio);\n      }\n    }\n\n    return { radios, nonDisabled, siblings };\n  }\n\n  protected override setDefaultValue(): void {\n    const firstChecked = this.radioGroup.radios.find((r) => r.checked);\n    if (firstChecked && firstChecked.isSameNode(this)) {\n      this._defaultValue = true;\n    } else {\n      this._defaultValue = false;\n    }\n  }\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  @blazorTwoWayBind('igcChange', 'detail')\n  public checked = false;\n\n  /**\n   * The label position of the radio control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: 'before' | 'after' = 'after';\n\n  constructor() {\n    super();\n    this.addEventListener('keyup', this.handleKeyUp);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  /** Simulates a click on the radio control. */\n  public override click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the radio control. */\n  @alternateName('focusComponent')\n  public override focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio control. */\n  @alternateName('blurComponent')\n  public override blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public override setCustomValidity(message: string): void {\n    const { radios } = this.radioGroup;\n\n    for (const radio of radios) {\n      radio.updateValidity(message);\n      radio.setInvalidState();\n    }\n  }\n\n  @watch('required', { waitUntilFirstUpdate: true })\n  protected override requiredChange(): void {\n    const { radios } = this.radioGroup;\n\n    for (const radio of radios) {\n      radio.updateValidity();\n      radio.setInvalidState();\n    }\n  }\n\n  private _updateCheckedState() {\n    const siblings = this.radioGroup.siblings;\n\n    this.setFormValue(this.value || 'on');\n    this.updateValidity();\n    this.setInvalidState();\n\n    this._tabIndex = 0;\n    this.input?.focus();\n\n    for (const radio of siblings) {\n      radio.checked = false;\n      radio._tabIndex = -1;\n      radio.updateValidity();\n      radio.setInvalidState();\n    }\n  }\n\n  private _updateUncheckedState() {\n    const siblings = this.radioGroup.siblings;\n\n    this.setFormValue(null);\n    this.updateValidity();\n    this.setInvalidState();\n\n    if (this.hasUpdated) {\n      this._tabIndex = -1;\n    }\n\n    for (const radio of siblings) {\n      radio.updateValidity();\n    }\n  }\n\n  @watch('checked')\n  protected checkedChanged() {\n    this.checked ? this._updateCheckedState() : this._updateUncheckedState();\n  }\n\n  protected handleMouseDown(event: PointerEvent) {\n    event.preventDefault();\n    this.input.focus();\n    this.focused = false;\n  }\n\n  protected handleClick() {\n    this.checked = true;\n    this.emitEvent('igcChange', { detail: this.checked });\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n    this.focused = false;\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  protected handleKeyUp() {\n    if (!this.focused) {\n      this.focused = true;\n    }\n  }\n\n  protected handleKeyDown(event: KeyboardEvent) {\n    if (!arrowKeys.has(event.key)) return;\n\n    event.preventDefault();\n\n    const { nonDisabled } = this.radioGroup;\n    const LTR = isLTR(this);\n    const idx = wrap(\n      0,\n      nonDisabled.length - 1,\n      nonDisabled.indexOf(this) + arrowKeyDelta.get(event.key)!(LTR)\n    );\n\n    const target = nonDisabled[idx];\n    target.focus();\n    target.checked = true;\n    target.emitEvent('igcChange', { detail: target.checked });\n  }\n\n  protected handleSlotChange() {\n    this.hideLabel = this.label.length < 1;\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n\n    return html`\n      <label\n        part=${partNameMap({\n          base: true,\n          checked: this.checked,\n          focused: this.focused,\n        })}\n        for=${this.inputId}\n        @pointerdown=${this.handleMouseDown}\n      >\n        <input\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          .required=${this.required}\n          .disabled=${this.disabled}\n          .checked=${live(this.checked)}\n          tabindex=${this._tabIndex}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-labelledby=${labelledBy ? labelledBy : this.labelId}\n          @click=${this.handleClick}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n        />\n        <span part=${partNameMap({ control: true, checked: this.checked })}>\n          <span\n            .hidden=${this.disabled}\n            part=${partNameMap({ ripple: true, checked: this.checked })}\n          ></span>\n        </span>\n        <span\n          .hidden=${this.hideLabel}\n          part=${partNameMap({ label: true, checked: this.checked })}\n          id=${this.labelId}\n        >\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio': IgcRadioComponent;\n  }\n}\n"]}

package/components/radio/themes/light/radio.bootstrap.css.js

@@ -1,37 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --hover-color: var(--ig-radio-hover-color, transparent);
   --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
@@ -101,16 +69,20 @@ export const styles = css `:host {
   background: var(--fill-hover-border-color);
 }
 
-:host(:not([disabled])[invalid]) [part~=label] {
+:host(:not([disabled])[invalid]) [part~=label],
+:host(:not(:disabled)[invalid]) [part~=label] {
   color: var(--error-color);
 }
-:host(:not([disabled])[invalid]) [part~=control]::after {
+:host(:not([disabled])[invalid]) [part~=control]::after,
+:host(:not(:disabled)[invalid]) [part~=control]::after {
   border-color: var(--error-color);
 }
-:host(:not([disabled])[invalid]) [part="control checked"]::after {
+:host(:not([disabled])[invalid]) [part="control checked"]::after,
+:host(:not(:disabled)[invalid]) [part="control checked"]::after {
   background: var(--error-color);
 }
-:host(:not([disabled])[invalid]) [part~=focused] [part~=control] {
+:host(:not([disabled])[invalid]) [part~=focused] [part~=control],
+:host(:not(:disabled)[invalid]) [part~=focused] [part~=control] {
   -webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);
           box-shadow: 0 0 0 0.125rem var(--error-color-hover);
 }

package/components/radio/themes/light/radio.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --hover-color: var(--ig-radio-hover-color, transparent);\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-100), var(--ig-error-a)));\n  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n}\n:host::part(base) {\n  -webkit-transition: none;\n  transition: none;\n}\n\n[part~=label] {\n  color: var(--label-color);\n}\n\n[part~=base] {\n  gap: 0.5rem;\n}\n\n[part~=control] {\n  --size: 1rem;\n  border-radius: var(--size);\n  width: var(--size);\n  height: var(--size);\n  min-width: var(--size);\n  background: none;\n  -webkit-transition: transparent;\n  transition: transparent;\n}\n[part~=control]::before, [part~=control]::after {\n  -webkit-transition: none;\n  transition: none;\n  border-radius: calc(var(--size) / 2);\n}\n[part~=control]::before {\n  -webkit-transform: translate(-50%, -50%) scale(0.375);\n      -ms-transform: translate(-50%, -50%) scale(0.375);\n          transform: translate(-50%, -50%) scale(0.375);\n}\n[part~=control]::after {\n  width: inherit;\n  height: inherit;\n  min-width: inherit;\n  border: 0.0625rem solid var(--empty-color);\n}\n\n[part~=focused] [part~=control] {\n  -webkit-box-shadow: 0 0 0 0.125rem var(--focus-outline-color);\n          box-shadow: 0 0 0 0.125rem var(--focus-outline-color);\n}\n[part~=focused] [part~=control]::after {\n  border-color: var(--fill-color);\n}\n\n[part=\"control checked\"]::after {\n  background: var(--fill-color);\n  border-color: var(--fill-color);\n}\n[part=\"control checked\"]::before {\n  border-color: var(--fill-hover-border-color);\n  background: var(--fill-hover-border-color);\n}\n\n:host(:not([disabled])[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::after {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=focused] [part~=control] {\n  -webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n          box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part=control]::after,\n:host(:disabled) [part=control]::after {\n  border-color: var(--disabled-label-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after {\n  background: var(--disabled-color);\n  border-color: var(--disabled-color);\n}`;\n"]}
+{"version":3,"file":"radio.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --hover-color: var(--ig-radio-hover-color, transparent);\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-100), var(--ig-error-a)));\n  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n}\n:host::part(base) {\n  -webkit-transition: none;\n  transition: none;\n}\n\n[part~=label] {\n  color: var(--label-color);\n}\n\n[part~=base] {\n  gap: 0.5rem;\n}\n\n[part~=control] {\n  --size: 1rem;\n  border-radius: var(--size);\n  width: var(--size);\n  height: var(--size);\n  min-width: var(--size);\n  background: none;\n  -webkit-transition: transparent;\n  transition: transparent;\n}\n[part~=control]::before, [part~=control]::after {\n  -webkit-transition: none;\n  transition: none;\n  border-radius: calc(var(--size) / 2);\n}\n[part~=control]::before {\n  -webkit-transform: translate(-50%, -50%) scale(0.375);\n      -ms-transform: translate(-50%, -50%) scale(0.375);\n          transform: translate(-50%, -50%) scale(0.375);\n}\n[part~=control]::after {\n  width: inherit;\n  height: inherit;\n  min-width: inherit;\n  border: 0.0625rem solid var(--empty-color);\n}\n\n[part~=focused] [part~=control] {\n  -webkit-box-shadow: 0 0 0 0.125rem var(--focus-outline-color);\n          box-shadow: 0 0 0 0.125rem var(--focus-outline-color);\n}\n[part~=focused] [part~=control]::after {\n  border-color: var(--fill-color);\n}\n\n[part=\"control checked\"]::after {\n  background: var(--fill-color);\n  border-color: var(--fill-color);\n}\n[part=\"control checked\"]::before {\n  border-color: var(--fill-hover-border-color);\n  background: var(--fill-hover-border-color);\n}\n\n:host(:not([disabled])[invalid]) [part~=label],\n:host(:not(:disabled)[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after,\n:host(:not(:disabled)[invalid]) [part~=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::after,\n:host(:not(:disabled)[invalid]) [part=\"control checked\"]::after {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=focused] [part~=control],\n:host(:not(:disabled)[invalid]) [part~=focused] [part~=control] {\n  -webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n          box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part=control]::after,\n:host(:disabled) [part=control]::after {\n  border-color: var(--disabled-label-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after {\n  background: var(--disabled-color);\n  border-color: var(--disabled-color);\n}`;\n"]}

package/components/radio/themes/light/radio.fluent.css.js

@@ -1,37 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --hover-color: var(--ig-radio-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
   --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
   --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));

package/components/radio/themes/light/radio.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --hover-color: var(--ig-radio-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-700), var(--ig-error-a)));\n  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n}\n\n[part~=label] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: var(--label-color);\n}\n\n:host [part~=base] {\n  -webkit-transition-duration: 0.1s;\n          transition-duration: 0.1s;\n  gap: 0.375rem;\n}\n\n:host [part~=control] {\n  border-radius: var(--size);\n  width: var(--size);\n  height: var(--size);\n  min-width: var(--size);\n  -webkit-transition: none;\n  transition: none;\n}\n:host [part~=control]::before, :host [part~=control]::after {\n  border-radius: calc(var(--size) / 2);\n  width: var(--size);\n  height: var(--size);\n  inset-inline-start: 0;\n  top: 0;\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none;\n}\n:host [part~=control]::before {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n  -webkit-transition: all 0.2s ease-in;\n  transition: all 0.2s ease-in;\n  z-index: 1;\n}\n:host [part~=control]::after {\n  border: 0.0625rem solid var(--empty-color);\n}\n\n:host [part=\"control checked\"]::before {\n  border-color: var(--fill-color);\n  background: var(--fill-color);\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n}\n:host [part=\"control checked\"]::after {\n  border-color: var(--fill-color);\n}\n\n[part~=focused] {\n  position: relative;\n}\n[part~=focused]::after {\n  content: \"\";\n  position: absolute;\n  top: -0.125rem;\n  left: -0.125rem;\n  -webkit-box-shadow: 0 0 0 0.0625rem var(--focus-outline-color);\n          box-shadow: 0 0 0 0.0625rem var(--focus-outline-color);\n  width: calc(100% + (0.125rem * 2));\n  height: calc(100% + (0.125rem * 2));\n}\n[part~=focused] [part=control]::before {\n  background: var(--hover-color);\n}\n\n:host(:hover) [part=control]::before {\n  background: var(--hover-color);\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n}\n:host(:hover) [part=\"control checked\"]::after {\n  border-color: var(--fill-hover-border-color);\n}\n:host(:hover) [part=\"control checked\"]::before {\n  background: var(--fill-color-hover);\n  border-color: var(--fill-hover-border-color);\n}\n\n:host(:not([disabled])[invalid]:hover) [part=control]::after {\n  border-color: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]:hover) [part=control]::before {\n  background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]:hover) [part=\"control checked\"]::after {\n  border-color: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]:hover) [part=\"control checked\"]::before {\n  background: var(--error-color-hover);\n}\n\n:host(:not([disabled])[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=focused] [part=control]::after {\n  border-color: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]) [part=focused] [part=control]::before {\n  background: var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::before,\n:host(:disabled) [part=\"control checked\"]::before {\n  background: var(--disabled-color);\n  border-color: var(--disabled-color);\n}`;\n"]}
+{"version":3,"file":"radio.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoJvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --hover-color: var(--ig-radio-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-700), var(--ig-error-a)));\n  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n}\n\n[part~=label] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: var(--label-color);\n}\n\n:host [part~=base] {\n  -webkit-transition-duration: 0.1s;\n          transition-duration: 0.1s;\n  gap: 0.375rem;\n}\n\n:host [part~=control] {\n  border-radius: var(--size);\n  width: var(--size);\n  height: var(--size);\n  min-width: var(--size);\n  -webkit-transition: none;\n  transition: none;\n}\n:host [part~=control]::before, :host [part~=control]::after {\n  border-radius: calc(var(--size) / 2);\n  width: var(--size);\n  height: var(--size);\n  inset-inline-start: 0;\n  top: 0;\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none;\n}\n:host [part~=control]::before {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n  -webkit-transition: all 0.2s ease-in;\n  transition: all 0.2s ease-in;\n  z-index: 1;\n}\n:host [part~=control]::after {\n  border: 0.0625rem solid var(--empty-color);\n}\n\n:host [part=\"control checked\"]::before {\n  border-color: var(--fill-color);\n  background: var(--fill-color);\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n}\n:host [part=\"control checked\"]::after {\n  border-color: var(--fill-color);\n}\n\n[part~=focused] {\n  position: relative;\n}\n[part~=focused]::after {\n  content: \"\";\n  position: absolute;\n  top: -0.125rem;\n  left: -0.125rem;\n  -webkit-box-shadow: 0 0 0 0.0625rem var(--focus-outline-color);\n          box-shadow: 0 0 0 0.0625rem var(--focus-outline-color);\n  width: calc(100% + (0.125rem * 2));\n  height: calc(100% + (0.125rem * 2));\n}\n[part~=focused] [part=control]::before {\n  background: var(--hover-color);\n}\n\n:host(:hover) [part=control]::before {\n  background: var(--hover-color);\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n}\n:host(:hover) [part=\"control checked\"]::after {\n  border-color: var(--fill-hover-border-color);\n}\n:host(:hover) [part=\"control checked\"]::before {\n  background: var(--fill-color-hover);\n  border-color: var(--fill-hover-border-color);\n}\n\n:host(:not([disabled])[invalid]:hover) [part=control]::after {\n  border-color: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]:hover) [part=control]::before {\n  background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]:hover) [part=\"control checked\"]::after {\n  border-color: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]:hover) [part=\"control checked\"]::before {\n  background: var(--error-color-hover);\n}\n\n:host(:not([disabled])[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=focused] [part=control]::after {\n  border-color: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]) [part=focused] [part=control]::before {\n  background: var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::before,\n:host(:disabled) [part=\"control checked\"]::before {\n  background: var(--disabled-color);\n  border-color: var(--disabled-color);\n}`;\n"]}

package/components/radio/themes/light/radio.indigo.css.js

@@ -1,37 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --hover-color: var(--ig-radio-hover-color, transparent);
   --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
@@ -88,20 +56,26 @@ export const styles = css `:host {
           box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);
 }
 
-:host(:not([disabled])[invalid]) [part~=label] {
+:host(:not([disabled])[invalid]) [part~=label],
+:host(:not(:disabled)[invalid]) [part~=label] {
   color: var(--error-color);
 }
-:host(:not([disabled])[invalid]) [part=control]::after {
+:host(:not([disabled])[invalid]) [part=control]::after,
+:host(:not(:disabled)[invalid]) [part=control]::after {
   border-color: var(--error-color);
 }
-:host(:not([disabled])[invalid]) [part="control checked"]::after {
+:host(:not([disabled])[invalid]) [part="control checked"]::after,
+:host(:not(:disabled)[invalid]) [part="control checked"]::after {
   border-color: var(--error-color);
 }
-:host(:not([disabled])[invalid]) [part="control checked"]::before {
+:host(:not([disabled])[invalid]) [part="control checked"]::before,
+:host(:not(:disabled)[invalid]) [part="control checked"]::before {
   background: var(--error-color);
 }
 :host(:not([disabled])[invalid]) [part~=focused] [part~=control],
-:host(:not([disabled])[invalid]) [part~=focused] [part="control checked"] {
+:host(:not([disabled])[invalid]) [part~=focused] [part="control checked"],
+:host(:not(:disabled)[invalid]) [part~=focused] [part~=control],
+:host(:not(:disabled)[invalid]) [part~=focused] [part="control checked"] {
   -webkit-box-shadow: 0 0 0 0.1875rem var(--error-color-hover);
           box-shadow: 0 0 0 0.1875rem var(--error-color-hover);
 }