@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/badge-G4EjcMoy.js

@@ -0,0 +1,89 @@
+import { n as s, t } from "./decorate-DXuynaiA.js";
+import { css as i, html as a, nothing as n } from "lit";
+import { customElement as l, property as o, queryAssignedElements as d } from "lit/decorators.js";
+var h = i`
+  :host {
+    display: inline-flex;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .badge {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--md-sys-color-error, #B3261E);
+    color: var(--md-sys-color-on-error, #FFFFFF);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
+                opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* Small Dot Badge */
+  :host(:not([value])) .badge,
+  :host([dot]) .badge {
+    width: 6px;
+    height: 6px;
+    padding: 0;
+  }
+
+  /* Large Badge with text */
+  :host([value]:not([dot])) .badge {
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-size: 11px;
+    letter-spacing: 0.5px;
+  }
+
+  /* Anchored Positioning over slotted element */
+  :host([anchored]) .badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    z-index: 10;
+  }
+`, e = class extends s {
+  constructor(...r) {
+    super(...r), this.value = "", this.dot = !1, this.anchored = !1, this.handleSlotChange = () => {
+      this.anchored = this.assignedChildren.length > 0;
+    };
+  }
+  static {
+    this.styles = [s.styles, h];
+  }
+  render() {
+    return a`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <span class="badge">
+        ${!this.dot && this.value ? this.value : n}
+      </span>
+    `;
+  }
+};
+t([o({
+  type: String,
+  reflect: !0
+})], e.prototype, "value", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "dot", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "anchored", void 0);
+t([d()], e.prototype, "assignedChildren", void 0);
+e = t([l("md-badge")], e);
+export {
+  e as t
+};
+
+//# sourceMappingURL=badge-G4EjcMoy.js.map

package/dist/chunks/badge-G4EjcMoy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-G4EjcMoy.js","names":[],"sources":["../../src/components/badge/badge.css.ts","../../src/components/badge/badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const badgeStyles = css`\n  :host {\n    display: inline-flex;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .badge {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--md-sys-color-error, #B3261E);\n    color: var(--md-sys-color-on-error, #FFFFFF);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-weight: 500;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* Small Dot Badge */\n  :host(:not([value])) .badge,\n  :host([dot]) .badge {\n    width: 6px;\n    height: 6px;\n    padding: 0;\n  }\n\n  /* Large Badge with text */\n  :host([value]:not([dot])) .badge {\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    font-size: 11px;\n    letter-spacing: 0.5px;\n  }\n\n  /* Anchored Positioning over slotted element */\n  :host([anchored]) .badge {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    z-index: 10;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { badgeStyles } from './badge.css.js';\n\n@customElement('md-badge')\nexport class MdBadge extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, badgeStyles];\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  @property({ type: Boolean, reflect: true })\n  anchored = false;\n\n  @queryAssignedElements()\n  private assignedChildren!: HTMLElement[];\n\n  private handleSlotChange = () => {\n    this.anchored = this.assignedChildren.length > 0;\n  };\n\n  override render() {\n    return html`\n      <slot @slotchange=${this.handleSlotChange}></slot>\n      <span class=\"badge\">\n        ${!this.dot && this.value ? this.value : nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n"],"mappings":";;;AAEA,IAAa,IAAc;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,GCId,IAAN,cAAsB,EAAc;AAAA;iBAIjC,KAAA,QAAA,IAGF,KAAA,MAAA,IAGK,KAAA,WAAA,IAKsB,KAAA,mBAAA,MAAA;AAC/B,WAAK,WAAW,KAAK,iBAAiB,SAAS;AAAA,IACjD;AAAA;;AAhByB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAW;AAAA;EAkB3D,SAAkB;AAChB,WAAO;AAAA,0BACe,KAAK,gBAAA;AAAA;AAAA,UAErB,CAAC,KAAK,OAAO,KAAK,QAAQ,KAAK,QAAQ,CAAA;AAAA;AAAA;AAAA,EAG/C;AACF;AAxBG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,oBAAA,MAAA;AAbxB,IAAA,EAAA,CAAA,EAAc,UAAU,CAAA,GAAA,CAAA"}

package/dist/chunks/button-B4TSZ7Sl.js

@@ -0,0 +1,250 @@
+import { n as l, t as o } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as h, html as e, nothing as n } from "lit";
+import { customElement as c, property as i, queryAssignedElements as d } from "lit/decorators.js";
+var p = h`
+  :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;
+    min-width: 64px;
+    height: 40px;
+    padding: 0 24px;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    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;
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                color 200ms cubic-bezier(0.2, 0, 0, 1);
+    overflow: hidden;
+  }
+
+  :host([has-icon]) button,
+  :host([has-icon]) a {
+    padding-left: 16px;
+  }
+
+  :host([has-trailing-icon]) button,
+  :host([has-trailing-icon]) a {
+    padding-right: 16px;
+  }
+
+  /* --- Filled (Default) --- */
+  :host(:not([variant])) button,
+  :host(:not([variant])) a,
+  :host([variant="filled"]) button,
+  :host([variant="filled"]) a {
+    background-color: var(--md-sys-color-primary, #6750a4);
+    color: var(--md-sys-color-on-primary, #ffffff);
+    box-shadow: var(--md-sys-elevation-level0, none);
+  }
+
+  :host([variant="filled"]:hover) button,
+  :host([variant="filled"]:hover) a,
+  :host(:not([variant]):hover) button,
+  :host(:not([variant]):hover) a {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  /* --- Elevated --- */
+  :host([variant="elevated"]) button,
+  :host([variant="elevated"]) a {
+    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);
+    color: var(--md-sys-color-primary, #6750a4);
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  :host([variant="elevated"]:hover) button,
+  :host([variant="elevated"]:hover) a {
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));
+  }
+
+  /* --- Filled 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);
+    box-shadow: var(--md-sys-elevation-level0, none);
+  }
+
+  :host([variant="tonal"]:hover) button,
+  :host([variant="tonal"]:hover) a {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  /* --- Outlined --- */
+  :host([variant="outlined"]) button,
+  :host([variant="outlined"]) a {
+    background-color: transparent;
+    color: var(--md-sys-color-primary, #6750a4);
+    border: 1px solid var(--md-sys-color-outline, #79747e);
+  }
+
+  /* --- Text --- */
+  :host([variant="text"]) button,
+  :host([variant="text"]) a {
+    background-color: transparent;
+    color: var(--md-sys-color-primary, #6750a4);
+    padding: 0 12px;
+  }
+
+  /* --- Disabled --- */
+  :host([disabled]) button,
+  :host([disabled]) a {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  :host([disabled]:not([variant="outlined"]):not([variant="text"])) button,
+  :host([disabled]:not([variant="outlined"]):not([variant="text"])) a {
+    background-color: rgba(29, 27, 32, 0.12);
+    color: rgba(29, 27, 32, 0.38);
+  }
+
+  :host([disabled][variant="outlined"]) button,
+  :host([disabled][variant="outlined"]) a {
+    border-color: rgba(29, 27, 32, 0.12);
+    color: rgba(29, 27, 32, 0.38);
+  }
+
+  :host([disabled][variant="text"]) button,
+  :host([disabled][variant="text"]) a {
+    color: rgba(29, 27, 32, 0.38);
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: md-spin 800ms linear infinite;
+  }
+
+  @keyframes md-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`, t = class extends l {
+  constructor(...a) {
+    super(...a), this.variant = "filled", this.disabled = !1, this.loading = !1, this.type = "button", this.href = "", this.target = "", this.icon = "", this.trailingIcon = "", this.handleClick = (s) => {
+      if (this.disabled || this.loading) {
+        s.preventDefault(), s.stopImmediatePropagation();
+        return;
+      }
+      if (this.type === "submit" || this.type === "reset") {
+        const r = this.closest("form");
+        r && (this.type === "submit" ? r.requestSubmit() : r.reset());
+      }
+    };
+  }
+  static {
+    this.styles = [l.styles, p];
+  }
+  handleSlotChange() {
+    const a = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0), s = !!(this.trailingIcon || this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0);
+    this.toggleAttribute("has-icon", a), this.toggleAttribute("has-trailing-icon", s);
+  }
+  firstUpdated() {
+    this.handleSlotChange();
+  }
+  render() {
+    const a = e`
+      <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>
+      <md-focus-ring></md-focus-ring>
+      <span class="content">
+        ${this.loading ? e`<span class="spinner" aria-hidden="true"></span>` : e`
+              <slot name="icon" @slotchange=${this.handleSlotChange}>
+                ${this.icon ? e`<md-icon name=${this.icon}></md-icon>` : n}
+              </slot>
+            `}
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.loading ? n : e`
+              <slot name="trailing-icon" @slotchange=${this.handleSlotChange}>
+                ${this.trailingIcon ? e`<md-icon name=${this.trailingIcon}></md-icon>` : n}
+              </slot>
+            `}
+      </span>
+    `;
+    return this.href ? e`
+        <a
+          href=${this.disabled ? n : this.href}
+          target=${this.target || n}
+          aria-disabled=${this.disabled ? "true" : n}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleClick}
+        >
+          ${a}
+        </a>
+      ` : e`
+      <button
+        type=${this.type}
+        ?disabled=${this.disabled || this.loading}
+        @click=${this.handleClick}
+      >
+        ${a}
+      </button>
+    `;
+  }
+};
+o([i({
+  type: String,
+  reflect: !0
+})], t.prototype, "variant", void 0);
+o([i({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "disabled", void 0);
+o([i({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "loading", void 0);
+o([i({ type: String })], t.prototype, "type", void 0);
+o([i({ type: String })], t.prototype, "href", void 0);
+o([i({ type: String })], t.prototype, "target", void 0);
+o([i({ type: String })], t.prototype, "icon", void 0);
+o([i({
+  type: String,
+  attribute: "trailing-icon"
+})], t.prototype, "trailingIcon", void 0);
+o([d({ slot: "icon" })], t.prototype, "assignedIcons", void 0);
+o([d({ slot: "trailing-icon" })], t.prototype, "assignedTrailingIcons", void 0);
+t = o([c("md-button")], t);
+export {
+  t
+};
+
+//# sourceMappingURL=button-B4TSZ7Sl.js.map

package/dist/chunks/button-B4TSZ7Sl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-B4TSZ7Sl.js","names":[],"sources":["../../src/components/button/button.css.ts","../../src/components/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = 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    min-width: 64px;\n    height: 40px;\n    padding: 0 24px;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\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    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  :host([has-icon]) button,\n  :host([has-icon]) a {\n    padding-left: 16px;\n  }\n\n  :host([has-trailing-icon]) button,\n  :host([has-trailing-icon]) a {\n    padding-right: 16px;\n  }\n\n  /* --- Filled (Default) --- */\n  :host(:not([variant])) button,\n  :host(:not([variant])) a,\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    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"]:hover) button,\n  :host([variant=\"filled\"]:hover) a,\n  :host(:not([variant]):hover) button,\n  :host(:not([variant]):hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Elevated --- */\n  :host([variant=\"elevated\"]) button,\n  :host([variant=\"elevated\"]) a {\n    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n    color: var(--md-sys-color-primary, #6750a4);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host([variant=\"elevated\"]:hover) button,\n  :host([variant=\"elevated\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled 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    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"tonal\"]:hover) button,\n  :host([variant=\"tonal\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    border: 1px solid var(--md-sys-color-outline, #79747e);\n  }\n\n  /* --- Text --- */\n  :host([variant=\"text\"]) button,\n  :host([variant=\"text\"]) a {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    padding: 0 12px;\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) button,\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) a {\n    background-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button,\n  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"text\"]) button,\n  :host([disabled][variant=\"text\"]) a {\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .spinner {\n    width: 18px;\n    height: 18px;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: md-spin 800ms linear infinite;\n  }\n\n  @keyframes md-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } 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 { buttonStyles } from './button.css.js';\n\nexport type ButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n@customElement('md-button')\nexport class MdButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'filled';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon' })\n  private assignedTrailingIcons!: HTMLElement[];\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const form = this.closest('form');\n      if (form) {\n        if (this.type === 'submit') {\n          form.requestSubmit();\n        } else {\n          form.reset();\n        }\n      }\n    }\n  };\n\n  private handleSlotChange(): void {\n    const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n    const hasTrailing = Boolean(this.trailingIcon || (this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0));\n\n    this.toggleAttribute('has-icon', hasLeading);\n    this.toggleAttribute('has-trailing-icon', hasTrailing);\n  }\n\n  override firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  override render() {\n    const content = html`\n      <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        ${this.loading\n          ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>`\n          : html`\n              <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n                ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n              </slot>\n            `}\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${!this.loading\n          ? html`\n              <slot name=\"trailing-icon\" @slotchange=${this.handleSlotChange}>\n                ${this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing}\n              </slot>\n            `\n          : nothing}\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-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        type=${this.type}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button': MdButton;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/card-DVffdPpv.js

@@ -0,0 +1,163 @@
+import { n as d, t as i } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import { css as n, html as r, nothing as t } from "lit";
+import { customElement as l, property as a } from "lit/decorators.js";
+var c = n`
+  :host {
+    display: block;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    position: relative;
+    overflow: hidden;
+    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* --- Elevated (Default) --- */
+  :host(:not([variant])),
+  :host([variant="elevated"]) {
+    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  :host(:not([variant])[interactive]:hover),
+  :host([variant="elevated"][interactive]:hover) {
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));
+  }
+
+  /* --- Filled --- */
+  :host([variant="filled"]) {
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+    box-shadow: var(--md-sys-elevation-level0, none);
+  }
+
+  :host([variant="filled"][interactive]:hover) {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  /* --- Outlined --- */
+  :host([variant="outlined"]) {
+    background-color: var(--md-sys-color-surface, #FEF7FF);
+    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+    box-shadow: var(--md-sys-elevation-level0, none);
+  }
+
+  :host([variant="outlined"][interactive]:hover) {
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  :host([interactive]) {
+    cursor: pointer;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  ::slotted([slot="media"]) {
+    width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+    display: block;
+  }
+
+  .header {
+    padding: 16px 16px 0;
+  }
+
+  .body {
+    padding: 16px;
+    flex: 1;
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 20px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 8px 16px 16px;
+  }
+`, e = class extends d {
+  constructor(...o) {
+    super(...o), this.variant = "elevated", this.interactive = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (s) => {
+      if (this.disabled) {
+        s.preventDefault(), s.stopImmediatePropagation();
+        return;
+      }
+      this.interactive && this.emitEvent("card-click");
+    };
+  }
+  static {
+    this.styles = [d.styles, c];
+  }
+  render() {
+    const o = r`
+      ${this.interactive ? r`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : t}
+      <slot name="media"></slot>
+      <div class="header">
+        <slot name="header"></slot>
+      </div>
+      <div class="body">
+        <slot></slot>
+      </div>
+      <div class="actions">
+        <slot name="actions"></slot>
+      </div>
+    `;
+    return this.href ? r`
+        <a
+          class="card-container"
+          href=${this.disabled ? t : this.href}
+          target=${this.target || t}
+          aria-disabled=${this.disabled ? "true" : t}
+          tabindex=${this.disabled ? "-1" : this.interactive ? "0" : t}
+          @click=${this.handleClick}
+        >
+          ${o}
+        </a>
+      ` : r`
+      <div
+        class="card-container"
+        tabindex=${this.interactive && !this.disabled ? "0" : t}
+        @click=${this.handleClick}
+      >
+        ${o}
+      </div>
+    `;
+  }
+};
+i([a({
+  type: String,
+  reflect: !0
+})], e.prototype, "variant", void 0);
+i([a({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "interactive", void 0);
+i([a({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "disabled", void 0);
+i([a({ type: String })], e.prototype, "href", void 0);
+i([a({ type: String })], e.prototype, "target", void 0);
+e = i([l("md-card")], e);
+export {
+  e as t
+};
+
+//# sourceMappingURL=card-DVffdPpv.js.map

package/dist/chunks/card-DVffdPpv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-DVffdPpv.js","names":[],"sources":["../../src/components/card/card.css.ts","../../src/components/card/card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const cardStyles = css`\n  :host {\n    display: block;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    position: relative;\n    overflow: hidden;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Elevated (Default) --- */\n  :host(:not([variant])),\n  :host([variant=\"elevated\"]) {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host(:not([variant])[interactive]:hover),\n  :host([variant=\"elevated\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) {\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"outlined\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host([interactive]) {\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .card-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  ::slotted([slot=\"media\"]) {\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    display: block;\n  }\n\n  .header {\n    padding: 16px 16px 0;\n  }\n\n  .body {\n    padding: 16px;\n    flex: 1;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 8px 16px 16px;\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 { cardStyles } from './card.css.js';\n\nexport type CardVariant = 'elevated' | 'filled' | 'outlined';\n\n@customElement('md-card')\nexport class MdCard extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, cardStyles];\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    if (this.interactive) {\n      this.emitEvent('card-click');\n    }\n  };\n\n  override render() {\n    const innerContent = html`\n      ${this.interactive ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n      <slot name=\"media\"></slot>\n      <div class=\"header\">\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"body\">\n        <slot></slot>\n      </div>\n      <div class=\"actions\">\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"card-container\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : (this.interactive ? '0' : nothing)}\n          @click=${this.handleClick}\n        >\n          ${innerContent}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"card-container\"\n        tabindex=${this.interactive && !this.disabled ? '0' : nothing}\n        @click=${this.handleClick}\n      >\n        ${innerContent}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-card': MdCard;\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;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,GCQb,IAAN,cAAqB,EAAc;AAAA;iBAIjB,KAAA,UAAA,YAGT,KAAA,cAAA,IAGH,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGE,KAAA,SAAA,IAEc,KAAA,cAAA,CAAA,MAAsB;AAC3C,UAAI,KAAK,UAAU;AACjB,QAAA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AAC/B;AAAA,MACF;AACA,MAAI,KAAK,eACP,KAAK,UAAU,YAAY;AAAA,IAE/B;AAAA;;AA1ByB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;AAAA;EA4B1D,SAAkB;AAChB,UAAM,IAAe;AAAA,QACjB,KAAK,cAAc,yBAA4B,KAAK,QAAA,iDAAyD,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAajH,WAAI,KAAK,OACA;AAAA;AAAA;AAAA,iBAGI,KAAK,WAAW,IAAU,KAAK,IAAA;AAAA,mBAC7B,KAAK,UAAU,CAAA;AAAA,0BACR,KAAK,WAAW,SAAS,CAAA;AAAA,qBAC9B,KAAK,WAAW,OAAQ,KAAK,cAAc,MAAM,CAAA;AAAA,mBACnD,KAAK,WAAA;AAAA;AAAA,YAEZ,CAAA;AAAA;AAAA,UAKD;AAAA;AAAA;AAAA,mBAGQ,KAAK,eAAe,CAAC,KAAK,WAAW,MAAM,CAAA;AAAA,iBAC7C,KAAK,WAAA;AAAA;AAAA,UAEZ,CAAA;AAAA;AAAA;AAAA,EAGR;AACF;AAlEG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAhB3B,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA"}