@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/radio-jPCwykIa.js

@@ -0,0 +1,197 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { t as n } from "./form-associated-Do5uXckv.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import { css as r, html as i } from "lit";
+import { customElement as a, property as o, queryAssignedElements as s } from "lit/decorators.js";
+//#region src/components/radio/radio.css.ts
+var c = r`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    gap: 8px;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 16px);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  .container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .outer-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);
+    border-radius: 50%;
+    background-color: transparent;
+    transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .outer-circle md-ripple {
+    inset: -2px;
+  }
+
+  :host([checked]) .outer-circle {
+    border-color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host([disabled]) .outer-circle {
+    border-color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  .inner-circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    transform: scale(0);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
+    z-index: 1;
+  }
+
+  :host([checked]) .inner-circle {
+    transform: scale(1);
+  }
+
+  :host([disabled][checked]) .inner-circle {
+    background-color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+`, l = r`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  :host([row]) {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+  }
+`, u = class extends n {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.value = "on", this.handleClick = (e) => {
+			this.disabled || this.checked || (e.preventDefault(), this.select());
+		}, this.handleKeyDown = (e) => {
+			this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.select());
+		};
+	}
+	static {
+		this.styles = [n.styles, c];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.tabIndex = this.disabled ? -1 : this.checked ? 0 : -1, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), (e.has("checked") || e.has("value")) && (this.tabIndex = this.disabled ? -1 : this.checked ? 0 : -1, this.updateFormValue());
+	}
+	formResetCallback() {
+		this.checked = !1, this.updateFormValue();
+	}
+	updateFormValue() {
+		this.setFormValue(this.checked ? this.value : null), this.required && !this.checked ? this.setValidity({ valueMissing: !0 }, "Please select one of these options") : this.setValidity({});
+	}
+	select() {
+		this.checked = !0, this.updateFormValue(), this.emitEvent("change", {
+			checked: !0,
+			value: this.value
+		}), this.emitEvent("input", {
+			checked: !0,
+			value: this.value
+		}), this.name && this.getRootNode().querySelectorAll(`md-radio[name="${this.name}"]`).forEach((e) => {
+			e !== this && e.checked && (e.checked = !1, e.tabIndex = -1);
+		});
+	}
+	render() {
+		return i`
+      <div class="container">
+        <div class="outer-circle">
+          <md-ripple ?disabled=${this.disabled}></md-ripple>
+          <md-focus-ring></md-focus-ring>
+          <div class="inner-circle"></div>
+        </div>
+      </div>
+      <slot></slot>
+    `;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "checked", void 0), t([o({ type: String })], u.prototype, "value", void 0), u = t([a("md-radio")], u);
+var d = class extends e {
+	constructor(...e) {
+		super(...e), this.name = "", this.value = "", this.row = !1, this.handleSlotChange = () => {
+			this.syncRadios();
+		}, this.handleChange = (e) => {
+			let t = e.target;
+			t && t.checked && (this.value = t.value, this.emitEvent("group-change", { value: this.value }));
+		}, this.handleKeyDown = (e) => {
+			let t = this.radios.filter((e) => !e.disabled);
+			if (t.length === 0) return;
+			let n = t.findIndex((e) => e === document.activeElement || e.shadowRoot?.activeElement), r = -1;
+			if (e.key === "ArrowDown" || e.key === "ArrowRight" ? (e.preventDefault(), r = n < t.length - 1 ? n + 1 : 0) : (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), r = n > 0 ? n - 1 : t.length - 1), r !== -1) {
+				let e = t[r];
+				e && (e.select(), e.focus());
+			}
+		};
+	}
+	static {
+		this.styles = [e.styles, l];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("change", this.handleChange), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("change", this.handleChange), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), (e.has("name") || e.has("value")) && this.syncRadios();
+	}
+	syncRadios() {
+		let e = !1;
+		if (this.radios.forEach((t) => {
+			this.name && !t.name && (t.name = this.name), this.value && t.value === this.value && (t.checked = !0, e = !0);
+		}), !e && this.radios.length > 0) {
+			let e = this.radios.find((e) => !e.disabled);
+			e && (e.tabIndex = 0);
+		}
+	}
+	render() {
+		return i`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+};
+t([o({ type: String })], d.prototype, "name", void 0), t([o({ type: String })], d.prototype, "value", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "row", void 0), t([s({ selector: "md-radio" })], d.prototype, "radios", void 0), d = t([a("md-radio-group")], d);
+//#endregion
+export { d as n, u as t };
+
+//# sourceMappingURL=radio-jPCwykIa.js.map

package/dist/chunks/{radio-Bily78NT.js.map → radio-jPCwykIa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-Bily78NT.js","names":[],"sources":["../../src/components/radio/radio.css.ts","../../src/components/radio/radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radioStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.38;\n    pointer-events: none;\n  }\n\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n  }\n\n  .outer-circle {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    box-sizing: border-box;\n    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);\n    border-radius: 50%;\n    background-color: transparent;\n    transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .outer-circle md-ripple {\n    inset: -2px;\n  }\n\n  :host([checked]) .outer-circle {\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([disabled]) .outer-circle {\n    border-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  .inner-circle {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    transform: scale(0);\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 1;\n  }\n\n  :host([checked]) .inner-circle {\n    transform: scale(1);\n  }\n\n  :host([disabled][checked]) .inner-circle {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n`;\n\nexport const radioGroupStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  :host([row]) {\n    flex-direction: row;\n    align-items: center;\n    gap: 16px;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { radioStyles, radioGroupStyles } from './radio.css.js';\n\n@customElement('md-radio')\nexport class MdRadio extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, radioStyles];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : (this.checked ? 0 : -1);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this.tabIndex = this.disabled ? -1 : (this.checked ? 0 : -1);\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.checked = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.checked ? this.value : null);\n    if (this.required && !this.checked) {\n      this.setValidity({ valueMissing: true }, 'Please select one of these options');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.checked) return;\n    event.preventDefault();\n    this.select();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  select() {\n    this.checked = true;\n    this.updateFormValue();\n    this.emitEvent('change', { checked: true, value: this.value });\n    this.emitEvent('input', { checked: true, value: this.value });\n\n    // Uncheck siblings with same name\n    if (this.name) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      const radios = root.querySelectorAll(`md-radio[name=\"${this.name}\"]`) as NodeListOf<MdRadio>;\n      radios.forEach((radio) => {\n        if (radio !== this && radio.checked) {\n          radio.checked = false;\n          radio.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"outer-circle\">\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <div class=\"inner-circle\"></div>\n        </div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\n@customElement('md-radio-group')\nexport class MdRadioGroup extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, radioGroupStyles];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  row = false;\n\n  @queryAssignedElements({ selector: 'md-radio' })\n  private radios!: MdRadio[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('change', this.handleChange);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('change', this.handleChange);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('name') || changedProperties.has('value')) {\n      this.syncRadios();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncRadios();\n  };\n\n  private syncRadios() {\n    let hasChecked = false;\n    this.radios.forEach((radio) => {\n      if (this.name && !radio.name) {\n        radio.name = this.name;\n      }\n      if (this.value && radio.value === this.value) {\n        radio.checked = true;\n        hasChecked = true;\n      }\n    });\n\n    if (!hasChecked && this.radios.length > 0) {\n      const firstEnabled = this.radios.find((r) => !r.disabled);\n      if (firstEnabled) firstEnabled.tabIndex = 0;\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    const radio = event.target as MdRadio;\n    if (radio && radio.checked) {\n      this.value = radio.value;\n      this.emitEvent('group-change', { value: this.value });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledRadios = this.radios.filter((r) => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const currentIndex = enabledRadios.findIndex((r) => r === document.activeElement || r.shadowRoot?.activeElement);\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      nextIndex = currentIndex < enabledRadios.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledRadios.length - 1;\n    }\n\n    if (nextIndex !== -1) {\n      const target = enabledRadios[nextIndex];\n      if (target) {\n        target.select();\n        target.focus();\n      }\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n    'md-radio-group': MdRadioGroup;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"radio-jPCwykIa.js","names":[],"sources":["../../src/components/radio/radio.css.ts","../../src/components/radio/radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radioStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.38;\n    pointer-events: none;\n  }\n\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n  }\n\n  .outer-circle {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    box-sizing: border-box;\n    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);\n    border-radius: 50%;\n    background-color: transparent;\n    transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .outer-circle md-ripple {\n    inset: -2px;\n  }\n\n  :host([checked]) .outer-circle {\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([disabled]) .outer-circle {\n    border-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  .inner-circle {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    transform: scale(0);\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 1;\n  }\n\n  :host([checked]) .inner-circle {\n    transform: scale(1);\n  }\n\n  :host([disabled][checked]) .inner-circle {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n`;\n\nexport const radioGroupStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  :host([row]) {\n    flex-direction: row;\n    align-items: center;\n    gap: 16px;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { radioStyles, radioGroupStyles } from './radio.css.js';\n\n@customElement('md-radio')\nexport class MdRadio extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, radioStyles];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : (this.checked ? 0 : -1);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this.tabIndex = this.disabled ? -1 : (this.checked ? 0 : -1);\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.checked = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.checked ? this.value : null);\n    if (this.required && !this.checked) {\n      this.setValidity({ valueMissing: true }, 'Please select one of these options');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.checked) return;\n    event.preventDefault();\n    this.select();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  select() {\n    this.checked = true;\n    this.updateFormValue();\n    this.emitEvent('change', { checked: true, value: this.value });\n    this.emitEvent('input', { checked: true, value: this.value });\n\n    // Uncheck siblings with same name\n    if (this.name) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      const radios = root.querySelectorAll(`md-radio[name=\"${this.name}\"]`) as NodeListOf<MdRadio>;\n      radios.forEach((radio) => {\n        if (radio !== this && radio.checked) {\n          radio.checked = false;\n          radio.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"outer-circle\">\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <div class=\"inner-circle\"></div>\n        </div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\n@customElement('md-radio-group')\nexport class MdRadioGroup extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, radioGroupStyles];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  row = false;\n\n  @queryAssignedElements({ selector: 'md-radio' })\n  private radios!: MdRadio[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('change', this.handleChange);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('change', this.handleChange);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('name') || changedProperties.has('value')) {\n      this.syncRadios();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncRadios();\n  };\n\n  private syncRadios() {\n    let hasChecked = false;\n    this.radios.forEach((radio) => {\n      if (this.name && !radio.name) {\n        radio.name = this.name;\n      }\n      if (this.value && radio.value === this.value) {\n        radio.checked = true;\n        hasChecked = true;\n      }\n    });\n\n    if (!hasChecked && this.radios.length > 0) {\n      const firstEnabled = this.radios.find((r) => !r.disabled);\n      if (firstEnabled) firstEnabled.tabIndex = 0;\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    const radio = event.target as MdRadio;\n    if (radio && radio.checked) {\n      this.value = radio.value;\n      this.emitEvent('group-change', { value: this.value });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledRadios = this.radios.filter((r) => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const currentIndex = enabledRadios.findIndex((r) => r === document.activeElement || r.shadowRoot?.activeElement);\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      nextIndex = currentIndex < enabledRadios.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledRadios.length - 1;\n    }\n\n    if (nextIndex !== -1) {\n      const target = enabledRadios[nextIndex];\n      if (target) {\n        target.select();\n        target.focus();\n      }\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n    'md-radio-group': MdRadioGroup;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/ripple-CBOKeVfm.js

@@ -0,0 +1,132 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+//#region src/internal/ripple/ripple.css.ts
+var s = n`
+  :host {
+    display: inline-flex;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([unbounded]) {
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  :host([disabled]) {
+    opacity: 0;
+  }
+
+  .surface-container {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    overflow: hidden;
+  }
+
+  .surface {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: currentColor;
+    opacity: 0;
+  }
+
+  :host(:focus-visible) .surface,
+  .surface.focused {
+    opacity: var(--md-sys-state-focus-opacity, 0.12);
+  }
+
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: currentColor;
+    opacity: var(--md-sys-state-pressed-opacity, 0.12);
+    transform: scale(0);
+    pointer-events: none;
+    animation: md-ripple-expand 300ms cubic-bezier(0.2, 0, 0, 1) forwards;
+  }
+
+  .ripple.fading {
+    animation: md-ripple-fade-out 250ms linear forwards;
+  }
+
+  @keyframes md-ripple-expand {
+    from {
+      transform: scale(0);
+      opacity: var(--md-sys-state-pressed-opacity, 0.12);
+    }
+    to {
+      transform: scale(1);
+      opacity: var(--md-sys-state-pressed-opacity, 0.12);
+    }
+  }
+
+  @keyframes md-ripple-fade-out {
+    from {
+      opacity: var(--md-sys-state-pressed-opacity, 0.12);
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.unbounded = !1, this.disabled = !1, this.isFocused = !1, this.ripples = [], this.control = null, this.handleFocusIn = () => {
+			this.disabled || (this.isFocused = !0);
+		}, this.handleFocusOut = () => {
+			this.isFocused = !1;
+		}, this.handlePointerDown = (e) => {
+			if (this.disabled || e.button !== 0) return;
+			let t = this.getBoundingClientRect(), n = Math.max(t.width, t.height) * 2, r = n / 2, i = this.unbounded || !e.clientX ? t.width / 2 : e.clientX - t.left, a = this.unbounded || !e.clientY ? t.height / 2 : e.clientY - t.top, o = document.createElement("div");
+			o.className = "ripple", o.style.width = `${n}px`, o.style.height = `${n}px`, o.style.left = `${i - r}px`, o.style.top = `${a - r}px`;
+			let s = this.shadowRoot?.querySelector(".surface-container");
+			s && (s.appendChild(o), this.ripples.push(o));
+			let c = () => {
+				o.classList.add("fading"), setTimeout(() => {
+					o.remove(), this.ripples = this.ripples.filter((e) => e !== o);
+				}, 250), window.removeEventListener("pointerup", c), window.removeEventListener("pointercancel", c);
+			};
+			window.addEventListener("pointerup", c), window.addEventListener("pointercancel", c);
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setupControl();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.cleanupControl();
+	}
+	setupControl() {
+		let e = this.parentElement, t = this.getRootNode()?.host;
+		this.control = e || t, this.control && (this.control.addEventListener("pointerdown", this.handlePointerDown), this.control.addEventListener("focusin", this.handleFocusIn), this.control.addEventListener("focusout", this.handleFocusOut));
+	}
+	cleanupControl() {
+		this.control && (this.control.removeEventListener("pointerdown", this.handlePointerDown), this.control.removeEventListener("focusin", this.handleFocusIn), this.control.removeEventListener("focusout", this.handleFocusOut));
+	}
+	render() {
+		return r`
+      <div class="surface-container">
+        <div class="surface ${this.isFocused ? "focused" : ""}"></div>
+      </div>
+    `;
+	}
+};
+t([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "unbounded", void 0), t([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o()], c.prototype, "isFocused", void 0), c = t([i("md-ripple")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=ripple-CBOKeVfm.js.map

package/dist/chunks/{ripple-squbKHhj.js.map → ripple-CBOKeVfm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ripple-squbKHhj.js","names":[],"sources":["../../src/internal/ripple/ripple.css.ts","../../src/internal/ripple/ripple.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const rippleStyles = css`\n  :host {\n    display: inline-flex;\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([unbounded]) {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface-container {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    overflow: hidden;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background-color: currentColor;\n    opacity: 0;\n  }\n\n  :host(:focus-visible) .surface,\n  .surface.focused {\n    opacity: var(--md-sys-state-focus-opacity, 0.12);\n  }\n\n  .ripple {\n    position: absolute;\n    border-radius: 50%;\n    background-color: currentColor;\n    opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    transform: scale(0);\n    pointer-events: none;\n    animation: md-ripple-expand 300ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  .ripple.fading {\n    animation: md-ripple-fade-out 250ms linear forwards;\n  }\n\n  @keyframes md-ripple-expand {\n    from {\n      transform: scale(0);\n      opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    }\n    to {\n      transform: scale(1);\n      opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    }\n  }\n\n  @keyframes md-ripple-fade-out {\n    from {\n      opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../base-component.js';\nimport { rippleStyles } from './ripple.css.js';\n\n@customElement('md-ripple')\nexport class MdRipple extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, rippleStyles];\n\n  @property({ type: Boolean, reflect: true })\n  unbounded = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state()\n  private isFocused = false;\n\n  private ripples: HTMLElement[] = [];\n  private control: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setupControl();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.cleanupControl();\n  }\n\n  private setupControl(): void {\n    const parent = this.parentElement;\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    this.control = parent || host;\n    if (!this.control) return;\n\n    this.control.addEventListener('pointerdown', this.handlePointerDown);\n    this.control.addEventListener('focusin', this.handleFocusIn);\n    this.control.addEventListener('focusout', this.handleFocusOut);\n  }\n\n  private cleanupControl(): void {\n    if (!this.control) return;\n    this.control.removeEventListener('pointerdown', this.handlePointerDown);\n    this.control.removeEventListener('focusin', this.handleFocusIn);\n    this.control.removeEventListener('focusout', this.handleFocusOut);\n  }\n\n  private handleFocusIn = (): void => {\n    if (this.disabled) return;\n    this.isFocused = true;\n  };\n\n  private handleFocusOut = (): void => {\n    this.isFocused = false;\n  };\n\n  private handlePointerDown = (event: PointerEvent): void => {\n    if (this.disabled || event.button !== 0) return;\n\n    const rect = this.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height) * 2;\n    const radius = size / 2;\n\n    const x = this.unbounded || !event.clientX ? rect.width / 2 : event.clientX - rect.left;\n    const y = this.unbounded || !event.clientY ? rect.height / 2 : event.clientY - rect.top;\n\n    const ripple = document.createElement('div');\n    ripple.className = 'ripple';\n    ripple.style.width = `${size}px`;\n    ripple.style.height = `${size}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    const container = this.shadowRoot?.querySelector('.surface-container');\n    if (container) {\n      container.appendChild(ripple);\n      this.ripples.push(ripple);\n    }\n\n    const removeRipple = () => {\n      ripple.classList.add('fading');\n      setTimeout(() => {\n        ripple.remove();\n        this.ripples = this.ripples.filter((r) => r !== ripple);\n      }, 250);\n      window.removeEventListener('pointerup', removeRipple);\n      window.removeEventListener('pointercancel', removeRipple);\n    };\n\n    window.addEventListener('pointerup', removeRipple);\n    window.addEventListener('pointercancel', removeRipple);\n  };\n\n  override render() {\n    return html`\n      <div class=\"surface-container\">\n        <div class=\"surface ${this.isFocused ? 'focused' : ''}\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-ripple': MdRipple;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ripple-CBOKeVfm.js","names":[],"sources":["../../src/internal/ripple/ripple.css.ts","../../src/internal/ripple/ripple.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const rippleStyles = css`\n  :host {\n    display: inline-flex;\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([unbounded]) {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface-container {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    overflow: hidden;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background-color: currentColor;\n    opacity: 0;\n  }\n\n  :host(:focus-visible) .surface,\n  .surface.focused {\n    opacity: var(--md-sys-state-focus-opacity, 0.12);\n  }\n\n  .ripple {\n    position: absolute;\n    border-radius: 50%;\n    background-color: currentColor;\n    opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    transform: scale(0);\n    pointer-events: none;\n    animation: md-ripple-expand 300ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  .ripple.fading {\n    animation: md-ripple-fade-out 250ms linear forwards;\n  }\n\n  @keyframes md-ripple-expand {\n    from {\n      transform: scale(0);\n      opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    }\n    to {\n      transform: scale(1);\n      opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    }\n  }\n\n  @keyframes md-ripple-fade-out {\n    from {\n      opacity: var(--md-sys-state-pressed-opacity, 0.12);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../base-component.js';\nimport { rippleStyles } from './ripple.css.js';\n\n@customElement('md-ripple')\nexport class MdRipple extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, rippleStyles];\n\n  @property({ type: Boolean, reflect: true })\n  unbounded = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state()\n  private isFocused = false;\n\n  private ripples: HTMLElement[] = [];\n  private control: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setupControl();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.cleanupControl();\n  }\n\n  private setupControl(): void {\n    const parent = this.parentElement;\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    this.control = parent || host;\n    if (!this.control) return;\n\n    this.control.addEventListener('pointerdown', this.handlePointerDown);\n    this.control.addEventListener('focusin', this.handleFocusIn);\n    this.control.addEventListener('focusout', this.handleFocusOut);\n  }\n\n  private cleanupControl(): void {\n    if (!this.control) return;\n    this.control.removeEventListener('pointerdown', this.handlePointerDown);\n    this.control.removeEventListener('focusin', this.handleFocusIn);\n    this.control.removeEventListener('focusout', this.handleFocusOut);\n  }\n\n  private handleFocusIn = (): void => {\n    if (this.disabled) return;\n    this.isFocused = true;\n  };\n\n  private handleFocusOut = (): void => {\n    this.isFocused = false;\n  };\n\n  private handlePointerDown = (event: PointerEvent): void => {\n    if (this.disabled || event.button !== 0) return;\n\n    const rect = this.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height) * 2;\n    const radius = size / 2;\n\n    const x = this.unbounded || !event.clientX ? rect.width / 2 : event.clientX - rect.left;\n    const y = this.unbounded || !event.clientY ? rect.height / 2 : event.clientY - rect.top;\n\n    const ripple = document.createElement('div');\n    ripple.className = 'ripple';\n    ripple.style.width = `${size}px`;\n    ripple.style.height = `${size}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    const container = this.shadowRoot?.querySelector('.surface-container');\n    if (container) {\n      container.appendChild(ripple);\n      this.ripples.push(ripple);\n    }\n\n    const removeRipple = () => {\n      ripple.classList.add('fading');\n      setTimeout(() => {\n        ripple.remove();\n        this.ripples = this.ripples.filter((r) => r !== ripple);\n      }, 250);\n      window.removeEventListener('pointerup', removeRipple);\n      window.removeEventListener('pointercancel', removeRipple);\n    };\n\n    window.addEventListener('pointerup', removeRipple);\n    window.addEventListener('pointercancel', removeRipple);\n  };\n\n  override render() {\n    return html`\n      <div class=\"surface-container\">\n        <div class=\"surface ${this.isFocused ? 'focused' : ''}\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-ripple': MdRipple;\n  }\n}\n"],"mappings":";;;;AAEA,IAAa,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCIlB,IAAN,cAAuB,EAAc;;EAoDb,aAhDjB,KAAA,YAAA,IAGD,KAAA,WAAA,IAGS,KAAA,YAAA,IAEa,KAAA,UAAA,CAAC,GACI,KAAA,UAAA,MA8BF,KAAA,sBAAA;GAC9B,KAAK,aACT,KAAK,YAAY;EACnB,GAEqC,KAAA,uBAAA;GACnC,KAAK,YAAY;EACnB,GAE6B,KAAA,qBAAA,MAA8B;GACzD,IAAI,KAAK,YAAY,EAAM,WAAW,GAAG;GAEzC,IAAM,IAAO,KAAK,sBAAsB,GAClC,IAAO,KAAK,IAAI,EAAK,OAAO,EAAK,MAAM,IAAI,GAC3C,IAAS,IAAO,GAEhB,IAAI,KAAK,aAAa,CAAC,EAAM,UAAU,EAAK,QAAQ,IAAI,EAAM,UAAU,EAAK,MAC7E,IAAI,KAAK,aAAa,CAAC,EAAM,UAAU,EAAK,SAAS,IAAI,EAAM,UAAU,EAAK,KAE9E,IAAS,SAAS,cAAc,KAAK;GAK3C,AAJA,EAAO,YAAY,UACnB,EAAO,MAAM,QAAQ,GAAG,EAAK,KAC7B,EAAO,MAAM,SAAS,GAAG,EAAK,KAC9B,EAAO,MAAM,OAAO,GAAG,IAAI,EAAO,KAClC,EAAO,MAAM,MAAM,GAAG,IAAI,EAAO;GAEjC,IAAM,IAAY,KAAK,YAAY,cAAc,oBAAoB;GACrE,AAAI,MACF,EAAU,YAAY,CAAM,GAC5B,KAAK,QAAQ,KAAK,CAAM;GAG1B,IAAM,UAAqB;IAOzB,AANA,EAAO,UAAU,IAAI,QAAQ,GAC7B,iBAAiB;KAEf,AADA,EAAO,OAAO,GACd,KAAK,UAAU,KAAK,QAAQ,QAAQ,MAAM,MAAM,CAAM;IACxD,GAAG,GAAG,GACN,OAAO,oBAAoB,aAAa,CAAY,GACpD,OAAO,oBAAoB,iBAAiB,CAAY;GAC1D;GAGA,AADA,OAAO,iBAAiB,aAAa,CAAY,GACjD,OAAO,iBAAiB,iBAAiB,CAAY;EACvD;;;EAtFyB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAY;;CAc5D,oBAAmC;EAEjC,AADA,MAAM,kBAAkB,GACxB,KAAK,aAAa;CACpB;CAEA,uBAAsC;EAEpC,AADA,MAAM,qBAAqB,GAC3B,KAAK,eAAe;CACtB;CAEA,eAA6B;EAC3B,IAAM,IAAS,KAAK,eACd,IAAQ,KAAK,YAAY,CAAC,EAAiB;EACjD,KAAK,UAAU,KAAU,GACpB,KAAK,YAEV,KAAK,QAAQ,iBAAiB,eAAe,KAAK,iBAAiB,GACnE,KAAK,QAAQ,iBAAiB,WAAW,KAAK,aAAa,GAC3D,KAAK,QAAQ,iBAAiB,YAAY,KAAK,cAAc;CAC/D;CAEA,iBAA+B;EACxB,KAAK,YACV,KAAK,QAAQ,oBAAoB,eAAe,KAAK,iBAAiB,GACtE,KAAK,QAAQ,oBAAoB,WAAW,KAAK,aAAa,GAC9D,KAAK,QAAQ,oBAAoB,YAAY,KAAK,cAAc;CAClE;CAgDA,SAAkB;EAChB,OAAO,CAAI;;8BAEe,KAAK,YAAY,YAAY,GAAG;;;CAG5D;AACF;AA7FG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAVR,IAAA,EAAA,CAAA,EAAc,WAAW,CAAA,GAAA,CAAA"}