@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/fab-C9j3WBHE.js

@@ -0,0 +1,150 @@
+import { n as r, t } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as a, html as s, nothing as n } from "lit";
+import { customElement as l, property as o } from "lit/decorators.js";
+var d = a`
+  :host {
+    display: inline-flex;
+    outline: none;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    background-color: var(--md-sys-color-primary-container, #EADDFF);
+    color: var(--md-sys-color-on-primary-container, #21005D);
+    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0,0,0,0.30));
+    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1);
+    overflow: hidden;
+  }
+
+  button:hover {
+    box-shadow: var(--md-sys-elevation-level4, 0px 2px 3px 0px rgba(0,0,0,0.30));
+  }
+
+  :host([lowered]) button {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  :host([lowered]) button:hover {
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));
+  }
+
+  /* --- Sizes --- */
+  :host(:not([size])) button,
+  :host([size="medium"]) button {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+  }
+
+  :host([size="small"]) button {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+  }
+
+  :host([size="large"]) button {
+    width: 96px;
+    height: 96px;
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+  }
+
+  :host([size="large"]) md-icon {
+    --md-icon-size: 36px;
+  }
+
+  /* --- Extended FAB --- */
+  :host([extended]) button {
+    width: auto;
+    min-width: 80px;
+    height: 56px;
+    padding: 0 20px;
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+    gap: 12px;
+  }
+
+  .label {
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    position: relative;
+    z-index: 1;
+  }
+`, e = class extends r {
+  constructor(...i) {
+    super(...i), this.size = "medium", this.label = "", this.icon = "", this.lowered = !1, this.disabled = !1, this.extended = !1;
+  }
+  static {
+    this.styles = [r.styles, d];
+  }
+  updated(i) {
+    super.updated(i), i.has("label") && (this.extended = !!this.label);
+  }
+  render() {
+    return s`
+      <button ?disabled=${this.disabled}>
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <span class="content">
+          <slot name="icon">
+            ${this.icon ? s`<md-icon name=${this.icon}></md-icon>` : n}
+          </slot>
+          <slot>
+            ${this.label ? s`<span class="label">${this.label}</span>` : n}
+          </slot>
+        </span>
+      </button>
+    `;
+  }
+};
+t([o({
+  type: String,
+  reflect: !0
+})], e.prototype, "size", void 0);
+t([o({ type: String })], e.prototype, "label", void 0);
+t([o({ type: String })], e.prototype, "icon", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "lowered", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "disabled", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "extended", void 0);
+e = t([l("md-fab")], e);
+export {
+  e as t
+};
+
+//# sourceMappingURL=fab-C9j3WBHE.js.map

package/dist/chunks/fab-C9j3WBHE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-C9j3WBHE.js","names":[],"sources":["../../src/components/fab/fab.css.ts","../../src/components/fab/fab.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0,0,0,0.30));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  button:hover {\n    box-shadow: var(--md-sys-elevation-level4, 0px 2px 3px 0px rgba(0,0,0,0.30));\n  }\n\n  :host([lowered]) button {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host([lowered]) button:hover {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Sizes --- */\n  :host(:not([size])) button,\n  :host([size=\"medium\"]) button {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([size=\"small\"]) button {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"large\"]) button {\n    width: 96px;\n    height: 96px;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n  }\n\n  :host([size=\"large\"]) md-icon {\n    --md-icon-size: 36px;\n  }\n\n  /* --- Extended FAB --- */\n  :host([extended]) button {\n    width: auto;\n    min-width: 80px;\n    height: 56px;\n    padding: 0 20px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n    gap: 12px;\n  }\n\n  .label {\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    white-space: nowrap;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    position: relative;\n    z-index: 1;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { fabStyles } from './fab.css.js';\n\nexport type FabSize = 'small' | 'medium' | 'large';\n\n@customElement('md-fab')\nexport class MdFab extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, fabStyles];\n\n  @property({ type: String, reflect: true })\n  size: FabSize = 'medium';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, reflect: true })\n  lowered = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  extended = false;\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('label')) {\n      this.extended = Boolean(this.label);\n    }\n  }\n\n  override render() {\n    return html`\n      <button ?disabled=${this.disabled}>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        <span class=\"content\">\n          <slot name=\"icon\">\n            ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n          </slot>\n          <slot>\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n          </slot>\n        </span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n"],"mappings":";;;;;;AAEA,IAAa,IAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCSZ,IAAN,cAAoB,EAAc;AAAA;iBAIvB,KAAA,OAAA,UAGR,KAAA,QAAA,IAGD,KAAA,OAAA,IAGG,KAAA,UAAA,IAGC,KAAA,WAAA,IAGA,KAAA,WAAA;AAAA;;AAlBc,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAS;AAAA;EAoBzD,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,OAAO,MAC/B,KAAK,WAAW,EAAQ,KAAK;AAAA,EAEjC;AAAA,EAEA,SAAkB;AAChB,WAAO;AAAA,0BACe,KAAK,QAAA;AAAA,+BACA,KAAK,QAAA;AAAA;AAAA;AAAA;AAAA,cAItB,KAAK,OAAO,kBAAqB,KAAK,IAAA,gBAAoB,CAAA;AAAA;AAAA;AAAA,cAG1D,KAAK,QAAQ,wBAA2B,KAAK,KAAA,YAAiB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1E;AACF;AAzCG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAnB3C,IAAA,EAAA,CAAA,EAAc,QAAQ,CAAA,GAAA,CAAA"}

package/dist/chunks/focus-ring-CuiJuM-y.js

@@ -0,0 +1,71 @@
+import { n as i, t as e } from "./decorate-DXuynaiA.js";
+import { css as r, html as c } from "lit";
+import { customElement as l, property as n } from "lit/decorators.js";
+var a = r`
+  :host {
+    display: none;
+    position: absolute;
+    inset: -4px;
+    border: 3px solid var(--md-sys-color-secondary, #625B71);
+    border-radius: inherit;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+
+  :host([visible]) {
+    display: block;
+    animation: md-focus-ring-in 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([inward]) {
+    inset: 0px;
+  }
+
+  @keyframes md-focus-ring-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`, t = class extends i {
+  constructor(...s) {
+    super(...s), this.visible = !1, this.inward = !1, this.control = null, this.handleFocusIn = () => {
+      const o = this.getRootNode()?.host;
+      (this.control?.matches(":focus-visible") || this.control?.querySelector(":focus-visible") || o?.matches(":focus-visible")) && (this.visible = !0);
+    }, this.handleFocusOut = () => {
+      this.visible = !1;
+    };
+  }
+  static {
+    this.styles = [i.styles, a];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const s = this.parentElement, o = this.getRootNode()?.host;
+    this.control = s || o, this.control && (this.control.addEventListener("focusin", this.handleFocusIn), this.control.addEventListener("focusout", this.handleFocusOut));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.control && (this.control.removeEventListener("focusin", this.handleFocusIn), this.control.removeEventListener("focusout", this.handleFocusOut));
+  }
+  render() {
+    return c``;
+  }
+};
+e([n({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "visible", void 0);
+e([n({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "inward", void 0);
+t = e([l("md-focus-ring")], t);
+export {
+  t
+};
+
+//# sourceMappingURL=focus-ring-CuiJuM-y.js.map

package/dist/chunks/focus-ring-CuiJuM-y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring-CuiJuM-y.js","names":[],"sources":["../../src/internal/focus-ring/focus-ring.css.ts","../../src/internal/focus-ring/focus-ring.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const focusRingStyles = css`\n  :host {\n    display: none;\n    position: absolute;\n    inset: -4px;\n    border: 3px solid var(--md-sys-color-secondary, #625B71);\n    border-radius: inherit;\n    pointer-events: none;\n    box-sizing: border-box;\n  }\n\n  :host([visible]) {\n    display: block;\n    animation: md-focus-ring-in 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([inward]) {\n    inset: 0px;\n  }\n\n  @keyframes md-focus-ring-in {\n    from {\n      opacity: 0;\n      transform: scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../base-component.js';\nimport { focusRingStyles } from './focus-ring.css.js';\n\n@customElement('md-focus-ring')\nexport class MdFocusRing extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, focusRingStyles];\n\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  @property({ type: Boolean, reflect: true })\n  inward = false;\n\n  private control: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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) {\n      this.control.addEventListener('focusin', this.handleFocusIn);\n      this.control.addEventListener('focusout', this.handleFocusOut);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.control) {\n      this.control.removeEventListener('focusin', this.handleFocusIn);\n      this.control.removeEventListener('focusout', this.handleFocusOut);\n    }\n  }\n\n  private handleFocusIn = (): void => {\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    if (\n      this.control?.matches(':focus-visible') ||\n      this.control?.querySelector(':focus-visible') ||\n      host?.matches(':focus-visible')\n    ) {\n      this.visible = true;\n    }\n  };\n\n  private handleFocusOut = (): void => {\n    this.visible = false;\n  };\n\n  override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-focus-ring': MdFocusRing;\n  }\n}\n\n"],"mappings":";;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCIlB,IAAN,cAA0B,EAAc;AAAA;iBAInC,KAAA,UAAA,IAGD,KAAA,SAAA,IAE6B,KAAA,UAAA,MAqBF,KAAA,gBAAA,MAAA;AAClC,YAAM,IAAQ,KAAK,YAAY,GAAkB;AACjD,OACE,KAAK,SAAS,QAAQ,gBAAgB,KACtC,KAAK,SAAS,cAAc,gBAAgB,KAC5C,GAAM,QAAQ,gBAAgB,OAE9B,KAAK,UAAU;AAAA,IAEnB,GAEqC,KAAA,iBAAA,MAAA;AACnC,WAAK,UAAU;AAAA,IACjB;AAAA;;AA1CyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;AAAA;EAU/D,oBAAmC;AACjC,UAAM,kBAAkB;AACxB,UAAM,IAAS,KAAK,eACd,IAAQ,KAAK,YAAY,GAAkB;AACjD,SAAK,UAAU,KAAU,GACrB,KAAK,YACP,KAAK,QAAQ,iBAAiB,WAAW,KAAK,aAAa,GAC3D,KAAK,QAAQ,iBAAiB,YAAY,KAAK,cAAc;AAAA,EAEjE;AAAA,EAEA,uBAAsC;AACpC,UAAM,qBAAqB,GACvB,KAAK,YACP,KAAK,QAAQ,oBAAoB,WAAW,KAAK,aAAa,GAC9D,KAAK,QAAQ,oBAAoB,YAAY,KAAK,cAAc;AAAA,EAEpE;AAAA,EAiBA,SAAkB;AAChB,WAAO;AAAA,EACT;AACF;AA7CG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAP3C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

package/dist/chunks/{form-associated-fKbeX_2P.js → form-associated-Cty_ZaS9.js}

@@ -1,17 +1,12 @@
-import { property as r } from "lit/decorators.js";
-import { M as h } from "./base-component-DQTjlEVL.js";
-var f = Object.defineProperty, l = (s, t, i, o) => {
-  for (var e = void 0, a = s.length - 1, d; a >= 0; a--)
-    (d = s[a]) && (e = d(t, i, e) || e);
-  return e && f(t, i, e), e;
-};
-class n extends h {
-  constructor() {
-    super(), this.name = "", this.disabled = !1, this.required = !1, this._customValidityMessage = "", this._valid = !0, typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
-  }
+import { n as o, t as e } from "./decorate-DXuynaiA.js";
+import { property as i } from "lit/decorators.js";
+var s = class extends o {
   static {
     this.formAssociated = !0;
   }
+  constructor() {
+    super(), this.name = "", this.disabled = !1, this.required = !1, this._customValidityMessage = "", this._valid = !0, typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
+  }
   get form() {
     return this.internals?.form ?? this.closest("form");
   }
@@ -45,30 +40,34 @@ class n extends h {
   setFormValue(t) {
     this.internals?.setFormValue(t);
   }
-  setValidity(t, i, o) {
+  setValidity(t, a, r) {
     if (t) {
-      const e = Object.values(t).some(Boolean);
-      this._valid = !e, this._customValidityMessage = i || "";
+      const l = Object.values(t).some(Boolean);
+      this._valid = !l, this._customValidityMessage = a || "";
     } else
       this._valid = !0, this._customValidityMessage = "";
-    this.internals?.setValidity && this.internals.setValidity(t, i, o);
+    this.internals?.setValidity && this.internals.setValidity(t, a, r);
   }
   formResetCallback() {
   }
   formDisabledCallback(t) {
     this.disabled = t;
   }
-}
-l([
-  r({ type: String, reflect: !0 })
-], n.prototype, "name");
-l([
-  r({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled");
-l([
-  r({ type: Boolean, reflect: !0 })
-], n.prototype, "required");
+};
+e([i({
+  type: String,
+  reflect: !0
+})], s.prototype, "name", void 0);
+e([i({
+  type: Boolean,
+  reflect: !0
+})], s.prototype, "disabled", void 0);
+e([i({
+  type: Boolean,
+  reflect: !0
+})], s.prototype, "required", void 0);
 export {
-  n as M
+  s as t
 };
-//# sourceMappingURL=form-associated-fKbeX_2P.js.map
+
+//# sourceMappingURL=form-associated-Cty_ZaS9.js.map

package/dist/chunks/form-associated-Cty_ZaS9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-Cty_ZaS9.js","names":[],"sources":["../../src/internal/form-associated.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { MdBaseElement } from './base-component.js';\n\n/**\n * Base element class for Form-Associated Custom Elements (FACE).\n * Provides seamless integration with native HTML <form> elements.\n */\nexport class MdFormAssociatedElement extends MdBaseElement {\n  static formAssociated = true;\n\n  protected internals?: ElementInternals;\n\n  @property({ type: String, reflect: true })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  private _customValidityMessage = '';\n  private _valid = true;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.internals?.form ?? (this.closest('form') as HTMLFormElement | null);\n  }\n\n  get validity(): ValidityState {\n    return this.internals?.validity ?? ({\n      valid: this._valid,\n      valueMissing: !this._valid,\n      customError: Boolean(this._customValidityMessage),\n      badInput: false,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n    } as ValidityState);\n  }\n\n  get validationMessage(): string {\n    return this.internals?.validationMessage ?? this._customValidityMessage;\n  }\n\n  get willValidate(): boolean {\n    return this.internals?.willValidate ?? !this.disabled;\n  }\n\n  checkValidity(): boolean {\n    if (this.internals?.checkValidity) {\n      return this.internals.checkValidity();\n    }\n    return this._valid;\n  }\n\n  reportValidity(): boolean {\n    if (this.internals?.reportValidity) {\n      return this.internals.reportValidity();\n    }\n    return this._valid;\n  }\n\n  protected setFormValue(value: string | File | FormData | null): void {\n    this.internals?.setFormValue(value);\n  }\n\n  protected setValidity(\n    flags?: ValidityStateFlags,\n    message?: string,\n    anchor?: HTMLElement\n  ): void {\n    if (flags) {\n      const hasErrors = Object.values(flags).some(Boolean);\n      this._valid = !hasErrors;\n      this._customValidityMessage = message || '';\n    } else {\n      this._valid = true;\n      this._customValidityMessage = '';\n    }\n\n    if (this.internals?.setValidity) {\n      this.internals.setValidity(flags, message, anchor);\n    }\n  }\n\n  formResetCallback(): void {\n    // Override in child class to reset internal values\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n}\n\n"],"mappings":";;AAOA,IAAa,IAAb,cAA6C,EAAc;AAAA;AACjC,SAAA,iBAAA;AAAA;EAgBxB,cAAc;AACZ,UAAM,GAZD,KAAA,OAAA,IAGI,KAAA,WAAA,IAGA,KAAA,WAAA,IAEsB,KAAA,yBAAA,IAChB,KAAA,SAAA,IAIX,OAAO,KAAK,mBAAoB,eAClC,KAAK,YAAY,KAAK,gBAAgB;AAAA,EAE1C;AAAA,EAEA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW,QAAS,KAAK,QAAQ,MAAM;AAAA,EACrD;AAAA,EAEA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW,YAAa;AAAA,MAClC,OAAO,KAAK;AAAA,MACZ,cAAc,CAAC,KAAK;AAAA,MACpB,aAAa,EAAQ,KAAK;AAAA,MAC1B,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW,qBAAqB,KAAK;AAAA,EACnD;AAAA,EAEA,IAAI,eAAwB;AAC1B,WAAO,KAAK,WAAW,gBAAgB,CAAC,KAAK;AAAA,EAC/C;AAAA,EAEA,gBAAyB;AACvB,WAAI,KAAK,WAAW,gBACX,KAAK,UAAU,cAAc,IAE/B,KAAK;AAAA,EACd;AAAA,EAEA,iBAA0B;AACxB,WAAI,KAAK,WAAW,iBACX,KAAK,UAAU,eAAe,IAEhC,KAAK;AAAA,EACd;AAAA,EAEA,aAAuB,GAA8C;AACnE,SAAK,WAAW,aAAa,CAAK;AAAA,EACpC;AAAA,EAEA,YACE,GACA,GACA,GACM;AACN,QAAI,GAAO;AACT,YAAM,IAAY,OAAO,OAAO,CAAK,EAAE,KAAK,OAAO;AACnD,WAAK,SAAS,CAAC,GACf,KAAK,yBAAyB,KAAW;AAAA,IAC3C;AACE,WAAK,SAAS,IACd,KAAK,yBAAyB;AAGhC,IAAI,KAAK,WAAW,eAClB,KAAK,UAAU,YAAY,GAAO,GAAS,CAAM;AAAA,EAErD;AAAA,EAEA,oBAA0B;AAAA,EAE1B;AAAA,EAEA,qBAAqB,GAAyB;AAC5C,SAAK,WAAW;AAAA,EAClB;AACF;AA3FG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA"}

package/dist/chunks/icon-DrNqcNEL.js

@@ -0,0 +1,62 @@
+import { n as o, t as i } from "./decorate-DXuynaiA.js";
+import { css as r, html as n } from "lit";
+import { customElement as l, property as s } from "lit/decorators.js";
+var a = r`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    width: var(--md-icon-size, 24px);
+    height: var(--md-icon-size, 24px);
+    font-size: var(--md-icon-size, 24px);
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    user-select: none;
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  :host([filled]) {
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  }
+
+  ::slotted(svg) {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+`, t = class extends o {
+  constructor(...e) {
+    super(...e), this.name = "", this.filled = !1, this.size = "";
+  }
+  static {
+    this.styles = [o.styles, a];
+  }
+  updated(e) {
+    super.updated(e), e.has("size") && (this.size ? this.style.setProperty("--md-icon-size", isNaN(Number(this.size)) ? this.size : `${this.size}px`) : this.style.removeProperty("--md-icon-size"));
+  }
+  render() {
+    return n`<slot>${this.name}</slot>`;
+  }
+};
+i([s({ type: String })], t.prototype, "name", void 0);
+i([s({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "filled", void 0);
+i([s({ type: String })], t.prototype, "size", void 0);
+t = i([l("md-icon")], t);
+export {
+  t
+};
+
+//# sourceMappingURL=icon-DrNqcNEL.js.map

package/dist/chunks/icon-DrNqcNEL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-DrNqcNEL.js","names":[],"sources":["../../src/components/icon/icon.css.ts","../../src/components/icon/icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    width: var(--md-icon-size, 24px);\n    height: var(--md-icon-size, 24px);\n    font-size: var(--md-icon-size, 24px);\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;\n    font-weight: normal;\n    font-style: normal;\n    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n    user-select: none;\n    flex-shrink: 0;\n    color: inherit;\n  }\n\n  :host([filled]) {\n    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  }\n\n  ::slotted(svg) {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { iconStyles } from './icon.css.js';\n\n@customElement('md-icon')\nexport class MdIcon extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconStyles];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  filled = false;\n\n  @property({ type: String })\n  size = '';\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('size')) {\n      if (this.size) {\n        this.style.setProperty('--md-icon-size', isNaN(Number(this.size)) ? this.size : `${this.size}px`);\n      } else {\n        this.style.removeProperty('--md-icon-size');\n      }\n    }\n  }\n\n  override render() {\n    return html`<slot>${this.name}</slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n"],"mappings":";;;AAEA,IAAa,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCIb,IAAN,cAAqB,EAAc;AAAA;iBAIjC,KAAA,OAAA,IAGE,KAAA,SAAA,IAGF,KAAA,OAAA;AAAA;;AATkB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;AAAA;EAW1D,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,MAAM,YAAY,kBAAkB,MAAM,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,KAAK,IAAA,IAAQ,IAEhG,KAAK,MAAM,eAAe,gBAAgB;AAAA,EAGhD;AAAA,EAEA,SAAkB;AAChB,WAAO,UAAa,KAAK,IAAA;AAAA,EAC3B;AACF;AAvBG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAV3B,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA"}

package/dist/chunks/icon-button-BdSc7eot.js

@@ -0,0 +1,188 @@
+import { n, t as e } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as l, html as s, nothing as r } from "lit";
+import { customElement as d, property as o } from "lit/decorators.js";
+var c = l`
+  :host {
+    display: inline-flex;
+    outline: none;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  button, a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+    overflow: hidden;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    text-decoration: none;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* --- Filled --- */
+  :host([variant="filled"]) button,
+  :host([variant="filled"]) a {
+    background-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-on-primary, #FFFFFF);
+  }
+
+  :host([variant="filled"][selected]) button,
+  :host([variant="filled"][selected]) a {
+    background-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-on-primary, #FFFFFF);
+  }
+
+  /* --- Tonal --- */
+  :host([variant="tonal"]) button,
+  :host([variant="tonal"]) a {
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  /* --- Outlined --- */
+  :host([variant="outlined"]) button,
+  :host([variant="outlined"]) a {
+    border: 1px solid var(--md-sys-color-outline, #79747E);
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host([variant="outlined"][selected]) button,
+  :host([variant="outlined"][selected]) a {
+    background-color: var(--md-sys-color-inverse-surface, #313033);
+    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);
+    border: none;
+  }
+
+  /* --- Toggle / Selected for Standard --- */
+  :host(:not([variant])[selected]) button,
+  :host(:not([variant])[selected]) a,
+  :host([variant="standard"][selected]) button,
+  :host([variant="standard"][selected]) a {
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  /* --- Disabled --- */
+  :host([disabled]) button,
+  :host([disabled]) a {
+    cursor: not-allowed;
+    color: rgba(29, 27, 32, 0.38);
+  }
+
+  :host([disabled][variant="filled"]) button,
+  :host([disabled][variant="filled"]) a,
+  :host([disabled][variant="tonal"]) button,
+  :host([disabled][variant="tonal"]) a {
+    background-color: rgba(29, 27, 32, 0.12);
+  }
+
+  :host([disabled][variant="outlined"]) button,
+  :host([disabled][variant="outlined"]) a {
+    border-color: rgba(29, 27, 32, 0.12);
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+  }
+`, t = class extends n {
+  constructor(...i) {
+    super(...i), this.variant = "standard", this.disabled = !1, this.toggle = !1, this.selected = !1, this.icon = "", this.selectedIcon = "", this.ariaLabelText = "", this.href = "", this.target = "", this.handleClick = (a) => {
+      if (this.disabled) {
+        a.preventDefault(), a.stopImmediatePropagation();
+        return;
+      }
+      this.toggle && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
+    };
+  }
+  static {
+    this.styles = [n.styles, c];
+  }
+  render() {
+    const i = this.selected && this.selectedIcon ? this.selectedIcon : this.icon, a = s`
+      <md-ripple ?disabled=${this.disabled}></md-ripple>
+      <md-focus-ring></md-focus-ring>
+      <span class="content">
+        <slot>
+          ${i ? s`<md-icon name=${i} ?filled=${this.selected}></md-icon>` : r}
+        </slot>
+      </span>
+    `;
+    return this.href ? s`
+        <a
+          href=${this.disabled ? r : this.href}
+          target=${this.target || r}
+          aria-label=${this.ariaLabelText || r}
+          aria-pressed=${this.toggle ? this.selected ? "true" : "false" : r}
+          aria-disabled=${this.disabled ? "true" : r}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleClick}
+        >
+          ${a}
+        </a>
+      ` : s`
+      <button
+        aria-label=${this.ariaLabelText || r}
+        aria-pressed=${this.toggle ? this.selected ? "true" : "false" : r}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        ${a}
+      </button>
+    `;
+  }
+};
+e([o({
+  type: String,
+  reflect: !0
+})], t.prototype, "variant", void 0);
+e([o({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "disabled", void 0);
+e([o({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "toggle", void 0);
+e([o({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "selected", void 0);
+e([o({ type: String })], t.prototype, "icon", void 0);
+e([o({
+  type: String,
+  attribute: "selected-icon"
+})], t.prototype, "selectedIcon", void 0);
+e([o({
+  type: String,
+  attribute: "aria-label"
+})], t.prototype, "ariaLabelText", void 0);
+e([o({ type: String })], t.prototype, "href", void 0);
+e([o({ type: String })], t.prototype, "target", void 0);
+t = e([d("md-icon-button")], t);
+export {
+  t
+};
+
+//# sourceMappingURL=icon-button-BdSc7eot.js.map

package/dist/chunks/icon-button-BdSc7eot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-BdSc7eot.js","names":[],"sources":["../../src/components/icon-button/icon-button.css.ts","../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconButtonStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-full, 50%);\n    overflow: hidden;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([variant=\"filled\"][selected]) button,\n  :host([variant=\"filled\"][selected]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  /* --- Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([variant=\"outlined\"][selected]) button,\n  :host([variant=\"outlined\"][selected]) a {\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    border: none;\n  }\n\n  /* --- Toggle / Selected for Standard --- */\n  :host(:not([variant])[selected]) button,\n  :host(:not([variant])[selected]) a,\n  :host([variant=\"standard\"][selected]) button,\n  :host([variant=\"standard\"][selected]) a {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"filled\"]) button,\n  :host([disabled][variant=\"filled\"]) a,\n  :host([disabled][variant=\"tonal\"]) button,\n  :host([disabled][variant=\"tonal\"]) a {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button,\n  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { iconButtonStyles } from './icon-button.css.js';\n\nexport type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\n\n@customElement('md-icon-button')\nexport class MdIconButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconButtonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: IconButtonVariant = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  toggle = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'selected-icon' })\n  selectedIcon = '';\n\n  @property({ type: String, attribute: 'aria-label' })\n  ariaLabelText = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  override render() {\n    const iconName = (this.selected && this.selectedIcon) ? this.selectedIcon : this.icon;\n\n    const content = html`\n      <md-ripple ?disabled=${this.disabled}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        <slot>\n          ${iconName ? html`<md-icon name=${iconName} ?filled=${this.selected}></md-icon>` : nothing}\n        </slot>\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-label=${this.ariaLabelText || nothing}\n          aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        aria-label=${this.ariaLabelText || nothing}\n        aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon-button': MdIconButton;\n  }\n}\n\n"],"mappings":"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"}