@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/format-bytes/format-bytes.js.map

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

package/dist/components/format-bytes/format-bytes.styles.d.ts

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

package/dist/components/format-bytes/format-bytes.styles.d.ts.map

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

package/dist/components/format-bytes/format-bytes.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var format_bytes_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline;
+    }
+  `
+];
+export {
+  format_bytes_styles_default as default
+};
+//# sourceMappingURL=format-bytes.styles.js.map

package/dist/components/format-bytes/format-bytes.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-bytes/format-bytes.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;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,8BAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAKF;",
+  "names": []
+}

package/dist/components/format-date/format-date.component.d.ts

@@ -0,0 +1,40 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary Formats a date using the browser's `Intl.DateTimeFormat` API.
+ *
+ * @tag mz-format-date
+ *
+ * @example
+ * ```html
+ * <mz-format-date month="long" day="numeric" year="numeric"></mz-format-date>
+ * ```
+ */
+export declare class MzFormatDate extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The date to format. Accepts a Date object, ISO string, or unix timestamp (ms). */
+    date: Date;
+    /** The weekday format: 'narrow', 'short', or 'long'. */
+    weekday?: 'narrow' | 'short' | 'long';
+    /** The era format: 'narrow', 'short', or 'long'. */
+    era?: 'narrow' | 'short' | 'long';
+    /** The year format: 'numeric' or '2-digit'. */
+    year?: 'numeric' | '2-digit';
+    /** The month format: 'numeric', '2-digit', 'narrow', 'short', or 'long'. */
+    month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+    /** The day format: 'numeric' or '2-digit'. */
+    day?: 'numeric' | '2-digit';
+    /** The hour format: 'numeric' or '2-digit'. */
+    hour?: 'numeric' | '2-digit';
+    /** The minute format: 'numeric' or '2-digit'. */
+    minute?: 'numeric' | '2-digit';
+    /** The second format: 'numeric' or '2-digit'. */
+    second?: 'numeric' | '2-digit';
+    /** The time zone name format: 'short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', or 'longGeneric'. */
+    timeZoneName?: 'short' | 'long' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric';
+    /** The hour format: 'auto' (locale default), '12' (12-hour), or '24' (24-hour). */
+    hourFormat: 'auto' | '12' | '24';
+    /** The locale to use for formatting. Defaults to the browser's locale. */
+    locale?: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=format-date.component.d.ts.map

package/dist/components/format-date/format-date.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-date.component.d.ts","sourceRoot":"","sources":["../../../src/components/format-date/format-date.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;GASG;AACH,qBAAa,YAAa,SAAQ,cAAc;IAC9C,MAAM,CAAC,MAAM,4BAAU;IAEvB,qFAAqF;IAUrF,IAAI,EAAE,IAAI,CAAc;IAExB,wDAAwD;IAC5C,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAElD,oDAAoD;IACxC,GAAG,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAE9C,+CAA+C;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEzC,4EAA4E;IAChE,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAExE,8CAA8C;IAClC,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAExC,+CAA+C;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEzC,iDAAiD;IACrC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAE3C,iDAAiD;IACrC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAE3C,iHAAiH;IAEjH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,GAAG,aAAa,CAAC;IAEhG,mFAAmF;IAEnF,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAU;IAE1C,0EAA0E;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAE5B,MAAM;CA4BP"}

package/dist/components/format-date/format-date.component.js

@@ -0,0 +1,92 @@
+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 "./format-date.styles.js";
+class MzFormatDate extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.date = /* @__PURE__ */ new Date();
+    this.hourFormat = "auto";
+  }
+  render() {
+    const date = this.date instanceof Date ? this.date : new Date(this.date);
+    if (isNaN(date.getTime())) {
+      return html``;
+    }
+    const options = {};
+    if (this.weekday) options.weekday = this.weekday;
+    if (this.era) options.era = this.era;
+    if (this.year) options.year = this.year;
+    if (this.month) options.month = this.month;
+    if (this.day) options.day = this.day;
+    if (this.hour) options.hour = this.hour;
+    if (this.minute) options.minute = this.minute;
+    if (this.second) options.second = this.second;
+    if (this.timeZoneName) options.timeZoneName = this.timeZoneName;
+    if (this.hourFormat !== "auto") {
+      options.hour12 = this.hourFormat === "12";
+    }
+    const formatted = new Intl.DateTimeFormat(this.locale, options).format(date);
+    const isoString = date.toISOString();
+    return html`<time datetime=${isoString}>${formatted}</time>`;
+  }
+}
+MzFormatDate.styles = styles;
+__decorateClass([
+  property({
+    attribute: "date",
+    converter: {
+      fromAttribute(value) {
+        const num = Number(value);
+        return isNaN(num) ? new Date(value) : new Date(num);
+      }
+    }
+  })
+], MzFormatDate.prototype, "date", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "weekday", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "era", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "year", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "month", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "day", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "hour", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "minute", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "second", 2);
+__decorateClass([
+  property({ attribute: "time-zone-name" })
+], MzFormatDate.prototype, "timeZoneName", 2);
+__decorateClass([
+  property({ attribute: "hour-format" })
+], MzFormatDate.prototype, "hourFormat", 2);
+__decorateClass([
+  property()
+], MzFormatDate.prototype, "locale", 2);
+export {
+  MzFormatDate
+};
+//# sourceMappingURL=format-date.component.js.map

package/dist/components/format-date/format-date.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-date/format-date.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './format-date.styles.js';\n\n/**\n * @summary Formats a date using the browser's `Intl.DateTimeFormat` API.\n *\n * @tag mz-format-date\n *\n * @example\n * ```html\n * <mz-format-date month=\"long\" day=\"numeric\" year=\"numeric\"></mz-format-date>\n * ```\n */\nexport class MzFormatDate extends ManzanoElement {\n  static styles = styles;\n\n  /** The date to format. Accepts a Date object, ISO string, or unix timestamp (ms). */\n  @property({\n    attribute: 'date',\n    converter: {\n      fromAttribute(value: string) {\n        const num = Number(value);\n        return isNaN(num) ? new Date(value) : new Date(num);\n      }\n    }\n  })\n  date: Date = new Date();\n\n  /** The weekday format: 'narrow', 'short', or 'long'. */\n  @property() weekday?: 'narrow' | 'short' | 'long';\n\n  /** The era format: 'narrow', 'short', or 'long'. */\n  @property() era?: 'narrow' | 'short' | 'long';\n\n  /** The year format: 'numeric' or '2-digit'. */\n  @property() year?: 'numeric' | '2-digit';\n\n  /** The month format: 'numeric', '2-digit', 'narrow', 'short', or 'long'. */\n  @property() month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';\n\n  /** The day format: 'numeric' or '2-digit'. */\n  @property() day?: 'numeric' | '2-digit';\n\n  /** The hour format: 'numeric' or '2-digit'. */\n  @property() hour?: 'numeric' | '2-digit';\n\n  /** The minute format: 'numeric' or '2-digit'. */\n  @property() minute?: 'numeric' | '2-digit';\n\n  /** The second format: 'numeric' or '2-digit'. */\n  @property() second?: 'numeric' | '2-digit';\n\n  /** The time zone name format: 'short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', or 'longGeneric'. */\n  @property({ attribute: 'time-zone-name' })\n  timeZoneName?: 'short' | 'long' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric';\n\n  /** The hour format: 'auto' (locale default), '12' (12-hour), or '24' (24-hour). */\n  @property({ attribute: 'hour-format' })\n  hourFormat: 'auto' | '12' | '24' = 'auto';\n\n  /** The locale to use for formatting. Defaults to the browser's locale. */\n  @property() locale?: string;\n\n  render() {\n    const date = this.date instanceof Date ? this.date : new Date(this.date);\n\n    if (isNaN(date.getTime())) {\n      return html``;\n    }\n\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.weekday) options.weekday = this.weekday;\n    if (this.era) options.era = this.era;\n    if (this.year) options.year = this.year;\n    if (this.month) options.month = this.month;\n    if (this.day) options.day = this.day;\n    if (this.hour) options.hour = this.hour;\n    if (this.minute) options.minute = this.minute;\n    if (this.second) options.second = this.second;\n    if (this.timeZoneName) options.timeZoneName = this.timeZoneName;\n\n    if (this.hourFormat !== 'auto') {\n      options.hour12 = this.hourFormat === '12';\n    }\n\n    const formatted = new Intl.DateTimeFormat(this.locale, options).format(date);\n    const isoString = date.toISOString();\n\n    return html`<time datetime=${isoString}>${formatted}</time>`;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAYZ,MAAM,qBAAqB,eAAe;AAAA,EAA1C;AAAA;AAaL,gBAAa,oBAAI,KAAK;AAgCtB,sBAAmC;AAAA;AAAA,EAKnC,SAAS;AACP,UAAM,OAAO,KAAK,gBAAgB,OAAO,KAAK,OAAO,IAAI,KAAK,KAAK,IAAI;AAEvE,QAAI,MAAM,KAAK,QAAQ,CAAC,GAAG;AACzB,aAAO;AAAA,IACT;AAEA,UAAM,UAAsC,CAAC;AAE7C,QAAI,KAAK,QAAS,SAAQ,UAAU,KAAK;AACzC,QAAI,KAAK,IAAK,SAAQ,MAAM,KAAK;AACjC,QAAI,KAAK,KAAM,SAAQ,OAAO,KAAK;AACnC,QAAI,KAAK,MAAO,SAAQ,QAAQ,KAAK;AACrC,QAAI,KAAK,IAAK,SAAQ,MAAM,KAAK;AACjC,QAAI,KAAK,KAAM,SAAQ,OAAO,KAAK;AACnC,QAAI,KAAK,OAAQ,SAAQ,SAAS,KAAK;AACvC,QAAI,KAAK,OAAQ,SAAQ,SAAS,KAAK;AACvC,QAAI,KAAK,aAAc,SAAQ,eAAe,KAAK;AAEnD,QAAI,KAAK,eAAe,QAAQ;AAC9B,cAAQ,SAAS,KAAK,eAAe;AAAA,IACvC;AAEA,UAAM,YAAY,IAAI,KAAK,eAAe,KAAK,QAAQ,OAAO,EAAE,OAAO,IAAI;AAC3E,UAAM,YAAY,KAAK,YAAY;AAEnC,WAAO,sBAAsB,SAAS,IAAI,SAAS;AAAA,EACrD;AACF;AA9Ea,aACJ,SAAS;AAYhB;AAAA,EATC,SAAS;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,MACT,cAAc,OAAe;AAC3B,cAAM,MAAM,OAAO,KAAK;AACxB,eAAO,MAAM,GAAG,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG;AAAA,MACpD;AAAA,IACF;AAAA,EACF,CAAC;AAAA,GAZU,aAaX;AAGY;AAAA,EAAX,SAAS;AAAA,GAhBC,aAgBC;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBC,aAmBC;AAGA;AAAA,EAAX,SAAS;AAAA,GAtBC,aAsBC;AAGA;AAAA,EAAX,SAAS;AAAA,GAzBC,aAyBC;AAGA;AAAA,EAAX,SAAS;AAAA,GA5BC,aA4BC;AAGA;AAAA,EAAX,SAAS;AAAA,GA/BC,aA+BC;AAGA;AAAA,EAAX,SAAS;AAAA,GAlCC,aAkCC;AAGA;AAAA,EAAX,SAAS;AAAA,GArCC,aAqCC;AAIZ;AAAA,EADC,SAAS,EAAE,WAAW,iBAAiB,CAAC;AAAA,GAxC9B,aAyCX;AAIA;AAAA,EADC,SAAS,EAAE,WAAW,cAAc,CAAC;AAAA,GA5C3B,aA6CX;AAGY;AAAA,EAAX,SAAS;AAAA,GAhDC,aAgDC;",
+  "names": []
+}

package/dist/components/format-date/format-date.d.ts

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

package/dist/components/format-date/format-date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-date.d.ts","sourceRoot":"","sources":["../../../src/components/format-date/format-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,cAAc,4BAA4B,CAAC;AAI3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/format-date/format-date.js

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

package/dist/components/format-date/format-date.js.map

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

package/dist/components/format-date/format-date.styles.d.ts

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

package/dist/components/format-date/format-date.styles.d.ts.map

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

package/dist/components/format-date/format-date.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var format_date_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline;
+    }
+  `
+];
+export {
+  format_date_styles_default as default
+};
+//# sourceMappingURL=format-date.styles.js.map

package/dist/components/format-date/format-date.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-date/format-date.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;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,6BAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAKF;",
+  "names": []
+}

package/dist/components/format-number/format-number.component.d.ts

@@ -0,0 +1,34 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary Formats a number using the browser's `Intl.NumberFormat` API.
+ *
+ * @tag mz-format-number
+ *
+ * @example
+ * ```html
+ * <mz-format-number value="1234.56" type="currency" currency="USD"></mz-format-number>
+ * ```
+ */
+export declare class MzFormatNumber extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The number to format. */
+    value: number;
+    /** The formatting style: 'decimal', 'currency', 'percent', or 'unit'. Maps to Intl.NumberFormat `style`. */
+    type: 'decimal' | 'currency' | 'percent' | 'unit';
+    /** The currency code when type is 'currency' (e.g. 'USD', 'EUR'). */
+    currency?: string;
+    /** How to display the currency: 'symbol', 'narrowSymbol', 'code', or 'name'. */
+    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+    /** The notation to use: 'standard', 'scientific', 'engineering', or 'compact'. */
+    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+    /** The minimum number of integer digits. */
+    minimumIntegerDigits?: number;
+    /** The minimum number of fraction digits. */
+    minimumFractionDigits?: number;
+    /** The maximum number of fraction digits. */
+    maximumFractionDigits?: number;
+    /** The locale to use for formatting. Defaults to the browser's locale. */
+    locale?: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=format-number.component.d.ts.map

package/dist/components/format-number/format-number.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-number.component.d.ts","sourceRoot":"","sources":["../../../src/components/format-number/format-number.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;GASG;AACH,qBAAa,cAAe,SAAQ,cAAc;IAChD,MAAM,CAAC,MAAM,4BAAU;IAEvB,4BAA4B;IACA,KAAK,EAAE,MAAM,CAAK;IAE9C,4GAA4G;IAChG,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAa;IAE1E,qEAAqE;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9B,gFAAgF;IAEhF,eAAe,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;IAE9D,kFAAkF;IACtE,QAAQ,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;IAE7E,4CAA4C;IAE5C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,6CAA6C;IAE7C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,6CAA6C;IAE7C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,0EAA0E;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAE5B,MAAM;CA0BP"}

package/dist/components/format-number/format-number.component.js

@@ -0,0 +1,75 @@
+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 "./format-number.styles.js";
+class MzFormatNumber extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.type = "decimal";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return html``;
+    }
+    const options = {
+      style: this.type
+    };
+    if (this.type === "currency" && this.currency) {
+      options.currency = this.currency;
+    }
+    if (this.currencyDisplay) options.currencyDisplay = this.currencyDisplay;
+    if (this.notation) options.notation = this.notation;
+    if (this.minimumIntegerDigits !== void 0) options.minimumIntegerDigits = this.minimumIntegerDigits;
+    if (this.minimumFractionDigits !== void 0) options.minimumFractionDigits = this.minimumFractionDigits;
+    if (this.maximumFractionDigits !== void 0) options.maximumFractionDigits = this.maximumFractionDigits;
+    try {
+      const formatted = new Intl.NumberFormat(this.locale, options).format(this.value);
+      return html`<span>${formatted}</span>`;
+    } catch {
+      return html`<span>${String(this.value)}</span>`;
+    }
+  }
+}
+MzFormatNumber.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzFormatNumber.prototype, "value", 2);
+__decorateClass([
+  property()
+], MzFormatNumber.prototype, "type", 2);
+__decorateClass([
+  property()
+], MzFormatNumber.prototype, "currency", 2);
+__decorateClass([
+  property({ attribute: "currency-display" })
+], MzFormatNumber.prototype, "currencyDisplay", 2);
+__decorateClass([
+  property()
+], MzFormatNumber.prototype, "notation", 2);
+__decorateClass([
+  property({ type: Number, attribute: "minimum-integer-digits" })
+], MzFormatNumber.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  property({ type: Number, attribute: "minimum-fraction-digits" })
+], MzFormatNumber.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  property({ type: Number, attribute: "maximum-fraction-digits" })
+], MzFormatNumber.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  property()
+], MzFormatNumber.prototype, "locale", 2);
+export {
+  MzFormatNumber
+};
+//# sourceMappingURL=format-number.component.js.map

package/dist/components/format-number/format-number.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-number/format-number.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './format-number.styles.js';\n\n/**\n * @summary Formats a number using the browser's `Intl.NumberFormat` API.\n *\n * @tag mz-format-number\n *\n * @example\n * ```html\n * <mz-format-number value=\"1234.56\" type=\"currency\" currency=\"USD\"></mz-format-number>\n * ```\n */\nexport class MzFormatNumber extends ManzanoElement {\n  static styles = styles;\n\n  /** The number to format. */\n  @property({ type: Number }) value: number = 0;\n\n  /** The formatting style: 'decimal', 'currency', 'percent', or 'unit'. Maps to Intl.NumberFormat `style`. */\n  @property() type: 'decimal' | 'currency' | 'percent' | 'unit' = 'decimal';\n\n  /** The currency code when type is 'currency' (e.g. 'USD', 'EUR'). */\n  @property() currency?: string;\n\n  /** How to display the currency: 'symbol', 'narrowSymbol', 'code', or 'name'. */\n  @property({ attribute: 'currency-display' })\n  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';\n\n  /** The notation to use: 'standard', 'scientific', 'engineering', or 'compact'. */\n  @property() notation?: 'standard' | 'scientific' | 'engineering' | 'compact';\n\n  /** The minimum number of integer digits. */\n  @property({ type: Number, attribute: 'minimum-integer-digits' })\n  minimumIntegerDigits?: number;\n\n  /** The minimum number of fraction digits. */\n  @property({ type: Number, attribute: 'minimum-fraction-digits' })\n  minimumFractionDigits?: number;\n\n  /** The maximum number of fraction digits. */\n  @property({ type: Number, attribute: 'maximum-fraction-digits' })\n  maximumFractionDigits?: number;\n\n  /** The locale to use for formatting. Defaults to the browser's locale. */\n  @property() locale?: string;\n\n  render() {\n    if (isNaN(this.value)) {\n      return html``;\n    }\n\n    const options: Intl.NumberFormatOptions = {\n      style: this.type\n    };\n\n    if (this.type === 'currency' && this.currency) {\n      options.currency = this.currency;\n    }\n\n    if (this.currencyDisplay) options.currencyDisplay = this.currencyDisplay;\n    if (this.notation) options.notation = this.notation;\n    if (this.minimumIntegerDigits !== undefined) options.minimumIntegerDigits = this.minimumIntegerDigits;\n    if (this.minimumFractionDigits !== undefined) options.minimumFractionDigits = this.minimumFractionDigits;\n    if (this.maximumFractionDigits !== undefined) options.maximumFractionDigits = this.maximumFractionDigits;\n\n    try {\n      const formatted = new Intl.NumberFormat(this.locale, options).format(this.value);\n      return html`<span>${formatted}</span>`;\n    } catch {\n      return html`<span>${String(this.value)}</span>`;\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAYZ,MAAM,uBAAuB,eAAe;AAAA,EAA5C;AAAA;AAIuB,iBAAgB;AAGhC,gBAAoD;AAAA;AAAA,EA2BhE,SAAS;AACP,QAAI,MAAM,KAAK,KAAK,GAAG;AACrB,aAAO;AAAA,IACT;AAEA,UAAM,UAAoC;AAAA,MACxC,OAAO,KAAK;AAAA,IACd;AAEA,QAAI,KAAK,SAAS,cAAc,KAAK,UAAU;AAC7C,cAAQ,WAAW,KAAK;AAAA,IAC1B;AAEA,QAAI,KAAK,gBAAiB,SAAQ,kBAAkB,KAAK;AACzD,QAAI,KAAK,SAAU,SAAQ,WAAW,KAAK;AAC3C,QAAI,KAAK,yBAAyB,OAAW,SAAQ,uBAAuB,KAAK;AACjF,QAAI,KAAK,0BAA0B,OAAW,SAAQ,wBAAwB,KAAK;AACnF,QAAI,KAAK,0BAA0B,OAAW,SAAQ,wBAAwB,KAAK;AAEnF,QAAI;AACF,YAAM,YAAY,IAAI,KAAK,aAAa,KAAK,QAAQ,OAAO,EAAE,OAAO,KAAK,KAAK;AAC/E,aAAO,aAAa,SAAS;AAAA,IAC/B,QAAQ;AACN,aAAO,aAAa,OAAO,KAAK,KAAK,CAAC;AAAA,IACxC;AAAA,EACF;AACF;AA5Da,eACJ,SAAS;AAGY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJf,eAIiB;AAGhB;AAAA,EAAX,SAAS;AAAA,GAPC,eAOC;AAGA;AAAA,EAAX,SAAS;AAAA,GAVC,eAUC;AAIZ;AAAA,EADC,SAAS,EAAE,WAAW,mBAAmB,CAAC;AAAA,GAbhC,eAcX;AAGY;AAAA,EAAX,SAAS;AAAA,GAjBC,eAiBC;AAIZ;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,yBAAyB,CAAC;AAAA,GApBpD,eAqBX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,0BAA0B,CAAC;AAAA,GAxBrD,eAyBX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,0BAA0B,CAAC;AAAA,GA5BrD,eA6BX;AAGY;AAAA,EAAX,SAAS;AAAA,GAhCC,eAgCC;",
+  "names": []
+}

package/dist/components/format-number/format-number.d.ts

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

package/dist/components/format-number/format-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-number.d.ts","sourceRoot":"","sources":["../../../src/components/format-number/format-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,8BAA8B,CAAC;AAI7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/format-number/format-number.js

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

package/dist/components/format-number/format-number.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-number/format-number.ts"],
+  "sourcesContent": ["import { MzFormatNumber } from './format-number.component.js';\n\nexport * from './format-number.component.js';\n\nMzFormatNumber.define('mz-format-number');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-format-number': MzFormatNumber;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAE/B,cAAc;AAEd,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

package/dist/components/format-number/format-number.styles.d.ts

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

package/dist/components/format-number/format-number.styles.d.ts.map

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

package/dist/components/format-number/format-number.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var format_number_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline;
+    }
+  `
+];
+export {
+  format_number_styles_default as default
+};
+//# sourceMappingURL=format-number.styles.js.map

package/dist/components/format-number/format-number.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-number/format-number.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;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,+BAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAKF;",
+  "names": []
+}

package/dist/components/input/input.styles.js

@@ -15,7 +15,7 @@ var input_styles_default = [
       .input__control-wrapper {
         display: flex;
         align-items: center;
-        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);
+        border: var(--mz-input-border-width, var(--mz-border-width-sm)) solid var(--mz-input-border-color);
         border-radius: var(--_radius, var(--mz-input-border-radius));
         background: var(--mz-input-bg, var(--mz-color-surface));
         transition:

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/input/input.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default [\n  componentStyles,\n  formControlStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: block;\n      }\n\n      .input__control-wrapper {\n        display: flex;\n        align-items: center;\n        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);\n        border-radius: var(--_radius, var(--mz-input-border-radius));\n        background: var(--mz-input-bg, var(--mz-color-surface));\n        transition:\n          border-color var(--mz-transition-fast),\n          box-shadow var(--mz-transition-fast);\n        height: var(--_height);\n        cursor: text;\n      }\n\n      .input__control-wrapper:hover {\n        border-color: var(--mz-color-border-hover);\n      }\n\n      .input__control-wrapper:focus-within {\n        border-color: var(--mz-color-primary);\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      .input__control {\n        flex: 1;\n        min-width: 0;\n        border: none;\n        outline: none;\n        background: transparent;\n        color: var(--mz-color-text);\n        font-family: var(--mz-font-sans);\n        font-size: var(--_font-size);\n        line-height: var(--mz-line-height-normal);\n        padding: 0 var(--_padding-inline);\n        width: 100%;\n        height: 100%;\n      }\n\n      .input__control::placeholder {\n        color: var(--mz-color-text-disabled);\n      }\n\n      .input__prefix,\n      .input__suffix {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        color: var(--mz-color-text-secondary);\n      }\n\n      .input__prefix {\n        padding-inline-start: var(--_padding-inline);\n      }\n\n      .input__suffix {\n        padding-inline-end: var(--_padding-inline);\n      }\n\n      .input__prefix:empty,\n      .input__suffix:empty {\n        display: none;\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_height: var(--mz-input-height-sm);\n        --_font-size: var(--mz-input-font-size-sm);\n        --_padding-inline: var(--mz-space-sm);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_height: var(--mz-input-height-md);\n        --_font-size: var(--mz-input-font-size-md);\n        --_padding-inline: var(--mz-space-md);\n      }\n\n      :host([size='lg']) {\n        --_height: var(--mz-input-height-lg);\n        --_font-size: var(--mz-input-font-size-lg);\n        --_padding-inline: var(--mz-space-md);\n      }\n    }\n\n    @layer states {\n      :host([disabled]) .input__control-wrapper {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) .input__control {\n        cursor: not-allowed;\n      }\n\n      :host([data-user-invalid]) .input__control-wrapper {\n        border-color: var(--mz-color-danger);\n      }\n\n      :host([data-user-invalid]) .input__control-wrapper:focus-within {\n        --mz-focus-ring-color: var(--mz-color-danger);\n      }\n\n      :host([pill]) {\n        --_radius: var(--mz-radius-pill);\n      }\n    }\n  `\n];\n"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default [\n  componentStyles,\n  formControlStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: block;\n      }\n\n      .input__control-wrapper {\n        display: flex;\n        align-items: center;\n        border: var(--mz-input-border-width, var(--mz-border-width-sm)) solid var(--mz-input-border-color);\n        border-radius: var(--_radius, var(--mz-input-border-radius));\n        background: var(--mz-input-bg, var(--mz-color-surface));\n        transition:\n          border-color var(--mz-transition-fast),\n          box-shadow var(--mz-transition-fast);\n        height: var(--_height);\n        cursor: text;\n      }\n\n      .input__control-wrapper:hover {\n        border-color: var(--mz-color-border-hover);\n      }\n\n      .input__control-wrapper:focus-within {\n        border-color: var(--mz-color-primary);\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      .input__control {\n        flex: 1;\n        min-width: 0;\n        border: none;\n        outline: none;\n        background: transparent;\n        color: var(--mz-color-text);\n        font-family: var(--mz-font-sans);\n        font-size: var(--_font-size);\n        line-height: var(--mz-line-height-normal);\n        padding: 0 var(--_padding-inline);\n        width: 100%;\n        height: 100%;\n      }\n\n      .input__control::placeholder {\n        color: var(--mz-color-text-disabled);\n      }\n\n      .input__prefix,\n      .input__suffix {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        color: var(--mz-color-text-secondary);\n      }\n\n      .input__prefix {\n        padding-inline-start: var(--_padding-inline);\n      }\n\n      .input__suffix {\n        padding-inline-end: var(--_padding-inline);\n      }\n\n      .input__prefix:empty,\n      .input__suffix:empty {\n        display: none;\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_height: var(--mz-input-height-sm);\n        --_font-size: var(--mz-input-font-size-sm);\n        --_padding-inline: var(--mz-space-sm);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_height: var(--mz-input-height-md);\n        --_font-size: var(--mz-input-font-size-md);\n        --_padding-inline: var(--mz-space-md);\n      }\n\n      :host([size='lg']) {\n        --_height: var(--mz-input-height-lg);\n        --_font-size: var(--mz-input-font-size-lg);\n        --_padding-inline: var(--mz-space-md);\n      }\n    }\n\n    @layer states {\n      :host([disabled]) .input__control-wrapper {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) .input__control {\n        cursor: not-allowed;\n      }\n\n      :host([data-user-invalid]) .input__control-wrapper {\n        border-color: var(--mz-color-danger);\n      }\n\n      :host([data-user-invalid]) .input__control-wrapper:focus-within {\n        --mz-focus-ring-color: var(--mz-color-danger);\n      }\n\n      :host([pill]) {\n        --_radius: var(--mz-radius-pill);\n      }\n    }\n  `\n];\n"],
   "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAC5B,OAAO,uBAAuB;AAE9B,IAAO,uBAAQ;AAAA,EACb;AAAA,EACA;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;AAoHF;",
   "names": []
 }

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

@@ -0,0 +1,28 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary An input group that visually combines an input with prefix/suffix addons into a single cohesive unit.
+ *
+ * @slot - The input element (mz-input, mz-select, native input, etc.)
+ * @slot prefix - Addon before the input (e.g., "$" text, icon, button)
+ * @slot suffix - Addon after the input (e.g., ".com" text, button)
+ *
+ * @csspart base - The container
+ * @csspart prefix - The prefix area
+ * @csspart suffix - The suffix area
+ *
+ * @cssproperty --mz-input-group-border-color - Border color of the group
+ * @cssproperty --mz-input-group-border-radius - Border radius of the group
+ */
+export declare class MzInputGroup extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** The size of the input group. */
+    size: 'sm' | 'md' | 'lg';
+    /** Disables the input group visually. */
+    disabled: boolean;
+    private hasPrefix;
+    private hasSuffix;
+    private handlePrefixSlotChange;
+    private handleSuffixSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=input-group.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,cAAc;IAC9C,MAAM,CAAC,MAAM,0BAAU;IAEvB,mCAAmC;IACN,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,yCAAyC;IACG,QAAQ,UAAS;IAEpD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,sBAAsB;IAK9B,MAAM;CAuBP"}

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

@@ -0,0 +1,72 @@
+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 { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./input-group.styles.js";
+class MzInputGroup extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.disabled = false;
+    this.hasPrefix = false;
+    this.hasSuffix = false;
+  }
+  handlePrefixSlotChange(e) {
+    const slot = e.target;
+    this.hasPrefix = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  handleSuffixSlotChange(e) {
+    const slot = e.target;
+    this.hasSuffix = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      "input-group": true,
+      "input-group--has-prefix": this.hasPrefix,
+      "input-group--has-suffix": this.hasSuffix,
+      "input-group--disabled": this.disabled
+    })}
+        part="base"
+      >
+        <div class="input-group__prefix" part="prefix" ?hidden=${!this.hasPrefix}>
+          <slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
+        </div>
+        <div class="input-group__input">
+          <slot></slot>
+        </div>
+        <div class="input-group__suffix" part="suffix" ?hidden=${!this.hasSuffix}>
+          <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+MzInputGroup.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], MzInputGroup.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzInputGroup.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], MzInputGroup.prototype, "hasPrefix", 2);
+__decorateClass([
+  state()
+], MzInputGroup.prototype, "hasSuffix", 2);
+export {
+  MzInputGroup
+};
+//# sourceMappingURL=input-group.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/input-group/input-group.component.ts"],
+  "sourcesContent": ["import { html } 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 './input-group.styles.js';\n\n/**\n * @summary An input group that visually combines an input with prefix/suffix addons into a single cohesive unit.\n *\n * @slot - The input element (mz-input, mz-select, native input, etc.)\n * @slot prefix - Addon before the input (e.g., \"$\" text, icon, button)\n * @slot suffix - Addon after the input (e.g., \".com\" text, button)\n *\n * @csspart base - The container\n * @csspart prefix - The prefix area\n * @csspart suffix - The suffix area\n *\n * @cssproperty --mz-input-group-border-color - Border color of the group\n * @cssproperty --mz-input-group-border-radius - Border radius of the group\n */\nexport class MzInputGroup extends ManzanoElement {\n  static styles = styles;\n\n  /** The size of the input group. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Disables the input group visually. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private hasPrefix = false;\n  @state() private hasSuffix = false;\n\n  private handlePrefixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasPrefix = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private handleSuffixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasSuffix = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'input-group': true,\n          'input-group--has-prefix': this.hasPrefix,\n          'input-group--has-suffix': this.hasSuffix,\n          'input-group--disabled': this.disabled,\n        })}\n        part=\"base\"\n      >\n        <div class=\"input-group__prefix\" part=\"prefix\" ?hidden=${!this.hasPrefix}>\n          <slot name=\"prefix\" @slotchange=${this.handlePrefixSlotChange}></slot>\n        </div>\n        <div class=\"input-group__input\">\n          <slot></slot>\n        </div>\n        <div class=\"input-group__suffix\" part=\"suffix\" ?hidden=${!this.hasSuffix}>\n          <slot name=\"suffix\" @slotchange=${this.handleSuffixSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AAChC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAgBZ,MAAM,qBAAqB,eAAe;AAAA,EAA1C;AAAA;AAIwB,gBAA2B;AAGZ,oBAAW;AAE9C,SAAQ,YAAY;AACpB,SAAQ,YAAY;AAAA;AAAA,EAErB,uBAAuB,GAAU;AACvC,UAAM,OAAO,EAAE;AACf,SAAK,YAAY,KAAK,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,EAClE;AAAA,EAEQ,uBAAuB,GAAU;AACvC,UAAM,OAAO,EAAE;AACf,SAAK,YAAY,KAAK,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,EAClE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,eAAe;AAAA,MACf,2BAA2B,KAAK;AAAA,MAChC,2BAA2B,KAAK;AAAA,MAChC,yBAAyB,KAAK;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA;AAAA,iEAGuD,CAAC,KAAK,SAAS;AAAA,4CACpC,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,iEAKN,CAAC,KAAK,SAAS;AAAA,4CACpC,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA,EAIrE;AACF;AA7Ca,aACJ,SAAS;AAGa;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAJhB,aAIkB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAP/B,aAOiC;AAE3B;AAAA,EAAhB,MAAM;AAAA,GATI,aASM;AACA;AAAA,EAAhB,MAAM;AAAA,GAVI,aAUM;",
+  "names": []
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,cAAc,4BAA4B,CAAC;AAI3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}