@manzanohq/components 0.1.1

package/dist/components/alert/alert.component.d.ts

@@ -0,0 +1,39 @@
+import { nothing } from 'lit';
+import { ManzanoElement } from '../../internal/manzano-element.js';
+import { MzIcon } from '../icon/icon.component.js';
+/**
+ * @summary An alert for displaying important messages.
+ *
+ * @tag mz-alert
+ *
+ * @dependency mz-icon
+ *
+ * @slot - The alert's content.
+ * @slot icon - Optional icon to display.
+ *
+ * @event mz-close - Emitted when the close button is clicked.
+ *
+ * @csspart base - The alert's base wrapper.
+ * @csspart icon - The icon container.
+ * @csspart content - The content container.
+ * @csspart close - The close button.
+ *
+ * @cssproperty --mz-alert-radius - Override the alert border radius.
+ */
+export declare class MzAlert extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static dependencies: {
+        'mz-icon': typeof MzIcon;
+    };
+    /** The alert's semantic variant. */
+    variant: 'primary' | 'danger' | 'success' | 'warning' | 'neutral';
+    /** The alert's visual appearance. */
+    appearance: 'soft' | 'filled' | 'outline';
+    /** Makes the alert closable. */
+    closable: boolean;
+    /** Whether the alert is open (visible). */
+    open: boolean;
+    private handleClose;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=alert.component.d.ts.map

package/dist/components/alert/alert.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC,MAAM,CAAC,MAAM,4BAAU;IAEvB,MAAM,CAAC,YAAY;;MAEjB;IAEF,oCAAoC;IACP,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAa;IAE3G,qCAAqC;IACR,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAEhF,gCAAgC;IACY,QAAQ,UAAS;IAE7D,2CAA2C;IACC,IAAI,UAAQ;IAExD,OAAO,CAAC,WAAW;IAKnB,MAAM;CAuBP"}

package/dist/components/alert/alert.component.js

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { MzIcon } from "../icon/icon.component.js";
+import styles from "./alert.styles.js";
+class MzAlert extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "neutral";
+    this.appearance = "soft";
+    this.closable = false;
+    this.open = true;
+  }
+  handleClose() {
+    this.open = false;
+    this.emit("mz-close");
+  }
+  render() {
+    if (!this.open) return nothing;
+    return html`
+      <div part="base" class="alert" role="alert">
+        <span part="icon" class="alert__icon">
+          <slot name="icon"></slot>
+        </span>
+        <span part="content" class="alert__content">
+          <slot></slot>
+        </span>
+        ${this.closable ? html`<button
+              part="close"
+              class="alert__close"
+              type="button"
+              aria-label="Close"
+              @click=${this.handleClose}
+            >&times;</button>` : nothing}
+      </div>
+    `;
+  }
+}
+MzAlert.styles = styles;
+MzAlert.dependencies = {
+  "mz-icon": MzIcon
+};
+__decorateClass([
+  property({ reflect: true })
+], MzAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzAlert.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzAlert.prototype, "open", 2);
+export {
+  MzAlert
+};
+//# sourceMappingURL=alert.component.js.map

package/dist/components/alert/alert.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/alert/alert.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { MzIcon } from '../icon/icon.component.js';\nimport styles from './alert.styles.js';\n\n/**\n * @summary An alert for displaying important messages.\n *\n * @tag mz-alert\n *\n * @dependency mz-icon\n *\n * @slot - The alert's content.\n * @slot icon - Optional icon to display.\n *\n * @event mz-close - Emitted when the close button is clicked.\n *\n * @csspart base - The alert's base wrapper.\n * @csspart icon - The icon container.\n * @csspart content - The content container.\n * @csspart close - The close button.\n *\n * @cssproperty --mz-alert-radius - Override the alert border radius.\n */\nexport class MzAlert extends ManzanoElement {\n  static styles = styles;\n\n  static dependencies = {\n    'mz-icon': MzIcon\n  };\n\n  /** The alert's semantic variant. */\n  @property({ reflect: true }) variant: 'primary' | 'danger' | 'success' | 'warning' | 'neutral' = 'neutral';\n\n  /** The alert's visual appearance. */\n  @property({ reflect: true }) appearance: 'soft' | 'filled' | 'outline' = 'soft';\n\n  /** Makes the alert closable. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** Whether the alert is open (visible). */\n  @property({ type: Boolean, reflect: true }) open = true;\n\n  private handleClose() {\n    this.open = false;\n    this.emit('mz-close');\n  }\n\n  render() {\n    if (!this.open) return nothing;\n\n    return html`\n      <div part=\"base\" class=\"alert\" role=\"alert\">\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"content\" class=\"alert__content\">\n          <slot></slot>\n        </span>\n        ${this.closable\n          ? html`<button\n              part=\"close\"\n              class=\"alert__close\"\n              type=\"button\"\n              aria-label=\"Close\"\n              @click=${this.handleClose}\n            >&times;</button>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,OAAO,YAAY;AAqBZ,MAAM,gBAAgB,eAAe;AAAA,EAArC;AAAA;AAQwB,mBAAoE;AAGpE,sBAA4C;AAG7B,oBAAW;AAGX,gBAAO;AAAA;AAAA,EAE3C,cAAc;AACpB,SAAK,OAAO;AACZ,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEA,SAAS;AACP,QAAI,CAAC,KAAK,KAAM,QAAO;AAEvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQD,KAAK,WACH;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKW,KAAK,WAAW;AAAA,iCAE3B,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA/Ca,QACJ,SAAS;AADL,QAGJ,eAAe;AAAA,EACpB,WAAW;AACb;AAG6B;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GARhB,QAQkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAXhB,QAWkB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAd/B,QAciC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjB/B,QAiBiC;",
+  "names": []
+}

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,8 @@
+import { MzAlert } from './alert.component.js';
+export * from './alert.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-alert': MzAlert;
+    }
+}
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,cAAc,sBAAsB,CAAC;AAIrC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/alert/alert.js

@@ -0,0 +1,4 @@
+import { MzAlert } from "./alert.component.js";
+export * from "./alert.component.js";
+MzAlert.define("mz-alert");
+//# sourceMappingURL=alert.js.map

package/dist/components/alert/alert.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/alert/alert.ts"],
+  "sourcesContent": ["import { MzAlert } from './alert.component.js';\n\nexport * from './alert.component.js';\n\nMzAlert.define('mz-alert');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-alert': MzAlert;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,cAAc;AAEd,QAAQ,OAAO,UAAU;",
+  "names": []
+}

package/dist/components/alert/alert.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=alert.styles.d.ts.map

package/dist/components/alert/alert.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.styles.ts"],"names":[],"mappings":";AAGA,wBAkHE"}

package/dist/components/alert/alert.styles.js

@@ -0,0 +1,121 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var alert_styles_default = [
+  componentStyles,
+  css`
+    @layer base, variants, appearances, states;
+
+    @layer base {
+      :host {
+        display: block;
+      }
+
+      .alert {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--mz-space-sm);
+        padding: var(--mz-space-md) var(--mz-space-lg);
+        border: var(--mz-border-width-sm) solid transparent;
+        border-radius: var(--mz-alert-radius, var(--mz-radius-lg));
+        background: var(--_bg);
+        color: var(--_text);
+        border-color: var(--_border, transparent);
+        font-family: var(--mz-font-sans);
+        font-size: var(--mz-font-size-sm);
+        line-height: var(--mz-line-height-normal);
+      }
+
+      .alert__icon {
+        display: flex;
+        flex-shrink: 0;
+        padding-top: var(--mz-space-3xs);
+        font-size: var(--mz-font-size-lg);
+      }
+
+      .alert__content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .alert__close {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: var(--mz-space-2xs);
+        margin: calc(var(--mz-space-2xs) * -1);
+        cursor: pointer;
+        color: inherit;
+        opacity: 0.7;
+        border-radius: var(--mz-radius-sm);
+        transition: opacity var(--mz-transition-fast);
+        font-size: var(--mz-font-size-lg);
+        line-height: 1;
+      }
+
+      .alert__close:hover {
+        opacity: 1;
+      }
+
+      .alert__close:focus-visible {
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+    }
+
+    @layer variants {
+      :host([variant='primary']) {
+        --_color: var(--mz-color-primary);
+      }
+
+      :host([variant='danger']) {
+        --_color: var(--mz-color-danger);
+      }
+
+      :host([variant='success']) {
+        --_color: var(--mz-color-success);
+      }
+
+      :host([variant='warning']) {
+        --_color: var(--mz-color-warning);
+      }
+
+      :host([variant='neutral']),
+      :host(:not([variant])) {
+        --_color: var(--mz-color-neutral);
+      }
+    }
+
+    @layer appearances {
+      :host([appearance='soft']),
+      :host(:not([appearance])) {
+        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);
+        --_text: var(--mz-color-text);
+        --_border: color-mix(in srgb, var(--_color) 30%, transparent);
+      }
+
+      :host([appearance='filled']) {
+        --_bg: var(--_color);
+        --_text: var(--mz-color-on-primary);
+      }
+
+      :host([appearance='outline']) {
+        --_bg: transparent;
+        --_text: var(--mz-color-text);
+        --_border: var(--_color);
+      }
+    }
+
+    @layer states {
+      :host([hidden]) {
+        display: none;
+      }
+    }
+  `
+];
+export {
+  alert_styles_default as default
+};
+//# sourceMappingURL=alert.styles.js.map

package/dist/components/alert/alert.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/alert/alert.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    @layer base, variants, appearances, states;\n\n    @layer base {\n      :host {\n        display: block;\n      }\n\n      .alert {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--mz-space-sm);\n        padding: var(--mz-space-md) var(--mz-space-lg);\n        border: var(--mz-border-width-sm) solid transparent;\n        border-radius: var(--mz-alert-radius, var(--mz-radius-lg));\n        background: var(--_bg);\n        color: var(--_text);\n        border-color: var(--_border, transparent);\n        font-family: var(--mz-font-sans);\n        font-size: var(--mz-font-size-sm);\n        line-height: var(--mz-line-height-normal);\n      }\n\n      .alert__icon {\n        display: flex;\n        flex-shrink: 0;\n        padding-top: var(--mz-space-3xs);\n        font-size: var(--mz-font-size-lg);\n      }\n\n      .alert__content {\n        flex: 1;\n        min-width: 0;\n      }\n\n      .alert__close {\n        display: flex;\n        flex-shrink: 0;\n        align-items: center;\n        justify-content: center;\n        background: none;\n        border: none;\n        padding: var(--mz-space-2xs);\n        margin: calc(var(--mz-space-2xs) * -1);\n        cursor: pointer;\n        color: inherit;\n        opacity: 0.7;\n        border-radius: var(--mz-radius-sm);\n        transition: opacity var(--mz-transition-fast);\n        font-size: var(--mz-font-size-lg);\n        line-height: 1;\n      }\n\n      .alert__close:hover {\n        opacity: 1;\n      }\n\n      .alert__close:focus-visible {\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n    }\n\n    @layer variants {\n      :host([variant='primary']) {\n        --_color: var(--mz-color-primary);\n      }\n\n      :host([variant='danger']) {\n        --_color: var(--mz-color-danger);\n      }\n\n      :host([variant='success']) {\n        --_color: var(--mz-color-success);\n      }\n\n      :host([variant='warning']) {\n        --_color: var(--mz-color-warning);\n      }\n\n      :host([variant='neutral']),\n      :host(:not([variant])) {\n        --_color: var(--mz-color-neutral);\n      }\n    }\n\n    @layer appearances {\n      :host([appearance='soft']),\n      :host(:not([appearance])) {\n        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);\n        --_text: var(--mz-color-text);\n        --_border: color-mix(in srgb, var(--_color) 30%, transparent);\n      }\n\n      :host([appearance='filled']) {\n        --_bg: var(--_color);\n        --_text: var(--mz-color-on-primary);\n      }\n\n      :host([appearance='outline']) {\n        --_bg: transparent;\n        --_text: var(--mz-color-text);\n        --_border: var(--_color);\n      }\n    }\n\n    @layer states {\n      :host([hidden]) {\n        display: none;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,uBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHF;",
+  "names": []
+}

package/dist/components/avatar/avatar.component.d.ts

@@ -0,0 +1,39 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+import { MzIcon } from '../icon/icon.component.js';
+/**
+ * @summary An avatar for representing users or entities.
+ *
+ * @tag mz-avatar
+ *
+ * @dependency mz-icon
+ *
+ * @csspart base - The avatar's base wrapper.
+ * @csspart image - The avatar image element.
+ * @csspart initials - The initials text.
+ * @csspart icon - The fallback icon.
+ *
+ * @cssproperty --mz-avatar-size - Override the avatar size.
+ * @cssproperty --mz-avatar-bg - Override the avatar background.
+ * @cssproperty --mz-avatar-color - Override the avatar text/icon color.
+ * @cssproperty --mz-avatar-radius - Override the avatar border radius.
+ */
+export declare class MzAvatar extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static dependencies: {
+        'mz-icon': typeof MzIcon;
+    };
+    /** The image URL for the avatar. */
+    image: string;
+    /** Alt text for the image. */
+    label: string;
+    /** Initials to display when no image is set (1–2 characters). */
+    initials: string;
+    /** The avatar's size. */
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    /** The avatar's shape. */
+    shape: 'circle' | 'square';
+    private hasError;
+    private handleImageError;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=avatar.component.d.ts.map

package/dist/components/avatar/avatar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IAEvB,MAAM,CAAC,YAAY;;MAEjB;IAEF,oCAAoC;IACxB,KAAK,SAAM;IAEvB,8BAA8B;IAClB,KAAK,SAAM;IAEvB,iEAAiE;IACrD,QAAQ,SAAM;IAE1B,yBAAyB;IACI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEpE,0BAA0B;IACG,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAY;IAE1D,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,gBAAgB;IAIxB,MAAM;CAoBP"}

package/dist/components/avatar/avatar.component.js

@@ -0,0 +1,70 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { MzIcon } from "../icon/icon.component.js";
+import styles from "./avatar.styles.js";
+class MzAvatar extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.size = "md";
+    this.shape = "circle";
+    this.hasError = false;
+  }
+  handleImageError() {
+    this.hasError = true;
+  }
+  render() {
+    const showImage = this.image && !this.hasError;
+    const showInitials = !showImage && this.initials;
+    return html`
+      <div part="base" class="avatar" role="img" aria-label=${this.label || this.initials || "Avatar"}>
+        ${showImage ? html`<img
+              part="image"
+              class="avatar__image"
+              src=${this.image}
+              alt=${this.label}
+              @error=${this.handleImageError}
+            />` : showInitials ? html`<span part="initials" class="avatar__initials">${this.initials}</span>` : html`<span part="icon" class="avatar__icon"><mz-icon name="person" library="system"></mz-icon></span>`}
+      </div>
+    `;
+  }
+}
+MzAvatar.styles = styles;
+MzAvatar.dependencies = {
+  "mz-icon": MzIcon
+};
+__decorateClass([
+  property()
+], MzAvatar.prototype, "image", 2);
+__decorateClass([
+  property()
+], MzAvatar.prototype, "label", 2);
+__decorateClass([
+  property()
+], MzAvatar.prototype, "initials", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzAvatar.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzAvatar.prototype, "shape", 2);
+__decorateClass([
+  state()
+], MzAvatar.prototype, "hasError", 2);
+export {
+  MzAvatar
+};
+//# sourceMappingURL=avatar.component.js.map

package/dist/components/avatar/avatar.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/avatar/avatar.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { MzIcon } from '../icon/icon.component.js';\nimport styles from './avatar.styles.js';\n\n/**\n * @summary An avatar for representing users or entities.\n *\n * @tag mz-avatar\n *\n * @dependency mz-icon\n *\n * @csspart base - The avatar's base wrapper.\n * @csspart image - The avatar image element.\n * @csspart initials - The initials text.\n * @csspart icon - The fallback icon.\n *\n * @cssproperty --mz-avatar-size - Override the avatar size.\n * @cssproperty --mz-avatar-bg - Override the avatar background.\n * @cssproperty --mz-avatar-color - Override the avatar text/icon color.\n * @cssproperty --mz-avatar-radius - Override the avatar border radius.\n */\nexport class MzAvatar extends ManzanoElement {\n  static styles = styles;\n\n  static dependencies = {\n    'mz-icon': MzIcon\n  };\n\n  /** The image URL for the avatar. */\n  @property() image = '';\n\n  /** Alt text for the image. */\n  @property() label = '';\n\n  /** Initials to display when no image is set (1\u20132 characters). */\n  @property() initials = '';\n\n  /** The avatar's size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /** The avatar's shape. */\n  @property({ reflect: true }) shape: 'circle' | 'square' = 'circle';\n\n  @state() private hasError = false;\n\n  private handleImageError() {\n    this.hasError = true;\n  }\n\n  render() {\n    const showImage = this.image && !this.hasError;\n    const showInitials = !showImage && this.initials;\n\n    return html`\n      <div part=\"base\" class=\"avatar\" role=\"img\" aria-label=${this.label || this.initials || 'Avatar'}>\n        ${showImage\n          ? html`<img\n              part=\"image\"\n              class=\"avatar__image\"\n              src=${this.image}\n              alt=${this.label}\n              @error=${this.handleImageError}\n            />`\n          : showInitials\n            ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials}</span>`\n            : html`<span part=\"icon\" class=\"avatar__icon\"><mz-icon name=\"person\" library=\"system\"></mz-icon></span>`}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AAChC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,OAAO,YAAY;AAmBZ,MAAM,iBAAiB,eAAe;AAAA,EAAtC;AAAA;AAQO,iBAAQ;AAGR,iBAAQ;AAGR,oBAAW;AAGM,gBAAkC;AAGlC,iBAA6B;AAEjD,SAAQ,WAAW;AAAA;AAAA,EAEpB,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,SAAS;AACP,UAAM,YAAY,KAAK,SAAS,CAAC,KAAK;AACtC,UAAM,eAAe,CAAC,aAAa,KAAK;AAExC,WAAO;AAAA,8DACmD,KAAK,SAAS,KAAK,YAAY,QAAQ;AAAA,UAC3F,YACE;AAAA;AAAA;AAAA,oBAGQ,KAAK,KAAK;AAAA,oBACV,KAAK,KAAK;AAAA,uBACP,KAAK,gBAAgB;AAAA,kBAEhC,eACE,sDAAsD,KAAK,QAAQ,YACnE,sGAAsG;AAAA;AAAA;AAAA,EAGlH;AACF;AAhDa,SACJ,SAAS;AADL,SAGJ,eAAe;AAAA,EACpB,WAAW;AACb;AAGY;AAAA,EAAX,SAAS;AAAA,GARC,SAQC;AAGA;AAAA,EAAX,SAAS;AAAA,GAXC,SAWC;AAGA;AAAA,EAAX,SAAS;AAAA,GAdC,SAcC;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAjBhB,SAiBkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GApBhB,SAoBkB;AAEZ;AAAA,EAAhB,MAAM;AAAA,GAtBI,SAsBM;",
+  "names": []
+}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,8 @@
+import { MzAvatar } from './avatar.component.js';
+export * from './avatar.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-avatar': MzAvatar;
+    }
+}
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,cAAc,uBAAuB,CAAC;AAItC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,4 @@
+import { MzAvatar } from "./avatar.component.js";
+export * from "./avatar.component.js";
+MzAvatar.define("mz-avatar");
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/avatar/avatar.ts"],
+  "sourcesContent": ["import { MzAvatar } from './avatar.component.js';\n\nexport * from './avatar.component.js';\n\nMzAvatar.define('mz-avatar');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-avatar': MzAvatar;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,cAAc;AAEd,SAAS,OAAO,WAAW;",
+  "names": []
+}

package/dist/components/avatar/avatar.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=avatar.styles.d.ts.map

package/dist/components/avatar/avatar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.styles.ts"],"names":[],"mappings":";AAGA,wBAmEE"}

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,74 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var avatar_styles_default = [
+  componentStyles,
+  css`
+    @layer base, sizes, states;
+
+    @layer base {
+      :host {
+        display: inline-flex;
+      }
+
+      .avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        width: var(--_size, var(--mz-avatar-size, 2.5rem));
+        height: var(--_size, var(--mz-avatar-size, 2.5rem));
+        border-radius: var(--_radius, var(--mz-avatar-radius, var(--mz-radius-circle)));
+        background: var(--mz-avatar-bg, var(--mz-color-neutral));
+        color: var(--mz-avatar-color, var(--mz-color-on-neutral));
+        font-family: var(--mz-font-sans);
+        font-weight: var(--mz-font-weight-semibold);
+        font-size: var(--_font-size, calc(var(--_size, 2.5rem) * 0.4));
+        line-height: 1;
+        user-select: none;
+        flex-shrink: 0;
+      }
+
+      .avatar__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .avatar__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(var(--_size, 2.5rem) * 0.5);
+      }
+    }
+
+    @layer sizes {
+      :host([size='sm']) {
+        --_size: 2rem;
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_size: 2.5rem;
+      }
+
+      :host([size='lg']) {
+        --_size: 3rem;
+      }
+
+      :host([size='xl']) {
+        --_size: 4rem;
+      }
+    }
+
+    @layer states {
+      :host([shape='square']) {
+        --_radius: var(--mz-radius-md);
+      }
+    }
+  `
+];
+export {
+  avatar_styles_default as default
+};
+//# sourceMappingURL=avatar.styles.js.map

package/dist/components/avatar/avatar.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/avatar/avatar.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: inline-flex;\n      }\n\n      .avatar {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        width: var(--_size, var(--mz-avatar-size, 2.5rem));\n        height: var(--_size, var(--mz-avatar-size, 2.5rem));\n        border-radius: var(--_radius, var(--mz-avatar-radius, var(--mz-radius-circle)));\n        background: var(--mz-avatar-bg, var(--mz-color-neutral));\n        color: var(--mz-avatar-color, var(--mz-color-on-neutral));\n        font-family: var(--mz-font-sans);\n        font-weight: var(--mz-font-weight-semibold);\n        font-size: var(--_font-size, calc(var(--_size, 2.5rem) * 0.4));\n        line-height: 1;\n        user-select: none;\n        flex-shrink: 0;\n      }\n\n      .avatar__image {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .avatar__icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: calc(var(--_size, 2.5rem) * 0.5);\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_size: 2rem;\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_size: 2.5rem;\n      }\n\n      :host([size='lg']) {\n        --_size: 3rem;\n      }\n\n      :host([size='xl']) {\n        --_size: 4rem;\n      }\n    }\n\n    @layer states {\n      :host([shape='square']) {\n        --_radius: var(--mz-radius-md);\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,wBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEF;",
+  "names": []
+}

package/dist/components/badge/badge.component.d.ts

@@ -0,0 +1,27 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A badge for status, labels, and counts.
+ *
+ * @tag mz-badge
+ *
+ * @slot - The badge's content.
+ *
+ * @csspart base - The badge's base wrapper.
+ *
+ * @cssproperty --mz-badge-bg - Override the badge background.
+ * @cssproperty --mz-badge-color - Override the badge text color.
+ * @cssproperty --mz-badge-radius - Override the badge border radius.
+ */
+export declare class MzBadge extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The badge's semantic variant. */
+    variant: 'primary' | 'danger' | 'success' | 'warning' | 'neutral';
+    /** The badge's visual appearance. */
+    appearance: 'filled' | 'outline' | 'soft';
+    /** The badge's size. */
+    size: 'sm' | 'md' | 'lg';
+    /** Renders a pill-shaped badge. */
+    pill: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=badge.component.d.ts.map

package/dist/components/badge/badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;GAYG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC,MAAM,CAAC,MAAM,4BAAU;IAEvB,oCAAoC;IACP,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAa;IAE3G,qCAAqC;IACR,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAY;IAElF,wBAAwB;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,mCAAmC;IACS,IAAI,UAAS;IAEzD,MAAM;CAOP"}

package/dist/components/badge/badge.component.js

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./badge.styles.js";
+class MzBadge extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "neutral";
+    this.appearance = "filled";
+    this.size = "md";
+    this.pill = false;
+  }
+  render() {
+    return html`
+      <span part="base" class="badge">
+        <slot></slot>
+      </span>
+    `;
+  }
+}
+MzBadge.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], MzBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzBadge.prototype, "appearance", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzBadge.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzBadge.prototype, "pill", 2);
+export {
+  MzBadge
+};
+//# sourceMappingURL=badge.component.js.map

package/dist/components/badge/badge.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/badge/badge.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './badge.styles.js';\n\n/**\n * @summary A badge for status, labels, and counts.\n *\n * @tag mz-badge\n *\n * @slot - The badge's content.\n *\n * @csspart base - The badge's base wrapper.\n *\n * @cssproperty --mz-badge-bg - Override the badge background.\n * @cssproperty --mz-badge-color - Override the badge text color.\n * @cssproperty --mz-badge-radius - Override the badge border radius.\n */\nexport class MzBadge extends ManzanoElement {\n  static styles = styles;\n\n  /** The badge's semantic variant. */\n  @property({ reflect: true }) variant: 'primary' | 'danger' | 'success' | 'warning' | 'neutral' = 'neutral';\n\n  /** The badge's visual appearance. */\n  @property({ reflect: true }) appearance: 'filled' | 'outline' | 'soft' = 'filled';\n\n  /** The badge's size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Renders a pill-shaped badge. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  render() {\n    return html`\n      <span part=\"base\" class=\"badge\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAeZ,MAAM,gBAAgB,eAAe;AAAA,EAArC;AAAA;AAIwB,mBAAoE;AAGpE,sBAA4C;AAG5C,gBAA2B;AAGZ,gBAAO;AAAA;AAAA,EAEnD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAtBa,QACJ,SAAS;AAGa;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAJhB,QAIkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPhB,QAOkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVhB,QAUkB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAb/B,QAaiC;",
+  "names": []
+}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,8 @@
+import { MzBadge } from './badge.component.js';
+export * from './badge.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-badge': MzBadge;
+    }
+}
+//# sourceMappingURL=badge.d.ts.map