@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/empty/empty.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/empty/empty.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/empty/empty.js

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

package/dist/components/empty/empty.js.map

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

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

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

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

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

package/dist/components/empty/empty.styles.js

@@ -0,0 +1,59 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var empty_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    --_empty-padding: var(--mz-empty-padding, var(--mz-space-2xl) var(--mz-space-lg));
+    --_empty-icon-size: var(--mz-empty-icon-size, 48px);
+    --_empty-icon-color: var(--mz-empty-icon-color, var(--mz-color-border));
+
+    display: block;
+    font-family: var(--mz-font-sans);
+  }
+
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--_empty-padding);
+    gap: var(--mz-space-sm);
+  }
+
+  .empty__icon {
+    color: var(--_empty-icon-color);
+    margin-bottom: var(--mz-space-xs);
+  }
+
+  .empty__icon svg {
+    width: var(--_empty-icon-size);
+    height: var(--_empty-icon-size);
+  }
+
+  .empty__title {
+    font-size: var(--mz-font-size-md);
+    font-weight: var(--mz-font-weight-semibold, 600);
+    color: var(--mz-color-text);
+  }
+
+  .empty__description {
+    font-size: var(--mz-font-size-sm);
+    color: var(--mz-color-text-secondary);
+    max-width: 24rem;
+    line-height: var(--mz-line-height-relaxed, 1.625);
+  }
+
+  .empty__action {
+    margin-top: var(--mz-space-sm);
+  }
+
+  .empty__action:empty {
+    display: none;
+  }
+`;
+export {
+  empty_styles_default as default
+};
+//# sourceMappingURL=empty.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/empty/empty.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n  ${componentStyles}\n\n  :host {\n    --_empty-padding: var(--mz-empty-padding, var(--mz-space-2xl) var(--mz-space-lg));\n    --_empty-icon-size: var(--mz-empty-icon-size, 48px);\n    --_empty-icon-color: var(--mz-empty-icon-color, var(--mz-color-border));\n\n    display: block;\n    font-family: var(--mz-font-sans);\n  }\n\n  .empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: var(--_empty-padding);\n    gap: var(--mz-space-sm);\n  }\n\n  .empty__icon {\n    color: var(--_empty-icon-color);\n    margin-bottom: var(--mz-space-xs);\n  }\n\n  .empty__icon svg {\n    width: var(--_empty-icon-size);\n    height: var(--_empty-icon-size);\n  }\n\n  .empty__title {\n    font-size: var(--mz-font-size-md);\n    font-weight: var(--mz-font-weight-semibold, 600);\n    color: var(--mz-color-text);\n  }\n\n  .empty__description {\n    font-size: var(--mz-font-size-sm);\n    color: var(--mz-color-text-secondary);\n    max-width: 24rem;\n    line-height: var(--mz-line-height-relaxed, 1.625);\n  }\n\n  .empty__action {\n    margin-top: var(--mz-space-sm);\n  }\n\n  .empty__action:empty {\n    display: none;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,uBAAQ;AAAA,IACX,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,38 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A form field wrapper that groups a label, form control, help text, and error message.
+ *
+ * @slot - The form control.
+ * @slot label - Custom label content. Overrides the `label` property.
+ * @slot help-text - Custom help text content. Overrides the `helpText` property.
+ * @slot error - Custom error content. Overrides the `error` property.
+ *
+ * @csspart base - The outer container element.
+ * @csspart label - The label wrapper.
+ * @csspart control - The control wrapper around the default slot.
+ * @csspart help-text - The help text wrapper.
+ * @csspart error - The error message wrapper.
+ */
+export declare class MzField extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The label text. */
+    label: string;
+    /** Help/description text displayed below the control. */
+    helpText: string;
+    /** Error message text. When non-empty, the field shows an error state. */
+    error: string;
+    /** Shows a required indicator on the label. */
+    required: boolean;
+    /** Visual disabled state. */
+    disabled: boolean;
+    /** The size of the field. */
+    size: 'small' | 'medium' | 'large';
+    private hasLabelSlot;
+    private hasHelpTextSlot;
+    private hasErrorSlot;
+    private handleLabelSlotChange;
+    private handleHelpTextSlotChange;
+    private handleErrorSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=field.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.component.d.ts","sourceRoot":"","sources":["../../../src/components/field/field.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;GAaG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC,OAAgB,MAAM,4BAAU;IAEhC,sBAAsB;IACV,KAAK,SAAM;IAEvB,yDAAyD;IACnB,QAAQ,SAAM;IAEpD,0EAA0E;IAC9D,KAAK,SAAM;IAEvB,+CAA+C;IACH,QAAQ,UAAS;IAE7D,6BAA6B;IACe,QAAQ,UAAS;IAE7D,6BAA6B;IACA,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAElE,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CAkDP"}

package/dist/components/field/field.component.js

@@ -0,0 +1,114 @@
+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, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./field.styles.js";
+class MzField extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.helpText = "";
+    this.error = "";
+    this.required = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.hasLabelSlot = false;
+    this.hasHelpTextSlot = false;
+    this.hasErrorSlot = false;
+  }
+  handleLabelSlotChange(e) {
+    const slot = e.target;
+    this.hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  handleHelpTextSlotChange(e) {
+    const slot = e.target;
+    this.hasHelpTextSlot = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  handleErrorSlotChange(e) {
+    const slot = e.target;
+    this.hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  render() {
+    const hasLabel = this.label || this.hasLabelSlot;
+    const hasHelpText = this.helpText || this.hasHelpTextSlot;
+    const hasError = this.error || this.hasErrorSlot;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      field: true,
+      "field--has-error": !!hasError,
+      "field--disabled": this.disabled
+    })}
+      >
+        ${hasLabel ? html`
+              <div part="label" class="field__label">
+                <slot name="label" @slotchange=${this.handleLabelSlotChange}>
+                  ${this.label}
+                  ${this.required ? html`<span class="field__required" aria-hidden="true">*</span>` : nothing}
+                </slot>
+              </div>
+            ` : nothing}
+
+        <div part="control" class="field__control">
+          <slot></slot>
+        </div>
+
+        ${hasHelpText && !hasError ? html`
+              <div part="help-text" class="field__help-text">
+                <slot name="help-text" @slotchange=${this.handleHelpTextSlotChange}
+                  >${this.helpText}</slot
+                >
+              </div>
+            ` : nothing}
+        ${hasError ? html`
+              <div part="error" class="field__error" role="alert">
+                <slot name="error" @slotchange=${this.handleErrorSlotChange}>${this.error}</slot>
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+}
+MzField.styles = styles;
+__decorateClass([
+  property()
+], MzField.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], MzField.prototype, "helpText", 2);
+__decorateClass([
+  property()
+], MzField.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzField.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzField.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzField.prototype, "size", 2);
+__decorateClass([
+  state()
+], MzField.prototype, "hasLabelSlot", 2);
+__decorateClass([
+  state()
+], MzField.prototype, "hasHelpTextSlot", 2);
+__decorateClass([
+  state()
+], MzField.prototype, "hasErrorSlot", 2);
+export {
+  MzField
+};
+//# sourceMappingURL=field.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/field/field.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './field.styles.js';\n\n/**\n * @summary A form field wrapper that groups a label, form control, help text, and error message.\n *\n * @slot - The form control.\n * @slot label - Custom label content. Overrides the `label` property.\n * @slot help-text - Custom help text content. Overrides the `helpText` property.\n * @slot error - Custom error content. Overrides the `error` property.\n *\n * @csspart base - The outer container element.\n * @csspart label - The label wrapper.\n * @csspart control - The control wrapper around the default slot.\n * @csspart help-text - The help text wrapper.\n * @csspart error - The error message wrapper.\n */\nexport class MzField extends ManzanoElement {\n  static override styles = styles;\n\n  /** The label text. */\n  @property() label = '';\n\n  /** Help/description text displayed below the control. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Error message text. When non-empty, the field shows an error state. */\n  @property() error = '';\n\n  /** Shows a required indicator on the label. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Visual disabled state. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The size of the field. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @state() private hasLabelSlot = false;\n  @state() private hasHelpTextSlot = false;\n  @state() private hasErrorSlot = false;\n\n  private handleLabelSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private handleHelpTextSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasHelpTextSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private handleErrorSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  render() {\n    const hasLabel = this.label || this.hasLabelSlot;\n    const hasHelpText = this.helpText || this.hasHelpTextSlot;\n    const hasError = this.error || this.hasErrorSlot;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          field: true,\n          'field--has-error': !!hasError,\n          'field--disabled': this.disabled\n        })}\n      >\n        ${hasLabel\n          ? html`\n              <div part=\"label\" class=\"field__label\">\n                <slot name=\"label\" @slotchange=${this.handleLabelSlotChange}>\n                  ${this.label}\n                  ${this.required\n                    ? html`<span class=\"field__required\" aria-hidden=\"true\">*</span>`\n                    : nothing}\n                </slot>\n              </div>\n            `\n          : nothing}\n\n        <div part=\"control\" class=\"field__control\">\n          <slot></slot>\n        </div>\n\n        ${hasHelpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\">\n                <slot name=\"help-text\" @slotchange=${this.handleHelpTextSlotChange}\n                  >${this.helpText}</slot\n                >\n              </div>\n            `\n          : nothing}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" role=\"alert\">\n                <slot name=\"error\" @slotchange=${this.handleErrorSlotChange}>${this.error}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,UAAU,aAAa;AAChC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAgBZ,MAAM,gBAAgB,eAAe;AAAA,EAArC;AAAA;AAIO,iBAAQ;AAGkB,oBAAW;AAGrC,iBAAQ;AAGwB,oBAAW;AAGX,oBAAW;AAG1B,gBAAqC;AAEzD,SAAQ,eAAe;AACvB,SAAQ,kBAAkB;AAC1B,SAAQ,eAAe;AAAA;AAAA,EAExB,sBAAsB,GAAU;AACtC,UAAM,OAAO,EAAE;AACf,SAAK,eAAe,KAAK,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,EACrE;AAAA,EAEQ,yBAAyB,GAAU;AACzC,UAAM,OAAO,EAAE;AACf,SAAK,kBAAkB,KAAK,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,EACxE;AAAA,EAEQ,sBAAsB,GAAU;AACtC,UAAM,OAAO,EAAE;AACf,SAAK,eAAe,KAAK,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,EACrE;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,SAAS,KAAK;AACpC,UAAM,cAAc,KAAK,YAAY,KAAK;AAC1C,UAAM,WAAW,KAAK,SAAS,KAAK;AAEpC,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,oBAAoB,CAAC,CAAC;AAAA,MACtB,mBAAmB,KAAK;AAAA,IAC1B,CAAC,CAAC;AAAA;AAAA,UAEA,WACE;AAAA;AAAA,iDAEqC,KAAK,qBAAqB;AAAA,oBACvD,KAAK,KAAK;AAAA,oBACV,KAAK,WACH,kEACA,OAAO;AAAA;AAAA;AAAA,gBAIjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMT,eAAe,CAAC,WACd;AAAA;AAAA,qDAEyC,KAAK,wBAAwB;AAAA,qBAC7D,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAItB,OAAO;AAAA,UACT,WACE;AAAA;AAAA,iDAEqC,KAAK,qBAAqB,IAAI,KAAK,KAAK;AAAA;AAAA,gBAG7E,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA1Fa,QACK,SAAS;AAGb;AAAA,EAAX,SAAS;AAAA,GAJC,QAIC;AAG0B;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GAPzB,QAO2B;AAG1B;AAAA,EAAX,SAAS;AAAA,GAVC,QAUC;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAb/B,QAaiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhB/B,QAgBiC;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAnBhB,QAmBkB;AAEZ;AAAA,EAAhB,MAAM;AAAA,GArBI,QAqBM;AACA;AAAA,EAAhB,MAAM;AAAA,GAtBI,QAsBM;AACA;AAAA,EAAhB,MAAM;AAAA,GAvBI,QAuBM;",
+  "names": []
+}

package/dist/components/field/field.d.ts

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

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

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

package/dist/components/field/field.js

@@ -0,0 +1,6 @@
+import { MzField } from "./field.component.js";
+MzField.define("mz-field");
+export {
+  MzField
+};
+//# sourceMappingURL=field.js.map

package/dist/components/field/field.js.map

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

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

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

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

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

package/dist/components/field/field.styles.js

@@ -0,0 +1,65 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var field_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--mz-space-xs, 0.375rem);
+      font-family: var(--mz-font-sans);
+    }
+
+    .field__label {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.125rem;
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium, 500);
+      color: var(--mz-color-text);
+      line-height: var(--mz-line-height-normal);
+    }
+
+    :host([size='small']) .field__label {
+      font-size: var(--mz-font-size-xs);
+    }
+
+    :host([size='large']) .field__label {
+      font-size: var(--mz-font-size-base);
+    }
+
+    .field__required {
+      color: var(--mz-color-danger);
+      font-weight: var(--mz-font-weight-bold, 700);
+    }
+
+    .field__help-text {
+      font-size: var(--mz-font-size-xs);
+      color: var(--mz-color-text-secondary);
+      line-height: var(--mz-line-height-normal);
+    }
+
+    .field__error {
+      font-size: var(--mz-font-size-xs);
+      color: var(--mz-color-danger);
+      line-height: var(--mz-line-height-normal);
+    }
+
+    .field--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .field--disabled .field__label {
+      cursor: not-allowed;
+    }
+  `
+];
+export {
+  field_styles_default as default
+};
+//# sourceMappingURL=field.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/field/field.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: block;\n    }\n\n    .field {\n      display: flex;\n      flex-direction: column;\n      gap: var(--mz-space-xs, 0.375rem);\n      font-family: var(--mz-font-sans);\n    }\n\n    .field__label {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.125rem;\n      font-size: var(--mz-font-size-sm);\n      font-weight: var(--mz-font-weight-medium, 500);\n      color: var(--mz-color-text);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    :host([size='small']) .field__label {\n      font-size: var(--mz-font-size-xs);\n    }\n\n    :host([size='large']) .field__label {\n      font-size: var(--mz-font-size-base);\n    }\n\n    .field__required {\n      color: var(--mz-color-danger);\n      font-weight: var(--mz-font-weight-bold, 700);\n    }\n\n    .field__help-text {\n      font-size: var(--mz-font-size-xs);\n      color: var(--mz-color-text-secondary);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .field__error {\n      font-size: var(--mz-font-size-xs);\n      color: var(--mz-color-danger);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .field--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .field--disabled .field__label {\n      cursor: not-allowed;\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;AAwDF;",
+  "names": []
+}

package/dist/components/file-input/file-input.component.d.ts

@@ -0,0 +1,60 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A file upload input with drag-and-drop support and a file list.
+ *
+ * @tag mz-file-input
+ *
+ * @event mz-change - Emitted when the file list changes. Detail: `{ files: File[] }`
+ * @event mz-remove - Emitted when a file is removed. Detail: `{ file: File, index: number }`
+ *
+ * @csspart base - The component wrapper.
+ * @csspart dropzone - The drag-and-drop target area.
+ * @csspart button - The browse button.
+ * @csspart file-list - The list of selected files.
+ * @csspart file-item - An individual file row.
+ */
+export declare class MzFileInput extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** File type filter (e.g. `'.jpg,.png,image/*'`). */
+    accept: string;
+    /** Allow multiple files. */
+    multiple: boolean;
+    /** Disables the file input. */
+    disabled: boolean;
+    /** Maximum size per file in bytes. */
+    maxFileSize?: number;
+    /** Maximum number of files allowed. */
+    maxFiles?: number;
+    /** Form field name. */
+    name: string;
+    /** Text for the browse button. */
+    buttonText: string;
+    /** Text displayed in the dropzone. */
+    dropzoneText: string;
+    /** Hide the dropzone and show only a button. */
+    noDropzone: boolean;
+    /** Size variant. */
+    size: 'small' | 'medium' | 'large';
+    /** Currently selected files. */
+    private files;
+    /** Whether a drag operation is hovering over the dropzone. */
+    private isDragOver;
+    private fileInput;
+    /** Returns the current list of selected files. */
+    getFiles(): File[];
+    /** Removes all selected files and resets the native input. */
+    clearFiles(): void;
+    /** Removes the file at the given index. */
+    removeFile(index: number): void;
+    /** Format bytes into a human-readable string. */
+    private formatSize;
+    /** Validate and add files from a FileList. */
+    private addFiles;
+    private handleFileChange;
+    private handleBrowseClick;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=file-input.component.d.ts.map

package/dist/components/file-input/file-input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.component.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,cAAc;IAC7C,OAAgB,MAAM,4BAA6B;IAEnD,qDAAqD;IACzC,MAAM,SAAM;IAExB,4BAA4B;IACC,QAAQ,UAAS;IAE9C,+BAA+B;IACa,QAAQ,UAAS;IAE7D,sCAAsC;IACkB,WAAW,CAAC,EAAE,MAAM,CAAC;IAE7E,uCAAuC;IACa,QAAQ,CAAC,EAAE,MAAM,CAAC;IAEtE,uBAAuB;IACX,IAAI,SAAM;IAEtB,kCAAkC;IACM,UAAU,SAAkB;IAEpE,sCAAsC;IACI,YAAY,SAAiC;IAEvF,gDAAgD;IACsB,UAAU,UAAS;IAEzF,oBAAoB;IACS,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE3E,gCAAgC;IACvB,OAAO,CAAC,KAAK,CAAc;IAEpC,8DAA8D;IACrD,OAAO,CAAC,UAAU,CAAS;IAEpB,OAAO,CAAC,SAAS,CAAoB;IAErD,kDAAkD;IAClD,QAAQ,IAAI,IAAI,EAAE;IAIlB,8DAA8D;IAC9D,UAAU,IAAI,IAAI;IAQlB,2CAA2C;IAC3C,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW/B,iDAAiD;IACjD,OAAO,CAAC,UAAU;IASlB,8CAA8C;IAC9C,OAAO,CAAC,QAAQ;IAyBhB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,UAAU;IAST,MAAM;CA2HhB"}