@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/components/badge/badge.js

@@ -1,93 +1,4 @@
-import { css as h, nothing as c, html as g } from "lit";
-import { property as l, queryAssignedElements as m, customElement as f } from "lit/decorators.js";
-import { M as p } from "../../chunks/base-component-DQTjlEVL.js";
-const u = h`
-  :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;
-  }
-`;
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, r, n, s) => {
-  for (var e = s > 1 ? void 0 : s ? b(r, n) : r, a = d.length - 1, i; a >= 0; a--)
-    (i = d[a]) && (e = (s ? i(r, n, e) : i(e)) || e);
-  return s && e && y(r, n, e), e;
-};
-let t = class extends p {
-  constructor() {
-    super(...arguments), this.value = "", this.dot = !1, this.anchored = !1, this.handleSlotChange = () => {
-      this.anchored = this.assignedChildren.length > 0;
-    };
-  }
-  render() {
-    return g`
-      <slot @slotchange=${this.handleSlotChange}></slot>
-      <span class="badge">
-        ${!this.dot && this.value ? this.value : c}
-      </span>
-    `;
-  }
-};
-t.styles = [p.styles, u];
-o([
-  l({ type: String, reflect: !0 })
-], t.prototype, "value", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
-], t.prototype, "dot", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
-], t.prototype, "anchored", 2);
-o([
-  m()
-], t.prototype, "assignedChildren", 2);
-t = o([
-  f("md-badge")
-], t);
+import { t as r } from "../../chunks/badge-G4EjcMoy.js";
 export {
-  t as MdBadge
+  r as MdBadge
 };
-//# sourceMappingURL=badge.js.map

package/dist/components/button/button.js

@@ -1,263 +1,4 @@
-import { css as g, nothing as s, html as a } from "lit";
-import { property as n, queryAssignedElements as p, customElement as v } from "lit/decorators.js";
-import { M as b } from "../../chunks/base-component-DQTjlEVL.js";
-import "../../internal/ripple/ripple.js";
-import "../../chunks/focus-ring-Dl-XoEKK.js";
-import "../icon/icon.js";
-const u = g`
-  :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);
-    }
-  }
-`;
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, i, d, l) => {
-  for (var r = l > 1 ? void 0 : l ? y(i, d) : i, h = e.length - 1, c; h >= 0; h--)
-    (c = e[h]) && (r = (l ? c(i, d, r) : c(r)) || r);
-  return l && r && m(i, d, r), r;
-};
-let t = class extends b {
-  constructor() {
-    super(...arguments), this.variant = "filled", this.disabled = !1, this.loading = !1, this.type = "button", this.href = "", this.target = "", this.icon = "", this.trailingIcon = "", this.handleClick = (e) => {
-      if (this.disabled || this.loading) {
-        e.preventDefault(), e.stopImmediatePropagation();
-        return;
-      }
-      if (this.type === "submit" || this.type === "reset") {
-        const i = this.closest("form");
-        i && (this.type === "submit" ? i.requestSubmit() : i.reset());
-      }
-    };
-  }
-  handleSlotChange() {
-    const e = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0), i = !!(this.trailingIcon || this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0);
-    this.toggleAttribute("has-icon", e), this.toggleAttribute("has-trailing-icon", i);
-  }
-  firstUpdated() {
-    this.handleSlotChange();
-  }
-  render() {
-    const e = a`
-      <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>
-      <md-focus-ring></md-focus-ring>
-      <span class="content">
-        ${this.loading ? a`<span class="spinner" aria-hidden="true"></span>` : a`
-              <slot name="icon" @slotchange=${this.handleSlotChange}>
-                ${this.icon ? a`<md-icon name=${this.icon}></md-icon>` : s}
-              </slot>
-            `}
-        <slot @slotchange=${this.handleSlotChange}></slot>
-        ${this.loading ? s : a`
-              <slot name="trailing-icon" @slotchange=${this.handleSlotChange}>
-                ${this.trailingIcon ? a`<md-icon name=${this.trailingIcon}></md-icon>` : s}
-              </slot>
-            `}
-      </span>
-    `;
-    return this.href ? a`
-        <a
-          href=${this.disabled ? s : this.href}
-          target=${this.target || s}
-          aria-disabled=${this.disabled ? "true" : s}
-          tabindex=${this.disabled ? "-1" : "0"}
-          @click=${this.handleClick}
-        >
-          ${e}
-        </a>
-      ` : a`
-      <button
-        type=${this.type}
-        ?disabled=${this.disabled || this.loading}
-        @click=${this.handleClick}
-      >
-        ${e}
-      </button>
-    `;
-  }
-};
-t.styles = [b.styles, u];
-o([
-  n({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
-o([
-  n({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-o([
-  n({ type: Boolean, reflect: !0 })
-], t.prototype, "loading", 2);
-o([
-  n({ type: String })
-], t.prototype, "type", 2);
-o([
-  n({ type: String })
-], t.prototype, "href", 2);
-o([
-  n({ type: String })
-], t.prototype, "target", 2);
-o([
-  n({ type: String })
-], t.prototype, "icon", 2);
-o([
-  n({ type: String, attribute: "trailing-icon" })
-], t.prototype, "trailingIcon", 2);
-o([
-  p({ slot: "icon" })
-], t.prototype, "assignedIcons", 2);
-o([
-  p({ slot: "trailing-icon" })
-], t.prototype, "assignedTrailingIcons", 2);
-t = o([
-  v("md-button")
-], t);
+import { t as o } from "../../chunks/button-B4TSZ7Sl.js";
 export {
-  t as MdButton
+  o as MdButton
 };
-//# sourceMappingURL=button.js.map

package/dist/components/card/card.js

@@ -1,169 +1,4 @@
-import { css as h, nothing as r, html as l } from "lit";
-import { property as o, customElement as m } from "lit/decorators.js";
-import { M as v } from "../../chunks/base-component-DQTjlEVL.js";
-import "../../internal/ripple/ripple.js";
-import "../../chunks/focus-ring-Dl-XoEKK.js";
-const x = h`
-  :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;
-  }
-`;
-var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (e, s, d, n) => {
-  for (var i = n > 1 ? void 0 : n ? f(s, d) : s, c = e.length - 1, p; c >= 0; c--)
-    (p = e[c]) && (i = (n ? p(s, d, i) : p(i)) || i);
-  return n && i && b(s, d, i), i;
-};
-let t = class extends v {
-  constructor() {
-    super(...arguments), this.variant = "elevated", this.interactive = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (e) => {
-      if (this.disabled) {
-        e.preventDefault(), e.stopImmediatePropagation();
-        return;
-      }
-      this.interactive && this.emitEvent("card-click");
-    };
-  }
-  render() {
-    const e = l`
-      ${this.interactive ? l`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : r}
-      <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 ? l`
-        <a
-          class="card-container"
-          href=${this.disabled ? r : this.href}
-          target=${this.target || r}
-          aria-disabled=${this.disabled ? "true" : r}
-          tabindex=${this.disabled ? "-1" : this.interactive ? "0" : r}
-          @click=${this.handleClick}
-        >
-          ${e}
-        </a>
-      ` : l`
-      <div
-        class="card-container"
-        tabindex=${this.interactive && !this.disabled ? "0" : r}
-        @click=${this.handleClick}
-      >
-        ${e}
-      </div>
-    `;
-  }
-};
-t.styles = [v.styles, x];
-a([
-  o({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
-a([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "interactive", 2);
-a([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-a([
-  o({ type: String })
-], t.prototype, "href", 2);
-a([
-  o({ type: String })
-], t.prototype, "target", 2);
-t = a([
-  m("md-card")
-], t);
+import { t as o } from "../../chunks/card-DVffdPpv.js";
 export {
-  t as MdCard
+  o as MdCard
 };
-//# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.css.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAoG1B,CAAC"}
+{"version":3,"file":"checkbox.css.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAyG1B,CAAC"}