@manzanohq/components 0.1.1 → 0.1.4

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

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

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

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

package/dist/components/toggle/toggle.styles.js

@@ -0,0 +1,86 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var toggle_styles_default = [
+  componentStyles,
+  css`
+    @layer base, sizes, states;
+
+    @layer base {
+      :host {
+        display: inline-block;
+      }
+
+      .toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--mz-space-2xs);
+        border: var(--mz-border-width-sm) solid var(--mz-color-border);
+        border-radius: var(--_toggle-radius, var(--mz-radius-md));
+        background: var(--mz-color-surface);
+        color: var(--mz-color-text-secondary);
+        font-family: var(--mz-font-sans);
+        font-size: var(--_font-size, var(--mz-font-size-sm));
+        font-weight: var(--mz-font-weight-medium);
+        padding: var(--_padding-y, var(--mz-space-xs)) var(--_padding-x, var(--mz-space-sm));
+        cursor: pointer;
+        transition: background var(--mz-transition-fast), border-color var(--mz-transition-fast), color var(--mz-transition-fast);
+        outline: none;
+        user-select: none;
+        line-height: 1;
+      }
+
+      .toggle:focus-visible {
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+    }
+
+    @layer sizes {
+      :host([size='sm']) {
+        --_font-size: var(--mz-font-size-xs);
+        --_padding-y: var(--mz-space-2xs);
+        --_padding-x: var(--mz-space-xs);
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_font-size: var(--mz-font-size-sm);
+        --_padding-y: var(--mz-space-xs);
+        --_padding-x: var(--mz-space-sm);
+      }
+
+      :host([size='lg']) {
+        --_font-size: var(--mz-font-size-md);
+        --_padding-y: var(--mz-space-sm);
+        --_padding-x: var(--mz-space-md);
+      }
+    }
+
+    @layer states {
+      .toggle:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--mz-color-text) 5%, var(--mz-color-surface));
+        border-color: var(--mz-color-border-hover);
+      }
+
+      .toggle--pressed {
+        background: color-mix(in srgb, var(--mz-color-primary) 85%, var(--mz-color-surface));
+        border-color: var(--mz-color-primary);
+        color: var(--mz-color-on-primary, #fff);
+      }
+
+      .toggle--pressed:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--mz-color-primary) 90%, var(--mz-color-surface));
+      }
+
+      .toggle:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  `
+];
+export {
+  toggle_styles_default as default
+};
+//# sourceMappingURL=toggle.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toggle/toggle.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: inline-block;\n      }\n\n      .toggle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: var(--mz-space-2xs);\n        border: var(--mz-border-width-sm) solid var(--mz-color-border);\n        border-radius: var(--_toggle-radius, var(--mz-radius-md));\n        background: var(--mz-color-surface);\n        color: var(--mz-color-text-secondary);\n        font-family: var(--mz-font-sans);\n        font-size: var(--_font-size, var(--mz-font-size-sm));\n        font-weight: var(--mz-font-weight-medium);\n        padding: var(--_padding-y, var(--mz-space-xs)) var(--_padding-x, var(--mz-space-sm));\n        cursor: pointer;\n        transition: background var(--mz-transition-fast), border-color var(--mz-transition-fast), color var(--mz-transition-fast);\n        outline: none;\n        user-select: none;\n        line-height: 1;\n      }\n\n      .toggle:focus-visible {\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-xs);\n        --_padding-y: var(--mz-space-2xs);\n        --_padding-x: var(--mz-space-xs);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_font-size: var(--mz-font-size-sm);\n        --_padding-y: var(--mz-space-xs);\n        --_padding-x: var(--mz-space-sm);\n      }\n\n      :host([size='lg']) {\n        --_font-size: var(--mz-font-size-md);\n        --_padding-y: var(--mz-space-sm);\n        --_padding-x: var(--mz-space-md);\n      }\n    }\n\n    @layer states {\n      .toggle:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--mz-color-text) 5%, var(--mz-color-surface));\n        border-color: var(--mz-color-border-hover);\n      }\n\n      .toggle--pressed {\n        background: color-mix(in srgb, var(--mz-color-primary) 85%, var(--mz-color-surface));\n        border-color: var(--mz-color-primary);\n        color: var(--mz-color-on-primary, #fff);\n      }\n\n      .toggle--pressed:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--mz-color-primary) 90%, var(--mz-color-surface));\n      }\n\n      .toggle:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,wBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EF;",
+  "names": []
+}

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

@@ -0,0 +1,32 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A container that manages toggle selection — single or multiple.
+ *
+ * @tag mz-toggle-group
+ *
+ * @slot - The toggle buttons (mz-toggle elements).
+ *
+ * @csspart base - The toggle group wrapper.
+ *
+ * @event mz-change - Emitted when the selection changes. Detail: `{ value: string | string[] }`.
+ */
+export declare class MzToggleGroup extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The currently selected value(s). String for single mode, string[] for multiple mode. */
+    value: string | string[];
+    /** Allow multiple toggles to be pressed simultaneously. */
+    multiple: boolean;
+    /** The size to apply to child toggles. */
+    size: 'sm' | 'md' | 'lg';
+    /** Disables the entire toggle group. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleToggle;
+    private handleSlotChange;
+    /** Sync size and disabled to child toggles. */
+    private syncChildProps;
+    private getToggles;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=toggle-group.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;;;;;GAUG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,4BAAU;IAEvB,2FAA2F;IAC3D,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAM;IAE9D,2DAA2D;IAC9B,QAAQ,UAAS;IAE9C,0CAA0C;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,wCAAwC;IACI,QAAQ,UAAS;IAE7D,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,YAAY,CA0BlB;IAEF,OAAO,CAAC,gBAAgB;IAIxB,+CAA+C;IAC/C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,UAAU;IAIlB,MAAM;CAOP"}

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

@@ -0,0 +1,93 @@
+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 "./toggle-group.styles.js";
+class MzToggleGroup extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.multiple = false;
+    this.size = "md";
+    this.disabled = false;
+    this.handleToggle = (e) => {
+      e.stopPropagation();
+      const toggleEl = e.target;
+      const toggleValue = toggleEl.value;
+      if (this.multiple) {
+        const current = Array.isArray(this.value) ? [...this.value] : [];
+        if (toggleEl.pressed) {
+          if (!current.includes(toggleValue)) current.push(toggleValue);
+        } else {
+          const idx = current.indexOf(toggleValue);
+          if (idx >= 0) current.splice(idx, 1);
+        }
+        this.value = current;
+      } else {
+        const items = this.getToggles();
+        items.forEach((item) => {
+          if (item !== toggleEl) {
+            item.pressed = false;
+          }
+        });
+        this.value = toggleEl.pressed ? toggleValue : "";
+      }
+      this.emit("mz-change", { detail: { value: this.value } });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mz-toggle", this.handleToggle);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mz-toggle", this.handleToggle);
+  }
+  handleSlotChange() {
+    this.syncChildProps();
+  }
+  /** Sync size and disabled to child toggles. */
+  syncChildProps() {
+    const items = this.getToggles();
+    items.forEach((item) => {
+      if (this.size) item.size = this.size;
+      if (this.disabled) item.disabled = true;
+    });
+  }
+  getToggles() {
+    return [...this.querySelectorAll("mz-toggle")];
+  }
+  render() {
+    return html`
+      <div class="toggle-group" role="group" part="base">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+MzToggleGroup.styles = styles;
+__decorateClass([
+  property({ attribute: false })
+], MzToggleGroup.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MzToggleGroup.prototype, "multiple", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzToggleGroup.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzToggleGroup.prototype, "disabled", 2);
+export {
+  MzToggleGroup
+};
+//# sourceMappingURL=toggle-group.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toggle-group/toggle-group.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport type { MzToggle } from '../toggle/toggle.component.js';\nimport styles from './toggle-group.styles.js';\n\n/**\n * @summary A container that manages toggle selection \u2014 single or multiple.\n *\n * @tag mz-toggle-group\n *\n * @slot - The toggle buttons (mz-toggle elements).\n *\n * @csspart base - The toggle group wrapper.\n *\n * @event mz-change - Emitted when the selection changes. Detail: `{ value: string | string[] }`.\n */\nexport class MzToggleGroup extends ManzanoElement {\n  static styles = styles;\n\n  /** The currently selected value(s). String for single mode, string[] for multiple mode. */\n  @property({ attribute: false }) value: string | string[] = '';\n\n  /** Allow multiple toggles to be pressed simultaneously. */\n  @property({ type: Boolean }) multiple = false;\n\n  /** The size to apply to child toggles. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Disables the entire toggle group. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mz-toggle', this.handleToggle as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('mz-toggle', this.handleToggle as EventListener);\n  }\n\n  private handleToggle = (e: CustomEvent) => {\n    e.stopPropagation();\n    const toggleEl = e.target as MzToggle;\n    const toggleValue = toggleEl.value;\n\n    if (this.multiple) {\n      const current = Array.isArray(this.value) ? [...this.value] : [];\n      if (toggleEl.pressed) {\n        if (!current.includes(toggleValue)) current.push(toggleValue);\n      } else {\n        const idx = current.indexOf(toggleValue);\n        if (idx >= 0) current.splice(idx, 1);\n      }\n      this.value = current;\n    } else {\n      // Single select \u2014 deselect others\n      const items = this.getToggles();\n      items.forEach(item => {\n        if (item !== toggleEl) {\n          item.pressed = false;\n        }\n      });\n      this.value = toggleEl.pressed ? toggleValue : '';\n    }\n\n    this.emit('mz-change', { detail: { value: this.value } });\n  };\n\n  private handleSlotChange() {\n    this.syncChildProps();\n  }\n\n  /** Sync size and disabled to child toggles. */\n  private syncChildProps() {\n    const items = this.getToggles();\n    items.forEach(item => {\n      if (this.size) item.size = this.size;\n      if (this.disabled) item.disabled = true;\n    });\n  }\n\n  private getToggles(): MzToggle[] {\n    return [...this.querySelectorAll('mz-toggle')] as MzToggle[];\n  }\n\n  render() {\n    return html`\n      <div class=\"toggle-group\" role=\"group\" part=\"base\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAE/B,OAAO,YAAY;AAaZ,MAAM,sBAAsB,eAAe;AAAA,EAA3C;AAAA;AAI2B,iBAA2B;AAG9B,oBAAW;AAGX,gBAA2B;AAGZ,oBAAW;AAYvD,SAAQ,eAAe,CAAC,MAAmB;AACzC,QAAE,gBAAgB;AAClB,YAAM,WAAW,EAAE;AACnB,YAAM,cAAc,SAAS;AAE7B,UAAI,KAAK,UAAU;AACjB,cAAM,UAAU,MAAM,QAAQ,KAAK,KAAK,IAAI,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC;AAC/D,YAAI,SAAS,SAAS;AACpB,cAAI,CAAC,QAAQ,SAAS,WAAW,EAAG,SAAQ,KAAK,WAAW;AAAA,QAC9D,OAAO;AACL,gBAAM,MAAM,QAAQ,QAAQ,WAAW;AACvC,cAAI,OAAO,EAAG,SAAQ,OAAO,KAAK,CAAC;AAAA,QACrC;AACA,aAAK,QAAQ;AAAA,MACf,OAAO;AAEL,cAAM,QAAQ,KAAK,WAAW;AAC9B,cAAM,QAAQ,UAAQ;AACpB,cAAI,SAAS,UAAU;AACrB,iBAAK,UAAU;AAAA,UACjB;AAAA,QACF,CAAC;AACD,aAAK,QAAQ,SAAS,UAAU,cAAc;AAAA,MAChD;AAEA,WAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;AAAA,IAC1D;AAAA;AAAA,EApCA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,aAAa,KAAK,YAA6B;AAAA,EACvE;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,aAAa,KAAK,YAA6B;AAAA,EAC1E;AAAA,EA8BQ,mBAAmB;AACzB,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA,EAGQ,iBAAiB;AACvB,UAAM,QAAQ,KAAK,WAAW;AAC9B,UAAM,QAAQ,UAAQ;AACpB,UAAI,KAAK,KAAM,MAAK,OAAO,KAAK;AAChC,UAAI,KAAK,SAAU,MAAK,WAAW;AAAA,IACrC,CAAC;AAAA,EACH;AAAA,EAEQ,aAAyB;AAC/B,WAAO,CAAC,GAAG,KAAK,iBAAiB,WAAW,CAAC;AAAA,EAC/C;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,4BAEiB,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG/C;AACF;AA7Ea,cACJ,SAAS;AAGgB;AAAA,EAA/B,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAJnB,cAIqB;AAGH;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAPhB,cAOkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVhB,cAUkB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAb/B,cAaiC;",
+  "names": []
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var toggle_group_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-flex;
+    }
+
+    .toggle-group {
+      display: inline-flex;
+    }
+
+    /* Collapse borders between toggles */
+    ::slotted(mz-toggle:not(:first-of-type)) {
+      margin-inline-start: calc(-1 * var(--mz-border-width-sm));
+    }
+
+    /* Apply border-radius to first and last items directly */
+    ::slotted(mz-toggle) {
+      --_toggle-radius: 0;
+    }
+
+    ::slotted(mz-toggle:first-of-type) {
+      --_toggle-radius: var(--mz-radius-md) 0 0 var(--mz-radius-md);
+    }
+
+    ::slotted(mz-toggle:last-of-type) {
+      --_toggle-radius: 0 var(--mz-radius-md) var(--mz-radius-md) 0;
+    }
+
+    ::slotted(mz-toggle:only-of-type) {
+      --_toggle-radius: var(--mz-radius-md);
+    }
+  `
+];
+export {
+  toggle_group_styles_default as default
+};
+//# sourceMappingURL=toggle-group.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toggle-group/toggle-group.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-flex;\n    }\n\n    .toggle-group {\n      display: inline-flex;\n    }\n\n    /* Collapse borders between toggles */\n    ::slotted(mz-toggle:not(:first-of-type)) {\n      margin-inline-start: calc(-1 * var(--mz-border-width-sm));\n    }\n\n    /* Apply border-radius to first and last items directly */\n    ::slotted(mz-toggle) {\n      --_toggle-radius: 0;\n    }\n\n    ::slotted(mz-toggle:first-of-type) {\n      --_toggle-radius: var(--mz-radius-md) 0 0 var(--mz-radius-md);\n    }\n\n    ::slotted(mz-toggle:last-of-type) {\n      --_toggle-radius: 0 var(--mz-radius-md) var(--mz-radius-md) 0;\n    }\n\n    ::slotted(mz-toggle:only-of-type) {\n      --_toggle-radius: var(--mz-radius-md);\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,8BAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BF;",
+  "names": []
+}

package/dist/components/tooltip/tooltip.styles.js

@@ -11,7 +11,7 @@ var tooltip_styles_default = [
     .tooltip__body {
       position: absolute;
       z-index: var(--mz-z-tooltip, 1100);
-      background: var(--mz-tooltip-bg, var(--mz-color-gray-900));
+      background: var(--mz-tooltip-bg, var(--mz-color-text));
       color: var(--mz-tooltip-color, var(--mz-color-white, #fff));
       border-radius: var(--mz-radius-sm);
       padding: var(--mz-space-2xs) var(--mz-space-xs);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tooltip/tooltip.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-block;\n      position: relative;\n    }\n\n    .tooltip__body {\n      position: absolute;\n      z-index: var(--mz-z-tooltip, 1100);\n      background: var(--mz-tooltip-bg, var(--mz-color-gray-900));\n      color: var(--mz-tooltip-color, var(--mz-color-white, #fff));\n      border-radius: var(--mz-radius-sm);\n      padding: var(--mz-space-2xs) var(--mz-space-xs);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      line-height: var(--mz-line-height-normal);\n      width: max-content;\n      max-width: 20rem;\n      pointer-events: none;\n    }\n  `\n];\n"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-block;\n      position: relative;\n    }\n\n    .tooltip__body {\n      position: absolute;\n      z-index: var(--mz-z-tooltip, 1100);\n      background: var(--mz-tooltip-bg, var(--mz-color-text));\n      color: var(--mz-tooltip-color, var(--mz-color-white, #fff));\n      border-radius: var(--mz-radius-sm);\n      padding: var(--mz-space-2xs) var(--mz-space-xs);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      line-height: var(--mz-line-height-normal);\n      width: max-content;\n      max-width: 20rem;\n      pointer-events: none;\n    }\n  `\n];\n"],
   "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,yBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBF;",
   "names": []
 }

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

@@ -0,0 +1,21 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @tag mz-tree
+ * @summary A tree view container that displays hierarchical data.
+ *
+ * @slot - Tree item children (`mz-tree-item` elements).
+ *
+ * @event mz-selection-change - Emitted when the selection changes. `event.detail.selection` contains an array of selected `MzTreeItem` elements.
+ *
+ * @csspart base - The tree container.
+ */
+export declare class MzTree extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** Controls how items can be selected. */
+    selection: 'none' | 'single' | 'multiple';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleItemSelect;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=tree.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.component.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;;;;GASG;AACH,qBAAa,MAAO,SAAQ,cAAc;IACxC,MAAM,CAAC,MAAM,0BAAU;IAEvB,0CAA0C;IAC9B,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAU;IAE/D,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,gBAAgB,CAetB;IAEF,MAAM;CAOP"}

package/dist/components/tree/tree.component.js

@@ -0,0 +1,55 @@
+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 "./tree.styles.js";
+class MzTree extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.selection = "none";
+    this.handleItemSelect = (e) => {
+      if (this.selection === "none") return;
+      const item = e.detail.item;
+      if (this.selection === "single") {
+        this.querySelectorAll("mz-tree-item[selected]").forEach((el) => {
+          if (el !== item) el.selected = false;
+        });
+      }
+      this.emit("mz-selection-change", {
+        detail: { selection: [...this.querySelectorAll("mz-tree-item[selected]")] }
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mz-tree-item-select", this.handleItemSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mz-tree-item-select", this.handleItemSelect);
+  }
+  render() {
+    return html`
+      <div class="tree" role="tree" part="base">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+MzTree.styles = styles;
+__decorateClass([
+  property()
+], MzTree.prototype, "selection", 2);
+export {
+  MzTree
+};
+//# sourceMappingURL=tree.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tree/tree.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport type { MzTreeItem } from '../tree-item/tree-item.component.js';\nimport styles from './tree.styles.js';\n\n/**\n * @tag mz-tree\n * @summary A tree view container that displays hierarchical data.\n *\n * @slot - Tree item children (`mz-tree-item` elements).\n *\n * @event mz-selection-change - Emitted when the selection changes. `event.detail.selection` contains an array of selected `MzTreeItem` elements.\n *\n * @csspart base - The tree container.\n */\nexport class MzTree extends ManzanoElement {\n  static styles = styles;\n\n  /** Controls how items can be selected. */\n  @property() selection: 'none' | 'single' | 'multiple' = 'none';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mz-tree-item-select', this.handleItemSelect as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('mz-tree-item-select', this.handleItemSelect as EventListener);\n  }\n\n  private handleItemSelect = (e: CustomEvent) => {\n    if (this.selection === 'none') return;\n\n    const item = e.detail.item as MzTreeItem;\n\n    if (this.selection === 'single') {\n      // Deselect all others\n      this.querySelectorAll('mz-tree-item[selected]').forEach(el => {\n        if (el !== item) (el as MzTreeItem).selected = false;\n      });\n    }\n\n    this.emit('mz-selection-change', {\n      detail: { selection: [...this.querySelectorAll('mz-tree-item[selected]')] }\n    });\n  };\n\n  render() {\n    return html`\n      <div class=\"tree\" role=\"tree\" part=\"base\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAE/B,OAAO,YAAY;AAYZ,MAAM,eAAe,eAAe;AAAA,EAApC;AAAA;AAIO,qBAA4C;AAYxD,SAAQ,mBAAmB,CAAC,MAAmB;AAC7C,UAAI,KAAK,cAAc,OAAQ;AAE/B,YAAM,OAAO,EAAE,OAAO;AAEtB,UAAI,KAAK,cAAc,UAAU;AAE/B,aAAK,iBAAiB,wBAAwB,EAAE,QAAQ,QAAM;AAC5D,cAAI,OAAO,KAAM,CAAC,GAAkB,WAAW;AAAA,QACjD,CAAC;AAAA,MACH;AAEA,WAAK,KAAK,uBAAuB;AAAA,QAC/B,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,iBAAiB,wBAAwB,CAAC,EAAE;AAAA,MAC5E,CAAC;AAAA,IACH;AAAA;AAAA,EAzBA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,uBAAuB,KAAK,gBAAiC;AAAA,EACrF;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,uBAAuB,KAAK,gBAAiC;AAAA,EACxF;AAAA,EAmBA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAxCa,OACJ,SAAS;AAGJ;AAAA,EAAX,SAAS;AAAA,GAJC,OAIC;",
+  "names": []
+}

package/dist/components/tree/tree.d.ts

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

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

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

package/dist/components/tree/tree.js

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

package/dist/components/tree/tree.js.map

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

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

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

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

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

package/dist/components/tree/tree.styles.js

@@ -0,0 +1,20 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var tree_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    font-family: var(--mz-font-sans);
+  }
+
+  .tree {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+`;
+export {
+  tree_styles_default as default
+};
+//# sourceMappingURL=tree.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tree/tree.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n  ${componentStyles}\n\n  :host {\n    display: block;\n    font-family: var(--mz-font-sans);\n  }\n\n  .tree {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,sBAAQ;AAAA,IACX,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/tree-item/tree-item.component.d.ts

@@ -0,0 +1,40 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @tag mz-tree-item
+ * @summary A tree item that can be nested to create hierarchical structures.
+ *
+ * @slot - Nested `mz-tree-item` children.
+ * @slot label - The item label content.
+ * @slot expand-icon - Custom expand/collapse icon.
+ * @slot icon - Item icon displayed before the label.
+ *
+ * @event mz-expand - Emitted when the item expands.
+ * @event mz-collapse - Emitted when the item collapses.
+ *
+ * @csspart row - The clickable row area.
+ * @csspart expand-icon - The expand/collapse icon wrapper.
+ * @csspart icon - The item icon wrapper.
+ * @csspart label - The label wrapper.
+ * @csspart children - The children container.
+ */
+export declare class MzTreeItem extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** Whether children are visible. */
+    expanded: boolean;
+    /** Whether this item is selected. */
+    selected: boolean;
+    /** Whether interaction is disabled. */
+    disabled: boolean;
+    /** Show a loading spinner when expanding (for lazy-loaded children). */
+    lazy: boolean;
+    private hasChildren;
+    private loading;
+    connectedCallback(): void;
+    private checkChildren;
+    private handleSlotChange;
+    private handleToggle;
+    private handleSelect;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=tree-item.component.d.ts.map

package/dist/components/tree-item/tree-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/tree-item/tree-item.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC5C,MAAM,CAAC,MAAM,0BAAU;IAEvB,oCAAoC;IACQ,QAAQ,UAAS;IAE7D,qCAAqC;IACO,QAAQ,UAAS;IAE7D,uCAAuC;IACK,QAAQ,UAAS;IAE7D,wEAAwE;IAC3C,IAAI,UAAS;IAEjC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAS;IAEjC,iBAAiB;IAMjB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,aAAa;IAiCrB,MAAM;CAsDP"}