@francofantomius/material-components 0.1.0

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,16 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export declare class MdDivider extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    vertical: boolean;
+    inset: boolean;
+    insetStart: boolean;
+    insetEnd: boolean;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-divider': MdDivider;
+    }
+}
+//# sourceMappingURL=divider.d.ts.map

package/dist/components/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAGjE,qBACa,SAAU,SAAQ,aAAa;IAC1C,OAAgB,MAAM,iCAAyC;IAG/D,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAER,iBAAiB;IAMjB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/divider/divider.js

@@ -0,0 +1,81 @@
+import { css as h, html as d } from "lit";
+import { property as s, customElement as v } from "lit/decorators.js";
+import { M as p } from "../../chunks/base-component-DQTjlEVL.js";
+const m = h`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  :host(:not([vertical])) {
+    width: 100%;
+    height: 1px;
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+  }
+
+  :host([vertical]) {
+    display: inline-block;
+    width: 1px;
+    height: 100%;
+    vertical-align: middle;
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+  }
+
+  :host([inset]:not([vertical])) {
+    margin-left: 16px;
+    margin-right: 16px;
+    width: calc(100% - 32px);
+  }
+
+  :host([inset-start]:not([vertical])) {
+    margin-left: 16px;
+    width: calc(100% - 16px);
+  }
+
+  :host([inset-end]:not([vertical])) {
+    margin-right: 16px;
+    width: calc(100% - 16px);
+  }
+
+  :host([inset][vertical]) {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    height: calc(100% - 16px);
+  }
+`;
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (c, i, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? f(i, a) : i, l = c.length - 1, n; l >= 0; l--)
+    (n = c[l]) && (t = (o ? n(i, a, t) : n(t)) || t);
+  return o && t && u(i, a, t), t;
+};
+let e = class extends p {
+  constructor() {
+    super(...arguments), this.vertical = !1, this.inset = !1, this.insetStart = !1, this.insetEnd = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "separator"), this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+  render() {
+    return d``;
+  }
+};
+e.styles = [p.styles, m];
+r([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "vertical", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "inset", 2);
+r([
+  s({ type: Boolean, reflect: !0, attribute: "inset-start" })
+], e.prototype, "insetStart", 2);
+r([
+  s({ type: Boolean, reflect: !0, attribute: "inset-end" })
+], e.prototype, "insetEnd", 2);
+e = r([
+  v("md-divider")
+], e);
+export {
+  e as MdDivider
+};
+//# sourceMappingURL=divider.js.map

package/dist/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../../../src/components/divider/divider.css.ts","../../../src/components/divider/divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const dividerStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host(:not([vertical])) {\n    width: 100%;\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([vertical]) {\n    display: inline-block;\n    width: 1px;\n    height: 100%;\n    vertical-align: middle;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([inset]:not([vertical])) {\n    margin-left: 16px;\n    margin-right: 16px;\n    width: calc(100% - 32px);\n  }\n\n  :host([inset-start]:not([vertical])) {\n    margin-left: 16px;\n    width: calc(100% - 16px);\n  }\n\n  :host([inset-end]:not([vertical])) {\n    margin-right: 16px;\n    width: calc(100% - 16px);\n  }\n\n  :host([inset][vertical]) {\n    margin-top: 8px;\n    margin-bottom: 8px;\n    height: calc(100% - 16px);\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { dividerStyles } from './divider.css.js';\n\n@customElement('md-divider')\nexport class MdDivider extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, dividerStyles];\n\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  @property({ type: Boolean, reflect: true })\n  inset = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'inset-start' })\n  insetStart = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'inset-end' })\n  insetEnd = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'separator');\n    this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');\n  }\n\n  override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-divider': MdDivider;\n  }\n}\n\n"],"names":["dividerStyles","css","MdDivider","MdBaseElement","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAgBC;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;;;;;;ACItB,IAAMC,IAAN,cAAwBC,EAAc;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,WAAW,IAGX,KAAA,QAAQ,IAGR,KAAA,aAAa,IAGb,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,oBAAoB;AAC3B,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,WAAW,GACrC,KAAK,aAAa,oBAAoB,KAAK,WAAW,aAAa,YAAY;AAAA,EACjF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAxBaF,EACK,SAAS,CAACC,EAAc,QAAQH,CAAa;AAG7DK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAH/BJ,EAIX,WAAA,YAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/BJ,EAOX,WAAA,SAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,eAAe;AAAA,GATzDJ,EAUX,WAAA,cAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,aAAa;AAAA,GAZvDJ,EAaX,WAAA,YAAA,CAAA;AAbWA,IAANG,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdL,CAAA;"}

package/dist/components/fab/fab.css.d.ts

@@ -0,0 +1,2 @@
+export declare const fabStyles: import('lit').CSSResult;
+//# sourceMappingURL=fab.css.d.ts.map

package/dist/components/fab/fab.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.css.d.ts","sourceRoot":"","sources":["../../../src/components/fab/fab.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBA6FrB,CAAC"}

package/dist/components/fab/fab.d.ts

@@ -0,0 +1,19 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export type FabSize = 'small' | 'medium' | 'large';
+export declare class MdFab extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    size: FabSize;
+    label: string;
+    icon: string;
+    lowered: boolean;
+    disabled: boolean;
+    extended: boolean;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-fab': MdFab;
+    }
+}
+//# sourceMappingURL=fab.d.ts.map

package/dist/components/fab/fab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../../src/components/fab/fab.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,qBACa,KAAM,SAAQ,aAAa;IACtC,OAAgB,MAAM,iCAAqC;IAG3D,IAAI,EAAE,OAAO,CAAY;IAGzB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAER,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/fab/fab.js

@@ -0,0 +1,155 @@
+import { css as b, nothing as h, html as d } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
+import { M as c } from "../../chunks/base-component-DQTjlEVL.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+import "../icon/icon.js";
+const x = b`
+  :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;
+  }
+`;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (r, i, a, n) => {
+  for (var t = n > 1 ? void 0 : n ? y(i, a) : i, l = r.length - 1, p; l >= 0; l--)
+    (p = r[l]) && (t = (n ? p(i, a, t) : p(t)) || t);
+  return n && t && u(i, a, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.size = "medium", this.label = "", this.icon = "", this.lowered = !1, this.disabled = !1, this.extended = !1;
+  }
+  updated(r) {
+    super.updated(r), r.has("label") && (this.extended = !!this.label);
+  }
+  render() {
+    return d`
+      <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 ? d`<md-icon name=${this.icon}></md-icon>` : h}
+          </slot>
+          <slot>
+            ${this.label ? d`<span class="label">${this.label}</span>` : h}
+          </slot>
+        </span>
+      </button>
+    `;
+  }
+};
+e.styles = [c.styles, x];
+o([
+  s({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+o([
+  s({ type: String })
+], e.prototype, "label", 2);
+o([
+  s({ type: String })
+], e.prototype, "icon", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "lowered", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "extended", 2);
+e = o([
+  m("md-fab")
+], e);
+export {
+  e as MdFab
+};
+//# sourceMappingURL=fab.js.map

package/dist/components/fab/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","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"],"names":["fabStyles","css","MdFab","MdBaseElement","changedProperties","html","nothing","__decorateClass","property","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAYC;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;;;;;;ACSlB,IAAMC,IAAN,cAAoBC,EAAc;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAgB,UAGhB,KAAA,QAAQ,IAGR,KAAA,OAAO,IAGP,KAAA,UAAU,IAGV,KAAA,WAAW,IAGX,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,QAAQC,GAAyC;AACxD,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,WAAW,EAAQ,KAAK;AAAA,EAEjC;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,0BACe,KAAK,QAAQ;AAAA,+BACR,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,cAI9B,KAAK,OAAOA,kBAAqB,KAAK,IAAI,gBAAgBC,CAAO;AAAA;AAAA;AAAA,cAGjE,KAAK,QAAQD,wBAA2B,KAAK,KAAK,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjF;AACF;AA5CaJ,EACK,SAAS,CAACC,EAAc,QAAQH,CAAS;AAGzDO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BN,EAIX,WAAA,QAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfN,EAOX,WAAA,SAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfN,EAUX,WAAA,QAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BN,EAaX,WAAA,WAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/BN,EAgBX,WAAA,YAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlB/BN,EAmBX,WAAA,YAAA,CAAA;AAnBWA,IAANK,EAAA;AAAA,EADNE,EAAc,QAAQ;AAAA,GACVP,CAAA;"}

package/dist/components/icon/icon.css.d.ts

@@ -0,0 +1,2 @@
+export declare const iconStyles: import('lit').CSSResult;
+//# sourceMappingURL=icon.css.d.ts.map

package/dist/components/icon/icon.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.css.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAiCtB,CAAC"}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,15 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export declare class MdIcon extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    name: string;
+    filled: boolean;
+    size: string;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-icon': MdIcon;
+    }
+}
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAGjE,qBACa,MAAO,SAAQ,aAAa;IACvC,OAAgB,MAAM,iCAAsC;IAG5D,IAAI,SAAM;IAGV,MAAM,UAAS;IAGf,IAAI,SAAM;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW/C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/icon/icon.js

@@ -0,0 +1,70 @@
+import { css as f, html as h } from "lit";
+import { property as p, customElement as c } from "lit/decorators.js";
+import { M as m } from "../../chunks/base-component-DQTjlEVL.js";
+const d = f`
+  :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;
+  }
+`;
+var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (s, i, n, r) => {
+  for (var e = r > 1 ? void 0 : r ? u(i, n) : i, l = s.length - 1, a; l >= 0; l--)
+    (a = s[l]) && (e = (r ? a(i, n, e) : a(e)) || e);
+  return r && e && y(i, n, e), e;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.name = "", this.filled = !1, this.size = "";
+  }
+  updated(s) {
+    super.updated(s), s.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 h`<slot>${this.name}</slot>`;
+  }
+};
+t.styles = [m.styles, d];
+o([
+  p({ type: String })
+], t.prototype, "name", 2);
+o([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "filled", 2);
+o([
+  p({ type: String })
+], t.prototype, "size", 2);
+t = o([
+  c("md-icon")
+], t);
+export {
+  t as MdIcon
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","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"],"names":["iconStyles","css","MdIcon","MdBaseElement","changedProperties","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAaC;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;;;;;;ACInB,IAAMC,IAAN,cAAqBC,EAAc;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,SAAS,IAGT,KAAA,OAAO;AAAA,EAAA;AAAA,EAEE,QAAQC,GAAyC;AACxD,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,MAAM,YAAY,kBAAkB,MAAM,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,KAAK,IAAI,IAAI,IAEhG,KAAK,MAAM,eAAe,gBAAgB;AAAA,EAGhD;AAAA,EAES,SAAS;AAChB,WAAOC,UAAa,KAAK,IAAI;AAAA,EAC/B;AACF;AA1BaH,EACK,SAAS,CAACC,EAAc,QAAQH,CAAU;AAG1DM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAIX,WAAA,QAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/BL,EAOX,WAAA,UAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfL,EAUX,WAAA,QAAA,CAAA;AAVWA,IAANI,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXN,CAAA;"}

package/dist/components/icon-button/icon-button.css.d.ts

@@ -0,0 +1,2 @@
+export declare const iconButtonStyles: import('lit').CSSResult;
+//# sourceMappingURL=icon-button.css.d.ts.map

package/dist/components/icon-button/icon-button.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.css.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAqG5B,CAAC"}

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,22 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
+export declare class MdIconButton extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    variant: IconButtonVariant;
+    disabled: boolean;
+    toggle: boolean;
+    selected: boolean;
+    icon: string;
+    selectedIcon: string;
+    ariaLabelText: string;
+    href: string;
+    target: string;
+    private handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-icon-button': MdIconButton;
+    }
+}
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAE7E,qBACa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,iCAA4C;IAGlE,OAAO,EAAE,iBAAiB,CAAc;IAGxC,QAAQ,UAAS;IAGjB,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,YAAY,SAAM;IAGlB,aAAa,SAAM;IAGnB,IAAI,SAAM;IAGV,MAAM,SAAM;IAEZ,OAAO,CAAC,WAAW,CAWjB;IAEO,MAAM;CAwChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,192 @@
+import { css as b, nothing as a, html as l } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import { M as p } from "../../chunks/base-component-DQTjlEVL.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+import "../icon/icon.js";
+const v = b`
+  :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%);
+    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;
+  }
+`;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (r, s, d, n) => {
+  for (var i = n > 1 ? void 0 : n ? y(s, d) : s, c = r.length - 1, h; c >= 0; c--)
+    (h = r[c]) && (i = (n ? h(s, d, i) : h(i)) || i);
+  return n && i && m(s, d, i), i;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "standard", this.disabled = !1, this.toggle = !1, this.selected = !1, this.icon = "", this.selectedIcon = "", this.ariaLabelText = "", this.href = "", this.target = "", this.handleClick = (r) => {
+      if (this.disabled) {
+        r.preventDefault(), r.stopImmediatePropagation();
+        return;
+      }
+      this.toggle && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
+    };
+  }
+  render() {
+    const r = this.selected && this.selectedIcon ? this.selectedIcon : this.icon, s = l`
+      <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>
+      <md-focus-ring></md-focus-ring>
+      <span class="content">
+        <slot>
+          ${r ? l`<md-icon name=${r} ?filled=${this.selected}></md-icon>` : a}
+        </slot>
+      </span>
+    `;
+    return this.href ? l`
+        <a
+          href=${this.disabled ? a : this.href}
+          target=${this.target || a}
+          aria-label=${this.ariaLabelText || a}
+          aria-pressed=${this.toggle ? this.selected ? "true" : "false" : a}
+          aria-disabled=${this.disabled ? "true" : a}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleClick}
+        >
+          ${s}
+        </a>
+      ` : l`
+      <button
+        aria-label=${this.ariaLabelText || a}
+        aria-pressed=${this.toggle ? this.selected ? "true" : "false" : a}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        ${s}
+      </button>
+    `;
+  }
+};
+t.styles = [p.styles, v];
+e([
+  o({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "toggle", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "selected", 2);
+e([
+  o({ type: String })
+], t.prototype, "icon", 2);
+e([
+  o({ type: String, attribute: "selected-icon" })
+], t.prototype, "selectedIcon", 2);
+e([
+  o({ type: String, attribute: "aria-label" })
+], t.prototype, "ariaLabelText", 2);
+e([
+  o({ type: String })
+], t.prototype, "href", 2);
+e([
+  o({ type: String })
+], t.prototype, "target", 2);
+t = e([
+  u("md-icon-button")
+], t);
+export {
+  t as MdIconButton
+};
+//# sourceMappingURL=icon-button.js.map