@redvars/peacock 3.8.1 → 3.8.2

package/dist/radio.js

@@ -0,0 +1,476 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { s as spread } from './spread-B5cgadZl.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  --radio-size: 20px;
+  --radio-dot-size: 12px;
+  --radio-selected-color: var(--color-primary);
+  --radio-unselected-color: var(--color-on-surface-variant);
+  --radio-state-layer-size: 40px;
+  --radio-disabled-opacity: 0.38;
+}
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: 8px;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+}
+.radio .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.radio .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--radio-state-layer-size);
+  height: var(--radio-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
+}
+.radio .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
+}
+.radio .outer-circle {
+  position: absolute;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border: 2px solid var(--radio-unselected-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
+}
+.radio .inner-circle {
+  position: absolute;
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
+  background: var(--radio-selected-color);
+  border-radius: 50%;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
+}
+.radio .label {
+  color: var(--color-on-surface);
+  cursor: inherit;
+}
+.radio:hover:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.08;
+  background: var(--color-on-surface);
+}
+.radio:hover:not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly) .container {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+.radio.active:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.radio.active:not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+
+.radio.state-checked .outer-circle {
+  border-color: var(--radio-selected-color);
+}
+.radio.state-checked .inner-circle {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.radio.readonly {
+  cursor: default;
+}
+.radio.readonly .state-layer {
+  display: none;
+}
+.radio.readonly .outer-circle {
+  border-color: var(--color-on-surface-variant);
+}
+.radio.readonly.state-checked .inner-circle {
+  background: var(--color-on-surface-variant);
+}
+
+.radio.disabled {
+  cursor: not-allowed;
+  opacity: var(--radio-disabled-opacity);
+}
+.radio.disabled .state-layer {
+  display: none;
+}
+.radio.disabled .label {
+  color: var(--color-on-surface);
+}
+.radio.disabled .outer-circle {
+  border-color: var(--color-on-surface);
+}
+.radio.disabled.state-checked .inner-circle {
+  background: var(--color-on-surface);
+}`;
+
+var Radio_1;
+let Radio = Radio_1 = class Radio extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The input field name for grouping radios.
+         */
+        this.name = '';
+        /**
+         * The submitted value when this radio is selected.
+         */
+        this.value = '';
+        /**
+         * The radio label.
+         */
+        this.label = '';
+        /**
+         * Whether the radio is selected.
+         */
+        this.checked = false;
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the radio is readonly. Defaults to `false`.
+         */
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the radio. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        /** True while the radio container has keyboard focus. */
+        this.hasFocus = false;
+        /** True while the user is actively pressing the radio (mouse/keyboard). */
+        this.isActive = false;
+        /** True when slotted label content or `label` property is present. */
+        this.slotHasContent = false;
+        /** True for the one radio in the group that should receive tab focus (roving tabindex). */
+        this.isGroupFocusTarget = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.selectRadio(evt);
+            }
+            else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
+                evt.preventDefault();
+                this.navigateGroup(Radio_1.DIRECTION_NEXT);
+            }
+            else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
+                evt.preventDefault();
+                this.navigateGroup(Radio_1.DIRECTION_PREVIOUS);
+            }
+        };
+        this.clickHandler = (ev) => {
+            this.selectRadio(ev);
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
+    }
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes() || !!this.label;
+        this.updateGroupFocusTarget();
+    }
+    updated(changedProps) {
+        if (changedProps.has('label')) {
+            this.slotHasContent = this.hasChildNodes() || !!this.label;
+        }
+        if (changedProps.has('checked') && this.checked) {
+            this.uncheckSiblings();
+        }
+        if (changedProps.has('checked') || changedProps.has('name')) {
+            this.updateGroupFocusTarget();
+        }
+    }
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            const attrValue = this.getAttribute('tabindex');
+            if (attrValue !== null) {
+                this.tabindex = parseInt(attrValue, 10);
+            }
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
+        });
+    }
+    selectRadio(ev) {
+        if (this.disabled || this.readonly)
+            return;
+        if (!this.checked) {
+            this.checked = true;
+            this.uncheckSiblings();
+            this.dispatchChange(ev);
+        }
+        this.containerElement?.focus();
+    }
+    dispatchChange(ev) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value, checked: this.checked, originalEvent: ev },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    uncheckSiblings() {
+        if (!this.name || !this.checked)
+            return;
+        const radios = this.getGroupRadios();
+        radios.forEach(radio => {
+            if (radio === this)
+                return;
+            radio.checked = false;
+        });
+    }
+    getGroupRadios() {
+        if (!this.name)
+            return [this];
+        const scopeRoot = this.closest('form') ?? document;
+        return Array.from(scopeRoot.querySelectorAll(`wc-radio[name="${this.name}"]`));
+    }
+    isRadioEnabled(radio) {
+        return !radio.disabled && !radio.readonly;
+    }
+    updateGroupFocusTarget() {
+        const group = this.getGroupRadios();
+        if (!group.length)
+            return;
+        const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));
+        if (!enabledGroup.length) {
+            group.forEach(radio => {
+                radio.isGroupFocusTarget = false;
+            });
+            return;
+        }
+        const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];
+        group.forEach(radio => {
+            radio.isGroupFocusTarget = radio === target;
+        });
+    }
+    navigateGroup(direction) {
+        const group = this.getGroupRadios().filter(radio => this.isRadioEnabled(radio));
+        if (!group.length)
+            return;
+        const currentIndex = group.indexOf(this);
+        const startIndex = currentIndex >= 0 ? currentIndex : 0;
+        const nextIndex = (startIndex + direction + group.length) % group.length;
+        const target = group[nextIndex];
+        target.selectRadio();
+        target.containerElement?.focus();
+    }
+    /**
+     * Sets focus on the radio.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the radio.
+     */
+    blur() {
+        this.containerElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            radio: true,
+            'state-checked': this.checked,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$1(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.isGroupFocusTarget
+            ? this.tabindex !== undefined
+                ? this.tabindex
+                : 0
+            : -1}
+          role="radio"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.checked}
+          @click=${this.clickHandler}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outer-circle"></div>
+          <div class="inner-circle"></div>
+        </div>
+
+        <input
+          type="radio"
+          class="input-native"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          aria-hidden="true"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          tabindex="-1"
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
+    }
+};
+Radio.DIRECTION_NEXT = 1;
+Radio.DIRECTION_PREVIOUS = -1;
+Radio.styles = [css_248z];
+__decorate([
+    n({ type: String })
+], Radio.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Radio.prototype, "value", void 0);
+__decorate([
+    n({ type: String })
+], Radio.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "checked", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Radio.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Radio.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Radio.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Radio.prototype, "slotHasContent", void 0);
+__decorate([
+    r()
+], Radio.prototype, "isGroupFocusTarget", void 0);
+__decorate([
+    e('.container')
+], Radio.prototype, "containerElement", void 0);
+__decorate([
+    e('.input-native')
+], Radio.prototype, "nativeElement", void 0);
+Radio = Radio_1 = __decorate([
+    IndividualComponent
+], Radio);
+
+export { Radio };
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../src/radio/radio.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { spread } from '@/__internal/directive/spread.js';\n\nimport styles from './radio.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Radio\n * @tag wc-radio\n * @rawTag radio\n * @summary Allows selection of a single option from a set.\n * @overview\n * <p>Radio buttons follow the specifications with clear focus, hover, and selected states.</p>\n *\n * @cssprop --radio-size: Size of the outer radio circle.\n * @cssprop --radio-dot-size: Size of the inner dot when selected.\n * @cssprop --radio-selected-color: Color of the radio when selected.\n * @cssprop --radio-unselected-color: Color of the radio outline when unselected.\n * @cssprop --radio-state-layer-size: Size of the state layer for touch target.\n * @cssprop --radio-disabled-opacity: Opacity applied when the radio is disabled.\n *\n * @fires {CustomEvent} change - Dispatched when the radio selection changes.\n * @fires {CustomEvent} blur - Dispatched when the radio loses focus.\n * @fires {CustomEvent} focus - Dispatched when the radio receives focus.\n *\n * @example\n * ```html\n * <wc-radio name=\"fruits\" value=\"apple\" label=\"Apple\"></wc-radio>\n * ```\n * @tags input, form\n */\ntype RadioDirection = 1 | -1;\n\n@IndividualComponent\nexport class Radio extends LitElement {\n  private static readonly DIRECTION_NEXT: RadioDirection = 1;\n  private static readonly DIRECTION_PREVIOUS: RadioDirection = -1;\n\n  static styles = [styles];\n\n  /**\n   * The input field name for grouping radios.\n   */\n  @property({ type: String })\n  name: string = '';\n\n  /**\n   * The submitted value when this radio is selected.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * The radio label.\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * Whether the radio is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * If true, required icon is shown. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * If true, the radio is readonly. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the radio. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Configuration object for aria attributes.\n   */\n  @property({ type: Object })\n  configAria: Record<string, string> = {};\n\n  /** True while the radio container has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the radio (mouse/keyboard). */\n  @state()\n  private isActive = false;\n\n  /** True when slotted label content or `label` property is present. */\n  @state()\n  private slotHasContent = false;\n\n  /** True for the one radio in the group that should receive tab focus (roving tabindex). */\n  @state()\n  private isGroupFocusTarget = false;\n\n  @query('.container')\n  private containerElement?: HTMLElement;\n\n  @query('.input-native')\n  private nativeElement?: HTMLInputElement;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Captured `tabindex` attribute value forwarded to the inner container. */\n  private tabindex?: number;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleInitialAttributes();\n    window.addEventListener('mouseup', this.windowMouseUp);\n    window.addEventListener('keyup', this.windowKeyUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this.windowMouseUp);\n    window.removeEventListener('keyup', this.windowKeyUp);\n  }\n\n  firstUpdated() {\n    this.slotHasContent = this.hasChildNodes() || !!this.label;\n    this.updateGroupFocusTarget();\n  }\n\n  updated(changedProps: Map<string, unknown>) {\n    if (changedProps.has('label')) {\n      this.slotHasContent = this.hasChildNodes() || !!this.label;\n    }\n\n    if (changedProps.has('checked') && this.checked) {\n      this.uncheckSiblings();\n    }\n\n    if (changedProps.has('checked') || changedProps.has('name')) {\n      this.updateGroupFocusTarget();\n    }\n  }\n\n  private handleInitialAttributes() {\n    if (this.hasAttribute('tabindex')) {\n      const attrValue = this.getAttribute('tabindex');\n      if (attrValue !== null) {\n        this.tabindex = parseInt(attrValue, 10);\n      }\n      this.removeAttribute('tabindex');\n    }\n\n    Array.from(this.attributes).forEach(attr => {\n      if (attr.name.startsWith('aria-')) {\n        this.configAria[attr.name] = attr.value;\n        this.removeAttribute(attr.name);\n      }\n    });\n  }\n\n  private windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private windowKeyUp = (evt: KeyboardEvent) => {\n    if (this.isActive && evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = false;\n    }\n  };\n\n  private mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = true;\n      this.selectRadio(evt);\n    } else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      evt.preventDefault();\n      this.navigateGroup(Radio.DIRECTION_NEXT);\n    } else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      evt.preventDefault();\n      this.navigateGroup(Radio.DIRECTION_PREVIOUS);\n    }\n  };\n\n  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {\n    this.selectRadio(ev);\n  };\n\n  private blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private selectRadio(ev?: Event) {\n    if (this.disabled || this.readonly) return;\n\n    if (!this.checked) {\n      this.checked = true;\n      this.uncheckSiblings();\n      this.dispatchChange(ev);\n    }\n\n    this.containerElement?.focus();\n  }\n\n  private dispatchChange(ev?: Event) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value, checked: this.checked, originalEvent: ev },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private uncheckSiblings() {\n    if (!this.name || !this.checked) return;\n    const radios = this.getGroupRadios();\n\n    radios.forEach(radio => {\n      if (radio === this) return;\n      radio.checked = false;\n    });\n  }\n\n  private getGroupRadios(): Radio[] {\n    if (!this.name) return [this];\n    const scopeRoot = this.closest('form') ?? document;\n    return Array.from(\n      scopeRoot.querySelectorAll<Radio>(`wc-radio[name=\"${this.name}\"]`),\n    );\n  }\n\n  private isRadioEnabled(radio: Radio) {\n    return !radio.disabled && !radio.readonly;\n  }\n\n  private updateGroupFocusTarget() {\n    const group = this.getGroupRadios();\n    if (!group.length) return;\n\n    const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));\n    if (!enabledGroup.length) {\n      group.forEach(radio => {\n        radio.isGroupFocusTarget = false;\n      });\n      return;\n    }\n\n    const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];\n\n    group.forEach(radio => {\n      radio.isGroupFocusTarget = radio === target;\n    });\n  }\n\n  private navigateGroup(direction: RadioDirection) {\n    const group = this.getGroupRadios().filter(radio =>\n      this.isRadioEnabled(radio),\n    );\n    if (!group.length) return;\n\n    const currentIndex = group.indexOf(this);\n    const startIndex = currentIndex >= 0 ? currentIndex : 0;\n    const nextIndex = (startIndex + direction + group.length) % group.length;\n    const target = group[nextIndex];\n\n    target.selectRadio();\n    target.containerElement?.focus();\n  }\n\n  /**\n   * Sets focus on the radio.\n   */\n  focus() {\n    this.containerElement?.focus();\n  }\n\n  /**\n   * Removes focus from the radio.\n   */\n  blur() {\n    this.containerElement?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      radio: true,\n      'state-checked': this.checked,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      'has-content': this.slotHasContent,\n    };\n\n    return html`\n      <label class=${classMap(cssClasses)}>\n        <div\n          class=\"container\"\n          tabindex=${this.isGroupFocusTarget\n            ? this.tabindex !== undefined\n              ? this.tabindex\n              : 0\n            : -1}\n          role=\"radio\"\n          aria-disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-checked=${this.checked}\n          @click=${this.clickHandler}\n          @mousedown=${this.mouseDownHandler}\n          @keydown=${this.keyDownHandler}\n          @blur=${this.blurHandler}\n          @focus=${this.focusHandler}\n          ${spread(this.configAria)}\n        >\n          <div class=\"state-layer\"></div>\n          <div class=\"outer-circle\"></div>\n          <div class=\"inner-circle\"></div>\n        </div>\n\n        <input\n          type=\"radio\"\n          class=\"input-native\"\n          name=${this.name}\n          .value=${this.value}\n          .checked=${this.checked}\n          aria-hidden=\"true\"\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n        />\n\n        ${this.label\n          ? html`<div class=\"label\">${this.label}</div>`\n          : html`<div class=\"label slot-container\"><slot></slot></div>`}\n      </label>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}