@francofantomius/material-components 0.1.0 → 1.0.1

package/dist/chunks/radio-Bily78NT.js

@@ -0,0 +1,205 @@
+import { n as c, t as r } from "./decorate-DXuynaiA.js";
+import { t as h } from "./form-associated-Cty_ZaS9.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import { css as u, html as p } from "lit";
+import { customElement as m, property as o, queryAssignedElements as y } from "lit/decorators.js";
+var v = u`
+  :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);
+  }
+`, k = u`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  :host([row]) {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+  }
+`, d = class extends h {
+  constructor(...t) {
+    super(...t), 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 = [h.styles, v];
+  }
+  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(t) {
+    super.updated(t), (t.has("checked") || t.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((t) => {
+      t !== this && t.checked && (t.checked = !1, t.tabIndex = -1);
+    });
+  }
+  render() {
+    return p`
+      <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>
+    `;
+  }
+};
+r([o({
+  type: Boolean,
+  reflect: !0
+})], d.prototype, "checked", void 0);
+r([o({ type: String })], d.prototype, "value", void 0);
+d = r([m("md-radio")], d);
+var a = class extends c {
+  constructor(...t) {
+    super(...t), this.name = "", this.value = "", this.row = !1, this.handleSlotChange = () => {
+      this.syncRadios();
+    }, this.handleChange = (e) => {
+      const i = e.target;
+      i && i.checked && (this.value = i.value, this.emitEvent("group-change", { value: this.value }));
+    }, this.handleKeyDown = (e) => {
+      const i = this.radios.filter((s) => !s.disabled);
+      if (i.length === 0) return;
+      const n = i.findIndex((s) => s === document.activeElement || s.shadowRoot?.activeElement);
+      let l = -1;
+      if (e.key === "ArrowDown" || e.key === "ArrowRight" ? (e.preventDefault(), l = n < i.length - 1 ? n + 1 : 0) : (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), l = n > 0 ? n - 1 : i.length - 1), l !== -1) {
+        const s = i[l];
+        s && (s.select(), s.focus());
+      }
+    };
+  }
+  static {
+    this.styles = [c.styles, k];
+  }
+  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(t) {
+    super.updated(t), (t.has("name") || t.has("value")) && this.syncRadios();
+  }
+  syncRadios() {
+    let t = !1;
+    if (this.radios.forEach((e) => {
+      this.name && !e.name && (e.name = this.name), this.value && e.value === this.value && (e.checked = !0, t = !0);
+    }), !t && this.radios.length > 0) {
+      const e = this.radios.find((i) => !i.disabled);
+      e && (e.tabIndex = 0);
+    }
+  }
+  render() {
+    return p`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+r([o({ type: String })], a.prototype, "name", void 0);
+r([o({ type: String })], a.prototype, "value", void 0);
+r([o({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "row", void 0);
+r([y({ selector: "md-radio" })], a.prototype, "radios", void 0);
+a = r([m("md-radio-group")], a);
+export {
+  a as n,
+  d as t
+};
+
+//# sourceMappingURL=radio-Bily78NT.js.map

package/dist/chunks/radio-Bily78NT.js.map

@@ -0,0 +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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"}

package/dist/chunks/ripple-squbKHhj.js

@@ -0,0 +1,135 @@
+import { n as l, t as n } from "./decorate-DXuynaiA.js";
+import { css as m, html as y } from "lit";
+import { customElement as v, property as p, state as b } from "lit/decorators.js";
+var w = m`
+  :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;
+    }
+  }
+`, o = class extends l {
+  constructor(...r) {
+    super(...r), 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 = (t) => {
+      if (this.disabled || t.button !== 0) return;
+      const s = this.getBoundingClientRect(), a = Math.max(s.width, s.height) * 2, d = a / 2, u = this.unbounded || !t.clientX ? s.width / 2 : t.clientX - s.left, h = this.unbounded || !t.clientY ? s.height / 2 : t.clientY - s.top, e = document.createElement("div");
+      e.className = "ripple", e.style.width = `${a}px`, e.style.height = `${a}px`, e.style.left = `${u - d}px`, e.style.top = `${h - d}px`;
+      const c = this.shadowRoot?.querySelector(".surface-container");
+      c && (c.appendChild(e), this.ripples.push(e));
+      const i = () => {
+        e.classList.add("fading"), setTimeout(() => {
+          e.remove(), this.ripples = this.ripples.filter((f) => f !== e);
+        }, 250), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i);
+      };
+      window.addEventListener("pointerup", i), window.addEventListener("pointercancel", i);
+    };
+  }
+  static {
+    this.styles = [l.styles, w];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setupControl();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupControl();
+  }
+  setupControl() {
+    const r = this.parentElement, t = this.getRootNode()?.host;
+    this.control = r || 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 y`
+      <div class="surface-container">
+        <div class="surface ${this.isFocused ? "focused" : ""}"></div>
+      </div>
+    `;
+  }
+};
+n([p({
+  type: Boolean,
+  reflect: !0
+})], o.prototype, "unbounded", void 0);
+n([p({
+  type: Boolean,
+  reflect: !0
+})], o.prototype, "disabled", void 0);
+n([b()], o.prototype, "isFocused", void 0);
+o = n([v("md-ripple")], o);
+export {
+  o as t
+};
+
+//# sourceMappingURL=ripple-squbKHhj.js.map

package/dist/chunks/ripple-squbKHhj.js.map

@@ -0,0 +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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"}