@manzanohq/components 0.1.1

package/dist/components/switch/switch.d.ts

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

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

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

package/dist/components/switch/switch.js

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

package/dist/components/switch/switch.js.map

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

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

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

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

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

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,117 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import formControlStyles from "../../styles/form-control.styles.js";
+var switch_styles_default = [
+  componentStyles,
+  formControlStyles,
+  css`
+    @layer base, sizes, states;
+
+    @layer base {
+      :host {
+        display: inline-flex;
+      }
+
+      .switch {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--mz-space-xs);
+        cursor: pointer;
+        font-family: var(--mz-font-sans);
+        font-size: var(--_font-size, var(--mz-font-size-md));
+        line-height: var(--mz-line-height-normal);
+        color: var(--mz-color-text);
+      }
+
+      .switch__track {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        width: var(--_track-width, 2.5rem);
+        height: var(--_track-height, 1.5rem);
+        border-radius: var(--mz-radius-pill);
+        background: var(--mz-color-border);
+        transition: background var(--mz-transition-fast);
+      }
+
+      .switch__track--checked {
+        background: var(--mz-switch-color, var(--mz-color-primary));
+      }
+
+      .switch__thumb {
+        position: absolute;
+        width: var(--_thumb-size, 1.125rem);
+        height: var(--_thumb-size, 1.125rem);
+        border-radius: var(--mz-radius-circle);
+        background: #ffffff;
+        box-shadow: var(--mz-shadow-xs);
+        transition: transform var(--mz-transition-fast);
+        transform: translateX(var(--_thumb-offset, 0.1875rem));
+      }
+
+      .switch__track--checked .switch__thumb {
+        transform: translateX(calc(var(--_track-width, 2.5rem) - var(--_thumb-size, 1.125rem) - var(--_thumb-offset, 0.1875rem)));
+      }
+
+      .switch__label {
+        user-select: none;
+      }
+
+      /* Hidden native input */
+      .switch__input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .switch__input:focus-visible ~ .switch__track {
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+    }
+
+    @layer sizes {
+      :host([size='sm']) {
+        --_font-size: var(--mz-font-size-sm);
+        --_track-width: 2rem;
+        --_track-height: 1.25rem;
+        --_thumb-size: 0.875rem;
+        --_thumb-offset: 0.1875rem;
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_font-size: var(--mz-font-size-md);
+        --_track-width: 2.5rem;
+        --_track-height: 1.5rem;
+        --_thumb-size: 1.125rem;
+        --_thumb-offset: 0.1875rem;
+      }
+
+      :host([size='lg']) {
+        --_font-size: var(--mz-font-size-lg);
+        --_track-width: 3rem;
+        --_track-height: 1.75rem;
+        --_thumb-size: 1.375rem;
+        --_thumb-offset: 0.1875rem;
+      }
+    }
+
+    @layer states {
+      :host([disabled]) .switch {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  `
+];
+export {
+  switch_styles_default as default
+};
+//# sourceMappingURL=switch.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/switch/switch.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: inline-flex;\n      }\n\n      .switch {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--mz-space-xs);\n        cursor: pointer;\n        font-family: var(--mz-font-sans);\n        font-size: var(--_font-size, var(--mz-font-size-md));\n        line-height: var(--mz-line-height-normal);\n        color: var(--mz-color-text);\n      }\n\n      .switch__track {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        width: var(--_track-width, 2.5rem);\n        height: var(--_track-height, 1.5rem);\n        border-radius: var(--mz-radius-pill);\n        background: var(--mz-color-border);\n        transition: background var(--mz-transition-fast);\n      }\n\n      .switch__track--checked {\n        background: var(--mz-switch-color, var(--mz-color-primary));\n      }\n\n      .switch__thumb {\n        position: absolute;\n        width: var(--_thumb-size, 1.125rem);\n        height: var(--_thumb-size, 1.125rem);\n        border-radius: var(--mz-radius-circle);\n        background: #ffffff;\n        box-shadow: var(--mz-shadow-xs);\n        transition: transform var(--mz-transition-fast);\n        transform: translateX(var(--_thumb-offset, 0.1875rem));\n      }\n\n      .switch__track--checked .switch__thumb {\n        transform: translateX(calc(var(--_track-width, 2.5rem) - var(--_thumb-size, 1.125rem) - var(--_thumb-offset, 0.1875rem)));\n      }\n\n      .switch__label {\n        user-select: none;\n      }\n\n      /* Hidden native input */\n      .switch__input {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      .switch__input:focus-visible ~ .switch__track {\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_font-size: var(--mz-font-size-sm);\n        --_track-width: 2rem;\n        --_track-height: 1.25rem;\n        --_thumb-size: 0.875rem;\n        --_thumb-offset: 0.1875rem;\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_font-size: var(--mz-font-size-md);\n        --_track-width: 2.5rem;\n        --_track-height: 1.5rem;\n        --_thumb-size: 1.125rem;\n        --_thumb-offset: 0.1875rem;\n      }\n\n      :host([size='lg']) {\n        --_font-size: var(--mz-font-size-lg);\n        --_track-width: 3rem;\n        --_track-height: 1.75rem;\n        --_thumb-size: 1.375rem;\n        --_thumb-offset: 0.1875rem;\n      }\n    }\n\n    @layer states {\n      :host([disabled]) .switch {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAC5B,OAAO,uBAAuB;AAE9B,IAAO,wBAAQ;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;AA0GF;",
+  "names": []
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.component.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,KAAM,SAAQ,cAAc;IACvC,MAAM,CAAC,MAAM,4BAAU;IAEvB,kCAAkC;IACL,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAa;IAE3G,mCAAmC;IACN,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAY;IAElF,sBAAsB;IACO,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,iCAAiC;IACW,IAAI,UAAS;IAEzD,+BAA+B;IACa,SAAS,UAAS;IAE9D,OAAO,CAAC,YAAY;IAIpB,MAAM;CAgBP"}

package/dist/components/tag/tag.component.js

@@ -0,0 +1,61 @@
+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 "./tag.styles.js";
+class MzTag extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "neutral";
+    this.appearance = "filled";
+    this.size = "md";
+    this.pill = false;
+    this.removable = false;
+  }
+  handleRemove() {
+    this.emit("mz-remove");
+  }
+  render() {
+    return html`
+      <span part="base" class="tag">
+        <slot></slot>
+        ${this.removable ? html`<button
+              part="remove"
+              class="tag__remove"
+              type="button"
+              aria-label="Remove"
+              @click=${this.handleRemove}
+            >&times;</button>` : nothing}
+      </span>
+    `;
+  }
+}
+MzTag.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], MzTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzTag.prototype, "appearance", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTag.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTag.prototype, "removable", 2);
+export {
+  MzTag
+};
+//# sourceMappingURL=tag.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tag/tag.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './tag.styles.js';\n\n/**\n * @summary A tag for categorization and filtering.\n *\n * @tag mz-tag\n *\n * @slot - The tag's content.\n *\n * @event mz-remove - Emitted when the remove button is clicked.\n *\n * @csspart base - The tag's base wrapper.\n * @csspart remove - The remove button.\n *\n * @cssproperty --mz-tag-bg - Override the tag background.\n * @cssproperty --mz-tag-color - Override the tag text color.\n * @cssproperty --mz-tag-radius - Override the tag border radius.\n */\nexport class MzTag extends ManzanoElement {\n  static styles = styles;\n\n  /** The tag's semantic variant. */\n  @property({ reflect: true }) variant: 'primary' | 'danger' | 'success' | 'warning' | 'neutral' = 'neutral';\n\n  /** The tag's visual appearance. */\n  @property({ reflect: true }) appearance: 'filled' | 'outline' | 'soft' = 'filled';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Renders a pill-shaped tag. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable. */\n  @property({ type: Boolean, reflect: true }) removable = false;\n\n  private handleRemove() {\n    this.emit('mz-remove');\n  }\n\n  render() {\n    return html`\n      <span part=\"base\" class=\"tag\">\n        <slot></slot>\n        ${this.removable\n          ? html`<button\n              part=\"remove\"\n              class=\"tag__remove\"\n              type=\"button\"\n              aria-label=\"Remove\"\n              @click=${this.handleRemove}\n            >&times;</button>`\n          : nothing}\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAkBZ,MAAM,cAAc,eAAe;AAAA,EAAnC;AAAA;AAIwB,mBAAoE;AAGpE,sBAA4C;AAG5C,gBAA2B;AAGZ,gBAAO;AAGP,qBAAY;AAAA;AAAA,EAEhD,eAAe;AACrB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,UAGD,KAAK,YACH;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKW,KAAK,YAAY;AAAA,iCAE5B,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAtCa,MACJ,SAAS;AAGa;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAJhB,MAIkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPhB,MAOkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVhB,MAUkB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAb/B,MAaiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhB/B,MAgBiC;",
+  "names": []
+}

package/dist/components/tag/tag.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,cAAc,oBAAoB,CAAC;AAInC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/tag/tag.js

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

package/dist/components/tag/tag.js.map

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

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

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

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

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

package/dist/components/tag/tag.styles.js

@@ -0,0 +1,127 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var tag_styles_default = [
+  componentStyles,
+  css`
+    @layer base, variants, appearances, sizes, states;
+
+    @layer base {
+      :host {
+        display: inline-flex;
+      }
+
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--mz-space-2xs);
+        white-space: nowrap;
+        font-family: var(--mz-font-sans);
+        font-weight: var(--mz-font-weight-medium);
+        line-height: var(--mz-line-height-dense);
+        border: var(--mz-border-width-sm) solid transparent;
+        border-radius: var(--_radius, var(--mz-tag-radius, var(--mz-radius-md)));
+        background: var(--_bg);
+        color: var(--_text);
+        border-color: var(--_border, transparent);
+        font-size: var(--_font-size);
+        padding: var(--_padding);
+        cursor: default;
+      }
+
+      .tag__remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background: none;
+        border: none;
+        padding: 0;
+        margin-inline-start: var(--mz-space-3xs);
+        color: inherit;
+        opacity: 0.7;
+        transition: opacity var(--mz-transition-fast);
+        font-size: inherit;
+        line-height: 1;
+      }
+
+      .tag__remove:hover {
+        opacity: 1;
+      }
+    }
+
+    @layer variants {
+      :host([variant='primary']) {
+        --_color: var(--mz-color-primary);
+        --_on-color: var(--mz-color-on-primary);
+      }
+
+      :host([variant='danger']) {
+        --_color: var(--mz-color-danger);
+        --_on-color: var(--mz-color-on-danger);
+      }
+
+      :host([variant='success']) {
+        --_color: var(--mz-color-success);
+        --_on-color: var(--mz-color-on-success);
+      }
+
+      :host([variant='warning']) {
+        --_color: var(--mz-color-warning);
+        --_on-color: var(--mz-color-on-warning);
+      }
+
+      :host([variant='neutral']),
+      :host(:not([variant])) {
+        --_color: var(--mz-color-neutral);
+        --_on-color: var(--mz-color-on-neutral);
+      }
+    }
+
+    @layer appearances {
+      :host([appearance='filled']),
+      :host(:not([appearance])) {
+        --_bg: var(--mz-tag-bg, var(--_color));
+        --_text: var(--mz-tag-color, var(--_on-color));
+      }
+
+      :host([appearance='outline']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: var(--_color);
+      }
+
+      :host([appearance='soft']) {
+        --_bg: color-mix(in srgb, var(--_color) 15%, transparent);
+        --_text: var(--_color);
+      }
+    }
+
+    @layer sizes {
+      :host([size='sm']) {
+        --_font-size: var(--mz-font-size-2xs);
+        --_padding: var(--mz-space-2xs) var(--mz-space-sm);
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_font-size: var(--mz-font-size-xs);
+        --_padding: var(--mz-space-2xs) var(--mz-space-md);
+      }
+
+      :host([size='lg']) {
+        --_font-size: var(--mz-font-size-sm);
+        --_padding: var(--mz-space-xs) var(--mz-space-lg);
+      }
+    }
+
+    @layer states {
+      :host([pill]) {
+        --_radius: var(--mz-radius-pill);
+      }
+    }
+  `
+];
+export {
+  tag_styles_default as default
+};
+//# sourceMappingURL=tag.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tag/tag.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-flex;\n      }\n\n      .tag {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--mz-space-2xs);\n        white-space: nowrap;\n        font-family: var(--mz-font-sans);\n        font-weight: var(--mz-font-weight-medium);\n        line-height: var(--mz-line-height-dense);\n        border: var(--mz-border-width-sm) solid transparent;\n        border-radius: var(--_radius, var(--mz-tag-radius, var(--mz-radius-md)));\n        background: var(--_bg);\n        color: var(--_text);\n        border-color: var(--_border, transparent);\n        font-size: var(--_font-size);\n        padding: var(--_padding);\n        cursor: default;\n      }\n\n      .tag__remove {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        background: none;\n        border: none;\n        padding: 0;\n        margin-inline-start: var(--mz-space-3xs);\n        color: inherit;\n        opacity: 0.7;\n        transition: opacity var(--mz-transition-fast);\n        font-size: inherit;\n        line-height: 1;\n      }\n\n      .tag__remove:hover {\n        opacity: 1;\n      }\n    }\n\n    @layer variants {\n      :host([variant='primary']) {\n        --_color: var(--mz-color-primary);\n        --_on-color: var(--mz-color-on-primary);\n      }\n\n      :host([variant='danger']) {\n        --_color: var(--mz-color-danger);\n        --_on-color: var(--mz-color-on-danger);\n      }\n\n      :host([variant='success']) {\n        --_color: var(--mz-color-success);\n        --_on-color: var(--mz-color-on-success);\n      }\n\n      :host([variant='warning']) {\n        --_color: var(--mz-color-warning);\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        --_on-color: var(--mz-color-on-neutral);\n      }\n    }\n\n    @layer appearances {\n      :host([appearance='filled']),\n      :host(:not([appearance])) {\n        --_bg: var(--mz-tag-bg, var(--_color));\n        --_text: var(--mz-tag-color, var(--_on-color));\n      }\n\n      :host([appearance='outline']) {\n        --_bg: transparent;\n        --_text: var(--_color);\n        --_border: var(--_color);\n      }\n\n      :host([appearance='soft']) {\n        --_bg: color-mix(in srgb, var(--_color) 15%, transparent);\n        --_text: var(--_color);\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_font-size: var(--mz-font-size-2xs);\n        --_padding: var(--mz-space-2xs) var(--mz-space-sm);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_font-size: var(--mz-font-size-xs);\n        --_padding: var(--mz-space-2xs) var(--mz-space-md);\n      }\n\n      :host([size='lg']) {\n        --_font-size: var(--mz-font-size-sm);\n        --_padding: var(--mz-space-xs) var(--mz-space-lg);\n      }\n    }\n\n    @layer states {\n      :host([pill]) {\n        --_radius: var(--mz-radius-pill);\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,qBAAQ;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;AAsHF;",
+  "names": []
+}

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

@@ -0,0 +1,62 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A multi-line text input.
+ *
+ * @tag mz-textarea
+ *
+ * @slot label - The textarea label.
+ * @slot help-text - Help text below the textarea.
+ *
+ * @event mz-input - Emitted when the user types.
+ * @event mz-change - Emitted when the value changes and the textarea loses focus.
+ * @event mz-focus - Emitted when the textarea gains focus.
+ * @event mz-blur - Emitted when the textarea loses focus.
+ *
+ * @csspart base - The form control wrapper.
+ * @csspart label - The label element.
+ * @csspart control - The native textarea element.
+ * @csspart help-text - The help text element.
+ *
+ * @cssproperty --mz-textarea-resize - The resize behavior (vertical, horizontal, both, none).
+ * @cssproperty --mz-textarea-min-height - The minimum height.
+ */
+export declare class MzTextarea extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private readonly hasSlotController;
+    private textareaEl;
+    /** The textarea's name for form participation. */
+    name: string;
+    /** The textarea's value. */
+    value: string;
+    /** Placeholder text. */
+    placeholder: string;
+    /** The textarea's size. */
+    size: 'sm' | 'md' | 'lg';
+    /** The label text. */
+    label: string;
+    /** Help text. */
+    helpText: string;
+    /** Disables the textarea. */
+    disabled: boolean;
+    /** Makes the textarea readonly. */
+    readonly: boolean;
+    /** Makes the textarea required. */
+    required: boolean;
+    /** Number of visible rows. */
+    rows: number;
+    /** Minimum length. */
+    minlength?: number;
+    /** Maximum length. */
+    maxlength?: number;
+    /** Sets focus on the textarea. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the textarea. */
+    blur(): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=textarea.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC5C,MAAM,CAAC,MAAM,4BAAU;IACvB,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAqD;IAE1D,OAAO,CAAC,UAAU,CAAuB;IAEtE,kDAAkD;IACtC,IAAI,SAAM;IAEtB,4BAA4B;IAChB,KAAK,SAAM;IAEvB,wBAAwB;IACZ,WAAW,SAAM;IAE7B,2BAA2B;IACE,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,sBAAsB;IACV,KAAK,SAAM;IAEvB,iBAAiB;IACqB,QAAQ,SAAM;IAEpD,6BAA6B;IACe,QAAQ,UAAS;IAE7D,mCAAmC;IACS,QAAQ,UAAS;IAE7D,mCAAmC;IACS,QAAQ,UAAS;IAE7D,8BAA8B;IACF,IAAI,SAAK;IAErC,sBAAsB;IACM,SAAS,CAAC,EAAE,MAAM,CAAC;IAE/C,sBAAsB;IACM,SAAS,CAAC,EAAE,MAAM,CAAC;IAE/C,kCAAkC;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,uCAAuC;IACvC,IAAI,IAAI,IAAI;IAIZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,MAAM;CAsCP"}

package/dist/components/textarea/textarea.component.js

@@ -0,0 +1,132 @@
+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, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { HasSlotController } from "../../internal/slot.js";
+import styles from "./textarea.styles.js";
+class MzTextarea extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label", "help-text");
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.size = "md";
+    this.label = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.rows = 4;
+  }
+  /** Sets focus on the textarea. */
+  focus(options) {
+    this.textareaEl?.focus(options);
+  }
+  /** Removes focus from the textarea. */
+  blur() {
+    this.textareaEl?.blur();
+  }
+  handleInput() {
+    this.value = this.textareaEl.value;
+    this.emit("mz-input");
+  }
+  handleChange() {
+    this.emit("mz-change");
+  }
+  handleFocus() {
+    this.emit("mz-focus");
+  }
+  handleBlur() {
+    this.emit("mz-blur");
+  }
+  render() {
+    const hasLabel = this.label || this.hasSlotController.test("label");
+    const hasHelpText = this.helpText || this.hasSlotController.test("help-text");
+    return html`
+      <div part="base" class="form-control">
+        ${hasLabel ? html`<label part="label" class="form-control__label" for="control">
+              ${this.label || html`<slot name="label"></slot>`}
+            </label>` : nothing}
+        <textarea
+          id="control"
+          part="control"
+          class="textarea__control"
+          name=${ifDefined(this.name || void 0)}
+          .value=${live(this.value)}
+          placeholder=${ifDefined(this.placeholder || void 0)}
+          rows=${this.rows}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          aria-label=${ifDefined(!hasLabel ? this.placeholder || void 0 : void 0)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        ></textarea>
+        ${hasHelpText ? html`<span part="help-text" class="form-control__help-text">
+              ${this.helpText || html`<slot name="help-text"></slot>`}
+            </span>` : nothing}
+      </div>
+    `;
+  }
+}
+MzTextarea.styles = styles;
+MzTextarea.formAssociated = true;
+__decorateClass([
+  query(".textarea__control")
+], MzTextarea.prototype, "textareaEl", 2);
+__decorateClass([
+  property()
+], MzTextarea.prototype, "name", 2);
+__decorateClass([
+  property()
+], MzTextarea.prototype, "value", 2);
+__decorateClass([
+  property()
+], MzTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzTextarea.prototype, "size", 2);
+__decorateClass([
+  property()
+], MzTextarea.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], MzTextarea.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTextarea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTextarea.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTextarea.prototype, "required", 2);
+__decorateClass([
+  property({ type: Number })
+], MzTextarea.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Number })
+], MzTextarea.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], MzTextarea.prototype, "maxlength", 2);
+export {
+  MzTextarea
+};
+//# sourceMappingURL=textarea.component.js.map