@manzanohq/components 0.1.1

package/dist/components/button/button.styles.js

@@ -0,0 +1,221 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var button_styles_default = [
+  componentStyles,
+  css`
+    @layer base, variants, appearances, sizes, states;
+
+    @layer base {
+      :host {
+        display: inline-block;
+      }
+
+      .button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--mz-space-xs);
+        border: var(--mz-border-width-sm) solid transparent;
+        font-family: var(--mz-font-sans);
+        font-weight: var(--mz-font-weight-semibold);
+        text-decoration: none;
+        white-space: nowrap;
+        user-select: none;
+        cursor: pointer;
+        transition:
+          background var(--mz-transition-fast) ease,
+          color var(--mz-transition-fast) ease,
+          border-color var(--mz-transition-fast) ease,
+          box-shadow var(--mz-transition-fast) ease;
+        background: var(--_bg);
+        color: var(--_text);
+        border-color: var(--_border, transparent);
+        --_default-radius: var(--_radius, var(--mz-button-radius, var(--mz-radius-md)));
+        border-start-start-radius: var(--mz-button-radius-start, var(--_default-radius));
+        border-end-start-radius: var(--mz-button-radius-start, var(--_default-radius));
+        border-start-end-radius: var(--mz-button-radius-end, var(--_default-radius));
+        border-end-end-radius: var(--mz-button-radius-end, var(--_default-radius));
+        height: var(--_height);
+        padding-inline: var(--_padding-inline);
+        font-size: var(--_font-size);
+        line-height: var(--mz-line-height-dense);
+      }
+
+      .button:focus-visible {
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+
+      /* Prefix / Suffix slots */
+      .button__prefix,
+      .button__suffix {
+        display: inline-flex;
+        flex: none;
+      }
+
+      .button__label {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      /* Loading state */
+      .button--loading .button__label,
+      .button--loading .button__prefix,
+      .button--loading .button__suffix {
+        visibility: hidden;
+      }
+
+      .button__spinner {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .button--loading {
+        position: relative;
+        cursor: wait;
+      }
+    }
+
+    @layer variants {
+      :host([variant='primary']) {
+        --_color: var(--mz-color-primary);
+        --_color-hover: var(--mz-color-primary-hover);
+        --_color-active: var(--mz-color-primary-active);
+        --_on-color: var(--mz-color-on-primary);
+      }
+
+      :host([variant='danger']) {
+        --_color: var(--mz-color-danger);
+        --_color-hover: var(--mz-color-danger-hover);
+        --_color-active: var(--mz-color-danger-active);
+        --_on-color: var(--mz-color-on-danger);
+      }
+
+      :host([variant='success']) {
+        --_color: var(--mz-color-success);
+        --_color-hover: var(--mz-color-success-hover);
+        --_color-active: var(--mz-color-success-active);
+        --_on-color: var(--mz-color-on-success);
+      }
+
+      :host([variant='warning']) {
+        --_color: var(--mz-color-warning);
+        --_color-hover: var(--mz-color-warning-hover);
+        --_color-active: var(--mz-color-warning-active);
+        --_on-color: var(--mz-color-on-warning);
+      }
+
+      :host([variant='neutral']),
+      :host(:not([variant])) {
+        --_color: var(--mz-color-neutral);
+        --_color-hover: var(--mz-color-neutral-hover);
+        --_color-active: var(--mz-color-neutral-active);
+        --_on-color: var(--mz-color-on-neutral);
+      }
+    }
+
+    @layer appearances {
+      /* Filled (default) */
+      :host([appearance='filled']),
+      :host(:not([appearance])) {
+        --_bg: var(--mz-button-bg, var(--_color));
+        --_text: var(--mz-button-color, var(--_on-color));
+      }
+      :host([appearance='filled']:hover),
+      :host(:not([appearance]):hover) {
+        --_bg: var(--_color-hover);
+      }
+      :host([appearance='filled']:active),
+      :host(:not([appearance]):active) {
+        --_bg: var(--_color-active);
+      }
+
+      /* Outline */
+      :host([appearance='outline']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: var(--_color);
+      }
+      :host([appearance='outline']:hover) {
+        --_bg: var(--_color);
+        --_text: var(--_on-color);
+      }
+
+      /* Ghost */
+      :host([appearance='ghost']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: transparent;
+      }
+      :host([appearance='ghost']:hover) {
+        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);
+      }
+
+      /* Link */
+      :host([appearance='link']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: transparent;
+      }
+      :host([appearance='link']) .button {
+        text-decoration: underline;
+        padding-inline: 0;
+      }
+      :host([appearance='link']:hover) {
+        --_text: var(--_color-hover);
+      }
+    }
+
+    @layer sizes {
+      :host([size='xs']) {
+        --_height: 1.375rem;
+        --_padding-inline: var(--mz-space-xs);
+        --_font-size: var(--mz-font-size-2xs);
+      }
+
+      :host([size='sm']) {
+        --_height: 1.75rem;
+        --_padding-inline: var(--mz-space-sm);
+        --_font-size: var(--mz-font-size-xs);
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_height: 2rem;
+        --_padding-inline: var(--mz-space-md);
+        --_font-size: var(--mz-font-size-sm);
+      }
+
+      :host([size='lg']) {
+        --_height: 2.5rem;
+        --_padding-inline: var(--mz-space-lg);
+        --_font-size: var(--mz-font-size-sm);
+      }
+
+      :host([size='xl']) {
+        --_height: 3rem;
+        --_padding-inline: var(--mz-space-xl);
+        --_font-size: var(--mz-font-size-md);
+      }
+    }
+
+    @layer states {
+      /* Pill shape */
+      :host([pill]) {
+        --_radius: var(--mz-radius-pill);
+      }
+
+      /* Disabled */
+      :host([disabled]) .button {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  `
+];
+export {
+  button_styles_default as default
+};
+//# sourceMappingURL=button.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/button/button.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, sizes, states;\n\n    @layer base {\n      :host {\n        display: inline-block;\n      }\n\n      .button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: var(--mz-space-xs);\n        border: var(--mz-border-width-sm) solid transparent;\n        font-family: var(--mz-font-sans);\n        font-weight: var(--mz-font-weight-semibold);\n        text-decoration: none;\n        white-space: nowrap;\n        user-select: none;\n        cursor: pointer;\n        transition:\n          background var(--mz-transition-fast) ease,\n          color var(--mz-transition-fast) ease,\n          border-color var(--mz-transition-fast) ease,\n          box-shadow var(--mz-transition-fast) ease;\n        background: var(--_bg);\n        color: var(--_text);\n        border-color: var(--_border, transparent);\n        --_default-radius: var(--_radius, var(--mz-button-radius, var(--mz-radius-md)));\n        border-start-start-radius: var(--mz-button-radius-start, var(--_default-radius));\n        border-end-start-radius: var(--mz-button-radius-start, var(--_default-radius));\n        border-start-end-radius: var(--mz-button-radius-end, var(--_default-radius));\n        border-end-end-radius: var(--mz-button-radius-end, var(--_default-radius));\n        height: var(--_height);\n        padding-inline: var(--_padding-inline);\n        font-size: var(--_font-size);\n        line-height: var(--mz-line-height-dense);\n      }\n\n      .button:focus-visible {\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      /* Prefix / Suffix slots */\n      .button__prefix,\n      .button__suffix {\n        display: inline-flex;\n        flex: none;\n      }\n\n      .button__label {\n        display: inline-flex;\n        align-items: center;\n      }\n\n      /* Loading state */\n      .button--loading .button__label,\n      .button--loading .button__prefix,\n      .button--loading .button__suffix {\n        visibility: hidden;\n      }\n\n      .button__spinner {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .button--loading {\n        position: relative;\n        cursor: wait;\n      }\n    }\n\n    @layer variants {\n      :host([variant='primary']) {\n        --_color: var(--mz-color-primary);\n        --_color-hover: var(--mz-color-primary-hover);\n        --_color-active: var(--mz-color-primary-active);\n        --_on-color: var(--mz-color-on-primary);\n      }\n\n      :host([variant='danger']) {\n        --_color: var(--mz-color-danger);\n        --_color-hover: var(--mz-color-danger-hover);\n        --_color-active: var(--mz-color-danger-active);\n        --_on-color: var(--mz-color-on-danger);\n      }\n\n      :host([variant='success']) {\n        --_color: var(--mz-color-success);\n        --_color-hover: var(--mz-color-success-hover);\n        --_color-active: var(--mz-color-success-active);\n        --_on-color: var(--mz-color-on-success);\n      }\n\n      :host([variant='warning']) {\n        --_color: var(--mz-color-warning);\n        --_color-hover: var(--mz-color-warning-hover);\n        --_color-active: var(--mz-color-warning-active);\n        --_on-color: var(--mz-color-on-warning);\n      }\n\n      :host([variant='neutral']),\n      :host(:not([variant])) {\n        --_color: var(--mz-color-neutral);\n        --_color-hover: var(--mz-color-neutral-hover);\n        --_color-active: var(--mz-color-neutral-active);\n        --_on-color: var(--mz-color-on-neutral);\n      }\n    }\n\n    @layer appearances {\n      /* Filled (default) */\n      :host([appearance='filled']),\n      :host(:not([appearance])) {\n        --_bg: var(--mz-button-bg, var(--_color));\n        --_text: var(--mz-button-color, var(--_on-color));\n      }\n      :host([appearance='filled']:hover),\n      :host(:not([appearance]):hover) {\n        --_bg: var(--_color-hover);\n      }\n      :host([appearance='filled']:active),\n      :host(:not([appearance]):active) {\n        --_bg: var(--_color-active);\n      }\n\n      /* Outline */\n      :host([appearance='outline']) {\n        --_bg: transparent;\n        --_text: var(--_color);\n        --_border: var(--_color);\n      }\n      :host([appearance='outline']:hover) {\n        --_bg: var(--_color);\n        --_text: var(--_on-color);\n      }\n\n      /* Ghost */\n      :host([appearance='ghost']) {\n        --_bg: transparent;\n        --_text: var(--_color);\n        --_border: transparent;\n      }\n      :host([appearance='ghost']:hover) {\n        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);\n      }\n\n      /* Link */\n      :host([appearance='link']) {\n        --_bg: transparent;\n        --_text: var(--_color);\n        --_border: transparent;\n      }\n      :host([appearance='link']) .button {\n        text-decoration: underline;\n        padding-inline: 0;\n      }\n      :host([appearance='link']:hover) {\n        --_text: var(--_color-hover);\n      }\n    }\n\n    @layer sizes {\n      :host([size='xs']) {\n        --_height: 1.375rem;\n        --_padding-inline: var(--mz-space-xs);\n        --_font-size: var(--mz-font-size-2xs);\n      }\n\n      :host([size='sm']) {\n        --_height: 1.75rem;\n        --_padding-inline: var(--mz-space-sm);\n        --_font-size: var(--mz-font-size-xs);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_height: 2rem;\n        --_padding-inline: var(--mz-space-md);\n        --_font-size: var(--mz-font-size-sm);\n      }\n\n      :host([size='lg']) {\n        --_height: 2.5rem;\n        --_padding-inline: var(--mz-space-lg);\n        --_font-size: var(--mz-font-size-sm);\n      }\n\n      :host([size='xl']) {\n        --_height: 3rem;\n        --_padding-inline: var(--mz-space-xl);\n        --_font-size: var(--mz-font-size-md);\n      }\n    }\n\n    @layer states {\n      /* Pill shape */\n      :host([pill]) {\n        --_radius: var(--mz-radius-pill);\n      }\n\n      /* Disabled */\n      :host([disabled]) .button {\n        opacity: 0.5;\n        cursor: not-allowed;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoNF;",
+  "names": []
+}

package/dist/components/button-group/button-group.component.d.ts

@@ -0,0 +1,17 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A container that visually groups buttons.
+ *
+ * @tag mz-button-group
+ *
+ * @slot - The buttons (mz-button elements).
+ *
+ * @csspart base - The button group wrapper.
+ */
+export declare class MzButtonGroup extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** An accessible label for the group. */
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=button-group.component.d.ts.map

package/dist/components/button-group/button-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;GAQG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,4BAAU;IAEvB,yCAAyC;IAC7B,KAAK,SAAM;IAEvB,MAAM;CAYP"}

package/dist/components/button-group/button-group.component.js

@@ -0,0 +1,40 @@
+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 styles from "./button-group.styles.js";
+class MzButtonGroup extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class="button-group"
+        role="group"
+        aria-label=${this.label || nothing}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+MzButtonGroup.styles = styles;
+__decorateClass([
+  property()
+], MzButtonGroup.prototype, "label", 2);
+export {
+  MzButtonGroup
+};
+//# sourceMappingURL=button-group.component.js.map

package/dist/components/button-group/button-group.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/button-group/button-group.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './button-group.styles.js';\n\n/**\n * @summary A container that visually groups buttons.\n *\n * @tag mz-button-group\n *\n * @slot - The buttons (mz-button elements).\n *\n * @csspart base - The button group wrapper.\n */\nexport class MzButtonGroup extends ManzanoElement {\n  static styles = styles;\n\n  /** An accessible label for the group. */\n  @property() label = '';\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"button-group\"\n        role=\"group\"\n        aria-label=${this.label || nothing}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAWZ,MAAM,sBAAsB,eAAe;AAAA,EAA3C;AAAA;AAIO,iBAAQ;AAAA;AAAA,EAEpB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC;AACF;AAlBa,cACJ,SAAS;AAGJ;AAAA,EAAX,SAAS;AAAA,GAJC,cAIC;",
+  "names": []
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,cAAc,6BAA6B,CAAC;AAI5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

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

package/dist/components/button-group/button-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/button-group/button-group.ts"],
+  "sourcesContent": ["import { MzButtonGroup } from './button-group.component.js';\n\nexport * from './button-group.component.js';\n\nMzButtonGroup.define('mz-button-group');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-button-group': MzButtonGroup;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,cAAc;AAEd,cAAc,OAAO,iBAAiB;",
+  "names": []
+}

package/dist/components/button-group/button-group.styles.d.ts

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

package/dist/components/button-group/button-group.styles.d.ts.map

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

package/dist/components/button-group/button-group.styles.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var button_group_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-flex;
+    }
+
+    .button-group {
+      display: flex;
+    }
+
+    /* Remove right radius from all but the last button */
+    ::slotted(mz-button:not(:last-of-type)) {
+      --mz-button-radius-end: 0;
+    }
+
+    /* Remove left radius from all but the first button */
+    ::slotted(mz-button:not(:first-of-type)) {
+      --mz-button-radius-start: 0;
+    }
+
+    /* Collapse borders between buttons */
+    ::slotted(mz-button:not(:first-of-type)) {
+      margin-inline-start: calc(-1 * var(--mz-border-width-sm));
+    }
+  `
+];
+export {
+  button_group_styles_default as default
+};
+//# sourceMappingURL=button-group.styles.js.map

package/dist/components/button-group/button-group.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/button-group/button-group.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-flex;\n    }\n\n    .button-group {\n      display: flex;\n    }\n\n    /* Remove right radius from all but the last button */\n    ::slotted(mz-button:not(:last-of-type)) {\n      --mz-button-radius-end: 0;\n    }\n\n    /* Remove left radius from all but the first button */\n    ::slotted(mz-button:not(:first-of-type)) {\n      --mz-button-radius-start: 0;\n    }\n\n    /* Collapse borders between buttons */\n    ::slotted(mz-button:not(:first-of-type)) {\n      margin-inline-start: calc(-1 * var(--mz-border-width-sm));\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,8BAAQ;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;AAwBF;",
+  "names": []
+}

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

@@ -0,0 +1,33 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A card container with optional image, header, and footer.
+ *
+ * @tag mz-card
+ *
+ * @slot - The card's body content.
+ * @slot image - An image displayed at the top of the card (no padding).
+ * @slot header - Optional header content.
+ * @slot footer - Optional footer content.
+ *
+ * @csspart base - The card's outer wrapper.
+ * @csspart image - The image container.
+ * @csspart header - The header container.
+ * @csspart body - The body container.
+ * @csspart footer - The footer container.
+ *
+ * @cssproperty --mz-card-bg - Override the card background.
+ * @cssproperty --mz-card-border-width - Override the card border width.
+ * @cssproperty --mz-card-border-color - Override the card border color.
+ * @cssproperty --mz-card-border-radius - Override the card border radius.
+ * @cssproperty --mz-card-shadow - Override the card box shadow.
+ * @cssproperty --mz-card-padding - Override the card padding.
+ */
+export declare class MzCard extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private hasImage;
+    private hasHeader;
+    private hasFooter;
+    private handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=card.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,MAAO,SAAQ,cAAc;IACxC,MAAM,CAAC,MAAM,4BAAU;IAEd,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,gBAAgB;IAQxB,MAAM;CAkBP"}

package/dist/components/card/card.component.js

@@ -0,0 +1,62 @@
+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 { state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./card.styles.js";
+class MzCard extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.hasImage = false;
+    this.hasHeader = false;
+    this.hasFooter = false;
+  }
+  handleSlotChange(slot, e) {
+    const slotEl = e.target;
+    const hasContent = slotEl.assignedNodes({ flatten: true }).length > 0;
+    if (slot === "image") this.hasImage = hasContent;
+    else if (slot === "header") this.hasHeader = hasContent;
+    else this.hasFooter = hasContent;
+  }
+  render() {
+    return html`
+      <div part="base" class="card">
+        <div part="image" class=${classMap({ card__image: true, "card__image--empty": !this.hasImage })}>
+          <slot name="image" @slotchange=${(e) => this.handleSlotChange("image", e)}></slot>
+        </div>
+        <div part="header" class=${classMap({ card__header: true, "card__header--empty": !this.hasHeader })}>
+          <slot name="header" @slotchange=${(e) => this.handleSlotChange("header", e)}></slot>
+        </div>
+        <div part="body" class="card__body">
+          <slot></slot>
+        </div>
+        <div part="footer" class=${classMap({ card__footer: true, "card__footer--empty": !this.hasFooter })}>
+          <slot name="footer" @slotchange=${(e) => this.handleSlotChange("footer", e)}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+MzCard.styles = styles;
+__decorateClass([
+  state()
+], MzCard.prototype, "hasImage", 2);
+__decorateClass([
+  state()
+], MzCard.prototype, "hasHeader", 2);
+__decorateClass([
+  state()
+], MzCard.prototype, "hasFooter", 2);
+export {
+  MzCard
+};
+//# sourceMappingURL=card.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/card/card.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './card.styles.js';\n\n/**\n * @summary A card container with optional image, header, and footer.\n *\n * @tag mz-card\n *\n * @slot - The card's body content.\n * @slot image - An image displayed at the top of the card (no padding).\n * @slot header - Optional header content.\n * @slot footer - Optional footer content.\n *\n * @csspart base - The card's outer wrapper.\n * @csspart image - The image container.\n * @csspart header - The header container.\n * @csspart body - The body container.\n * @csspart footer - The footer container.\n *\n * @cssproperty --mz-card-bg - Override the card background.\n * @cssproperty --mz-card-border-width - Override the card border width.\n * @cssproperty --mz-card-border-color - Override the card border color.\n * @cssproperty --mz-card-border-radius - Override the card border radius.\n * @cssproperty --mz-card-shadow - Override the card box shadow.\n * @cssproperty --mz-card-padding - Override the card padding.\n */\nexport class MzCard extends ManzanoElement {\n  static styles = styles;\n\n  @state() private hasImage = false;\n  @state() private hasHeader = false;\n  @state() private hasFooter = false;\n\n  private handleSlotChange(slot: 'image' | 'header' | 'footer', e: Event) {\n    const slotEl = e.target as HTMLSlotElement;\n    const hasContent = slotEl.assignedNodes({ flatten: true }).length > 0;\n    if (slot === 'image') this.hasImage = hasContent;\n    else if (slot === 'header') this.hasHeader = hasContent;\n    else this.hasFooter = hasContent;\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"card\">\n        <div part=\"image\" class=${classMap({ card__image: true, 'card__image--empty': !this.hasImage })}>\n          <slot name=\"image\" @slotchange=${(e: Event) => this.handleSlotChange('image', e)}></slot>\n        </div>\n        <div part=\"header\" class=${classMap({ card__header: true, 'card__header--empty': !this.hasHeader })}>\n          <slot name=\"header\" @slotchange=${(e: Event) => this.handleSlotChange('header', e)}></slot>\n        </div>\n        <div part=\"body\" class=\"card__body\">\n          <slot></slot>\n        </div>\n        <div part=\"footer\" class=${classMap({ card__footer: true, 'card__footer--empty': !this.hasFooter })}>\n          <slot name=\"footer\" @slotchange=${(e: Event) => this.handleSlotChange('footer', e)}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAyBZ,MAAM,eAAe,eAAe;AAAA,EAApC;AAAA;AAGI,SAAQ,WAAW;AACnB,SAAQ,YAAY;AACpB,SAAQ,YAAY;AAAA;AAAA,EAErB,iBAAiB,MAAqC,GAAU;AACtE,UAAM,SAAS,EAAE;AACjB,UAAM,aAAa,OAAO,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AACpE,QAAI,SAAS,QAAS,MAAK,WAAW;AAAA,aAC7B,SAAS,SAAU,MAAK,YAAY;AAAA,QACxC,MAAK,YAAY;AAAA,EACxB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,kCAEuB,SAAS,EAAE,aAAa,MAAM,sBAAsB,CAAC,KAAK,SAAS,CAAC,CAAC;AAAA,2CAC5D,CAAC,MAAa,KAAK,iBAAiB,SAAS,CAAC,CAAC;AAAA;AAAA,mCAEvD,SAAS,EAAE,cAAc,MAAM,uBAAuB,CAAC,KAAK,UAAU,CAAC,CAAC;AAAA,4CAC/D,CAAC,MAAa,KAAK,iBAAiB,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKzD,SAAS,EAAE,cAAc,MAAM,uBAAuB,CAAC,KAAK,UAAU,CAAC,CAAC;AAAA,4CAC/D,CAAC,MAAa,KAAK,iBAAiB,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAI1F;AACF;AAjCa,OACJ,SAAS;AAEC;AAAA,EAAhB,MAAM;AAAA,GAHI,OAGM;AACA;AAAA,EAAhB,MAAM;AAAA,GAJI,OAIM;AACA;AAAA,EAAhB,MAAM;AAAA,GALI,OAKM;",
+  "names": []
+}

package/dist/components/card/card.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,qBAAqB,CAAC;AAIpC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/card/card.js

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

package/dist/components/card/card.js.map

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

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

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

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

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

package/dist/components/card/card.styles.js

@@ -0,0 +1,98 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var card_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      border: var(--mz-card-border-width, var(--mz-panel-border-width)) solid
+        var(--mz-card-border-color, var(--mz-panel-border-color));
+      border-radius: var(--mz-card-border-radius, var(--mz-panel-border-radius));
+      background: var(--mz-card-bg, var(--mz-color-surface));
+      box-shadow: var(--mz-card-shadow, var(--mz-shadow-sm));
+      overflow: hidden;
+      transition: box-shadow var(--mz-transition-normal) ease,
+        transform var(--mz-transition-normal) ease;
+    }
+
+    .card:hover {
+      box-shadow: var(--mz-card-shadow-hover, var(--mz-shadow-md));
+      transform: translateY(-1px);
+    }
+
+    /* ---- Image ---- */
+
+    .card__image {
+      line-height: 0;
+    }
+
+    .card__image--empty {
+      display: none;
+    }
+
+    .card__image ::slotted(img) {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    /* ---- Header ---- */
+
+    .card__header {
+      padding: var(--mz-card-padding, var(--mz-space-lg)) var(--mz-card-padding, var(--mz-space-xl));
+    }
+
+    .card__header--empty {
+      display: none;
+    }
+
+    /*
+     * Only show the header's bottom border when there's NO image above it.
+     * When an image is present, the visual break is already strong enough.
+     */
+    .card__image--empty + .card__header:not(.card__header--empty) {
+      border-bottom: var(--mz-panel-border-width) solid var(--mz-color-border);
+    }
+
+    /* When header follows an image, tighten the top padding — the image IS the separator */
+    .card__image:not(.card__image--empty) + .card__header {
+      padding-top: var(--mz-space-md);
+      padding-bottom: var(--mz-space-xs);
+    }
+
+    /* ---- Body ---- */
+
+    .card__body {
+      padding: var(--mz-card-padding, var(--mz-space-xl));
+      color: color-mix(in srgb, var(--mz-color-text) 78%, transparent);
+    }
+
+    /* When body follows a visible header (no image case), reduce top padding to avoid double-spacing */
+    .card__image--empty + .card__header:not(.card__header--empty) + .card__body {
+      padding-top: var(--mz-space-md);
+    }
+
+    /* When body follows a visible header after an image, tighten further */
+    .card__image:not(.card__image--empty) + .card__header:not(.card__header--empty) + .card__body {
+      padding-top: var(--mz-space-sm);
+    }
+
+    /* ---- Footer ---- */
+
+    .card__footer {
+      padding: var(--mz-space-md) var(--mz-card-padding, var(--mz-space-xl));
+      border-top: var(--mz-panel-border-width) solid var(--mz-color-border);
+    }
+
+    .card__footer--empty {
+      display: none;
+    }
+  `
+];
+export {
+  card_styles_default as default
+};
+//# sourceMappingURL=card.styles.js.map