@manzanohq/components 0.1.1

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

@@ -0,0 +1,26 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary An option for use inside mz-select.
+ *
+ * @tag mz-option
+ *
+ * @slot - The option's label text.
+ *
+ * @csspart base - The option wrapper.
+ */
+export declare class MzOption extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The option's value. */
+    value: string;
+    /** Disables the option. */
+    disabled: boolean;
+    /** Whether this option is currently selected (set by mz-select). */
+    selected: boolean;
+    /** Whether this option is currently highlighted via keyboard (set by mz-select). */
+    current: boolean;
+    /** Returns the text content of this option (for display in trigger). */
+    getTextLabel(): string;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=option.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../src/components/option/option.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;GAQG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IAEvB,0BAA0B;IACd,KAAK,SAAM;IAEvB,2BAA2B;IACiB,QAAQ,UAAS;IAE7D,oEAAoE;IACxB,QAAQ,UAAS;IAE7D,oFAAoF;IACxC,OAAO,UAAS;IAE5D,wEAAwE;IACxE,YAAY,IAAI,MAAM;IAItB,OAAO,CAAC,WAAW;IAKnB,MAAM;CAqBP"}

package/dist/components/option/option.component.js

@@ -0,0 +1,69 @@
+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 { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./option.styles.js";
+class MzOption extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+    this.current = false;
+  }
+  /** Returns the text content of this option (for display in trigger). */
+  getTextLabel() {
+    return (this.textContent ?? "").trim();
+  }
+  handleClick() {
+    if (this.disabled) return;
+    this.emit("mz-option-select", { detail: { value: this.value } });
+  }
+  render() {
+    const classes = {
+      option: true,
+      "option--selected": this.selected,
+      "option--current": this.current,
+      "option--disabled": this.disabled
+    };
+    return html`
+      <div
+        part="base"
+        class=${classMap(classes)}
+        role="option"
+        aria-selected=${this.selected}
+        aria-disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+MzOption.styles = styles;
+__decorateClass([
+  property()
+], MzOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzOption.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzOption.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzOption.prototype, "current", 2);
+export {
+  MzOption
+};
+//# sourceMappingURL=option.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/option/option.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './option.styles.js';\n\n/**\n * @summary An option for use inside mz-select.\n *\n * @tag mz-option\n *\n * @slot - The option's label text.\n *\n * @csspart base - The option wrapper.\n */\nexport class MzOption extends ManzanoElement {\n  static styles = styles;\n\n  /** The option's value. */\n  @property() value = '';\n\n  /** Disables the option. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Whether this option is currently selected (set by mz-select). */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Whether this option is currently highlighted via keyboard (set by mz-select). */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  /** Returns the text content of this option (for display in trigger). */\n  getTextLabel(): string {\n    return (this.textContent ?? '').trim();\n  }\n\n  private handleClick(): void {\n    if (this.disabled) return;\n    this.emit('mz-option-select', { detail: { value: this.value } });\n  }\n\n  render() {\n    const classes = {\n      option: true,\n      'option--selected': this.selected,\n      'option--current': this.current,\n      'option--disabled': this.disabled\n    };\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap(classes)}\n        role=\"option\"\n        aria-selected=${this.selected}\n        aria-disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAWZ,MAAM,iBAAiB,eAAe;AAAA,EAAtC;AAAA;AAIO,iBAAQ;AAGwB,oBAAW;AAGX,oBAAW;AAGX,mBAAU;AAAA;AAAA;AAAA,EAGtD,eAAuB;AACrB,YAAQ,KAAK,eAAe,IAAI,KAAK;AAAA,EACvC;AAAA,EAEQ,cAAoB;AAC1B,QAAI,KAAK,SAAU;AACnB,SAAK,KAAK,oBAAoB,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;AAAA,EACjE;AAAA,EAEA,SAAS;AACP,UAAM,UAAU;AAAA,MACd,QAAQ;AAAA,MACR,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,IAC3B;AAEA,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS,OAAO,CAAC;AAAA;AAAA,wBAET,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,iBACpB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/B;AACF;AA9Ca,SACJ,SAAS;AAGJ;AAAA,EAAX,SAAS;AAAA,GAJC,SAIC;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAP/B,SAOiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAV/B,SAUiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAb/B,SAaiC;",
+  "names": []
+}

package/dist/components/option/option.d.ts

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

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

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

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

package/dist/components/option/option.js.map

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

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

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

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

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

package/dist/components/option/option.styles.js

@@ -0,0 +1,44 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var option_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      padding: var(--mz-space-xs) var(--mz-space-md);
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-md);
+      color: var(--mz-color-text);
+      cursor: pointer;
+      border-radius: var(--mz-radius-sm);
+      transition: background var(--mz-transition-fast);
+    }
+
+    .option:hover:not(.option--disabled) {
+      background: var(--mz-color-surface-hover);
+    }
+
+    .option--current {
+      background: var(--mz-color-surface-hover);
+    }
+
+    .option--selected {
+      font-weight: var(--mz-font-weight-medium);
+      color: var(--mz-color-primary);
+    }
+
+    .option--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `
+];
+export {
+  option_styles_default as default
+};
+//# sourceMappingURL=option.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/option/option.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      padding: var(--mz-space-xs) var(--mz-space-md);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-md);\n      color: var(--mz-color-text);\n      cursor: pointer;\n      border-radius: var(--mz-radius-sm);\n      transition: background var(--mz-transition-fast);\n    }\n\n    .option:hover:not(.option--disabled) {\n      background: var(--mz-color-surface-hover);\n    }\n\n    .option--current {\n      background: var(--mz-color-surface-hover);\n    }\n\n    .option--selected {\n      font-weight: var(--mz-font-weight-medium);\n      color: var(--mz-color-primary);\n    }\n\n    .option--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\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;AAmCF;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import type { Placement } from '@floating-ui/dom';
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A positioned floating panel anchored to a trigger element.
+ *
+ * @tag mz-popover
+ *
+ * @slot - The popover content.
+ * @slot anchor - The trigger element that opens the popover.
+ *
+ * @event mz-show - Emitted when the popover begins to open.
+ * @event mz-hide - Emitted when the popover begins to close.
+ * @event mz-after-show - Emitted after the popover open animation completes.
+ * @event mz-after-hide - Emitted after the popover close animation completes.
+ *
+ * @csspart body - The popover body container.
+ * @csspart arrow - The popover arrow element.
+ */
+export declare class MzPopover extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private bodyEl;
+    private arrowEl;
+    private floatingController;
+    /** Whether the popover is open. */
+    open: boolean;
+    /** Preferred placement relative to the anchor. */
+    placement: Placement;
+    /** Distance from the anchor in pixels. */
+    distance: number;
+    /** Cross-axis offset in pixels. */
+    skidding: number;
+    /** Whether to show an arrow pointing at the anchor. */
+    arrow: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getAnchor;
+    updated(changed: Map<string, unknown>): Promise<void>;
+    private animateShow;
+    private animateHide;
+    /** Toggle open state */
+    toggle(): void;
+    /** Programmatically show the popover */
+    show(): void;
+    /** Programmatically hide the popover */
+    hide(): void;
+    private handleAnchorClick;
+    private handleOutsideClick;
+    private addOutsideClickListener;
+    private removeOutsideClickListener;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=popover.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.component.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAKnE;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,SAAU,SAAQ,cAAc;IAC3C,MAAM,CAAC,MAAM,4BAAU;IAEE,OAAO,CAAC,MAAM,CAAkB;IAC/B,OAAO,CAAC,OAAO,CAAkB;IAE3D,OAAO,CAAC,kBAAkB,CAAsB;IAEhD,mCAAmC;IACS,IAAI,UAAS;IAEzD,kDAAkD;IACtC,SAAS,EAAE,SAAS,CAAkB;IAElD,0CAA0C;IACd,QAAQ,SAAK;IAEzC,mCAAmC;IACP,QAAQ,SAAK;IAEzC,uDAAuD;IAC1B,KAAK,UAAS;IAE3C,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,SAAS;IAMX,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;YAqB7C,WAAW;YAUX,WAAW;IAUzB,wBAAwB;IACxB,MAAM,IAAI,IAAI;IAId,wCAAwC;IACxC,IAAI,IAAI,IAAI;IAIZ,wCAAwC;IACxC,IAAI,IAAI,IAAI;IAIZ,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,aAAa;IAOrB,MAAM;CAeP"}

package/dist/components/popover/popover.component.js

@@ -0,0 +1,157 @@
+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 { ManzanoElement } from "../../internal/manzano-element.js";
+import { FloatingController } from "../../internal/floating.js";
+import { animateTo } from "../../utilities/animation-registry.js";
+import styles from "./popover.styles.js";
+class MzPopover extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.placement = "bottom-start";
+    this.distance = 8;
+    this.skidding = 0;
+    this.arrow = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.floatingController = new FloatingController(this, {
+      referenceEl: () => this.getAnchor(),
+      floatingEl: () => this.bodyEl,
+      arrowEl: () => this.arrow ? this.arrowEl : null,
+      placement: this.placement,
+      distance: this.distance,
+      skidding: this.skidding
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOutsideClickListener();
+  }
+  getAnchor() {
+    const slot = this.shadowRoot?.querySelector('slot[name="anchor"]');
+    const assigned = slot?.assignedElements({ flatten: true }) ?? [];
+    return assigned[0] ?? null;
+  }
+  async updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) {
+        await this.animateShow();
+      } else if (changed.get("open") === true) {
+        await this.animateHide();
+      }
+    }
+    if (changed.has("placement") || changed.has("distance") || changed.has("skidding")) {
+      this.floatingController = new FloatingController(this, {
+        referenceEl: () => this.getAnchor(),
+        floatingEl: () => this.bodyEl,
+        arrowEl: () => this.arrow ? this.arrowEl : null,
+        placement: this.placement,
+        distance: this.distance,
+        skidding: this.skidding
+      });
+    }
+  }
+  async animateShow() {
+    this.emit("mz-show");
+    this.bodyEl.style.display = "block";
+    await this.floatingController.show();
+    const anim = animateTo(this.bodyEl, "dropdown.show", this.prefersReducedMotion);
+    await anim.finished;
+    this.addOutsideClickListener();
+    this.emit("mz-after-show");
+  }
+  async animateHide() {
+    this.emit("mz-hide");
+    this.removeOutsideClickListener();
+    const anim = animateTo(this.bodyEl, "dropdown.hide", this.prefersReducedMotion);
+    await anim.finished;
+    this.bodyEl.style.display = "none";
+    this.floatingController.hide();
+    this.emit("mz-after-hide");
+  }
+  /** Toggle open state */
+  toggle() {
+    this.open = !this.open;
+  }
+  /** Programmatically show the popover */
+  show() {
+    this.open = true;
+  }
+  /** Programmatically hide the popover */
+  hide() {
+    this.open = false;
+  }
+  handleAnchorClick() {
+    this.toggle();
+  }
+  handleOutsideClick(e) {
+    if (!this.contains(e.target)) {
+      this.hide();
+    }
+  }
+  addOutsideClickListener() {
+    document.addEventListener("click", this.handleOutsideClick, true);
+  }
+  removeOutsideClickListener() {
+    document.removeEventListener("click", this.handleOutsideClick, true);
+  }
+  handleKeyDown(e) {
+    if (e.key === "Escape" && this.open) {
+      e.stopPropagation();
+      this.hide();
+    }
+  }
+  render() {
+    return html`
+      <slot name="anchor" @click=${this.handleAnchorClick}></slot>
+      <div
+        part="body"
+        class="popover__body"
+        role="tooltip"
+        @keydown=${this.handleKeyDown}
+        style="display: ${this.open ? "block" : "none"}"
+      >
+        <slot></slot>
+        ${this.arrow ? html`<div part="arrow" class="popover__arrow"></div>` : nothing}
+      </div>
+    `;
+  }
+}
+MzPopover.styles = styles;
+__decorateClass([
+  query(".popover__body")
+], MzPopover.prototype, "bodyEl", 2);
+__decorateClass([
+  query(".popover__arrow")
+], MzPopover.prototype, "arrowEl", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzPopover.prototype, "open", 2);
+__decorateClass([
+  property()
+], MzPopover.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Number })
+], MzPopover.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], MzPopover.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MzPopover.prototype, "arrow", 2);
+export {
+  MzPopover
+};
+//# sourceMappingURL=popover.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/popover/popover.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { FloatingController } from '../../internal/floating.js';\nimport { animateTo } from '../../utilities/animation-registry.js';\nimport styles from './popover.styles.js';\n\n/**\n * @summary A positioned floating panel anchored to a trigger element.\n *\n * @tag mz-popover\n *\n * @slot - The popover content.\n * @slot anchor - The trigger element that opens the popover.\n *\n * @event mz-show - Emitted when the popover begins to open.\n * @event mz-hide - Emitted when the popover begins to close.\n * @event mz-after-show - Emitted after the popover open animation completes.\n * @event mz-after-hide - Emitted after the popover close animation completes.\n *\n * @csspart body - The popover body container.\n * @csspart arrow - The popover arrow element.\n */\nexport class MzPopover extends ManzanoElement {\n  static styles = styles;\n\n  @query('.popover__body') private bodyEl!: HTMLDivElement;\n  @query('.popover__arrow') private arrowEl!: HTMLDivElement;\n\n  private floatingController!: FloatingController;\n\n  /** Whether the popover is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Preferred placement relative to the anchor. */\n  @property() placement: Placement = 'bottom-start';\n\n  /** Distance from the anchor in pixels. */\n  @property({ type: Number }) distance = 8;\n\n  /** Cross-axis offset in pixels. */\n  @property({ type: Number }) skidding = 0;\n\n  /** Whether to show an arrow pointing at the anchor. */\n  @property({ type: Boolean }) arrow = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleOutsideClick = this.handleOutsideClick.bind(this);\n    this.floatingController = new FloatingController(this, {\n      referenceEl: () => this.getAnchor(),\n      floatingEl: () => this.bodyEl,\n      arrowEl: () => (this.arrow ? this.arrowEl : null),\n      placement: this.placement as Placement,\n      distance: this.distance,\n      skidding: this.skidding\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeOutsideClickListener();\n  }\n\n  private getAnchor(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"anchor\"]');\n    const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n    return (assigned[0] as HTMLElement) ?? null;\n  }\n\n  async updated(changed: Map<string, unknown>): Promise<void> {\n    if (changed.has('open')) {\n      if (this.open) {\n        await this.animateShow();\n      } else if (changed.get('open') === true) {\n        await this.animateHide();\n      }\n    }\n\n    if (changed.has('placement') || changed.has('distance') || changed.has('skidding')) {\n      this.floatingController = new FloatingController(this, {\n        referenceEl: () => this.getAnchor(),\n        floatingEl: () => this.bodyEl,\n        arrowEl: () => (this.arrow ? this.arrowEl : null),\n        placement: this.placement as Placement,\n        distance: this.distance,\n        skidding: this.skidding\n      });\n    }\n  }\n\n  private async animateShow(): Promise<void> {\n    this.emit('mz-show');\n    this.bodyEl.style.display = 'block';\n    await this.floatingController.show();\n    const anim = animateTo(this.bodyEl, 'dropdown.show', this.prefersReducedMotion);\n    await anim.finished;\n    this.addOutsideClickListener();\n    this.emit('mz-after-show');\n  }\n\n  private async animateHide(): Promise<void> {\n    this.emit('mz-hide');\n    this.removeOutsideClickListener();\n    const anim = animateTo(this.bodyEl, 'dropdown.hide', this.prefersReducedMotion);\n    await anim.finished;\n    this.bodyEl.style.display = 'none';\n    this.floatingController.hide();\n    this.emit('mz-after-hide');\n  }\n\n  /** Toggle open state */\n  toggle(): void {\n    this.open = !this.open;\n  }\n\n  /** Programmatically show the popover */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Programmatically hide the popover */\n  hide(): void {\n    this.open = false;\n  }\n\n  private handleAnchorClick(): void {\n    this.toggle();\n  }\n\n  private handleOutsideClick(e: MouseEvent): void {\n    if (!this.contains(e.target as Node)) {\n      this.hide();\n    }\n  }\n\n  private addOutsideClickListener(): void {\n    document.addEventListener('click', this.handleOutsideClick, true);\n  }\n\n  private removeOutsideClickListener(): void {\n    document.removeEventListener('click', this.handleOutsideClick, true);\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this.hide();\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @click=${this.handleAnchorClick}></slot>\n      <div\n        part=\"body\"\n        class=\"popover__body\"\n        role=\"tooltip\"\n        @keydown=${this.handleKeyDown}\n        style=\"display: ${this.open ? 'block' : 'none'}\"\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\" class=\"popover__arrow\"></div>` : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/popover/popover.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,cAAc,wBAAwB,CAAC;AAIvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/popover/popover.js

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

package/dist/components/popover/popover.js.map

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

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

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

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

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

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,38 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var popover_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .popover__body {
+      position: absolute;
+      z-index: var(--mz-z-dropdown, 1000);
+      background: var(--mz-color-surface-overlay, var(--mz-color-surface));
+      border: var(--mz-border-width-sm) solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md);
+      box-shadow: var(--mz-shadow-lg);
+      padding: var(--mz-space-md);
+      width: max-content;
+      max-width: 24rem;
+    }
+
+    .popover__arrow {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: var(--mz-color-surface-overlay, var(--mz-color-surface));
+      border: var(--mz-border-width-sm) solid var(--mz-color-border);
+      /* Default: points up (for bottom placement). FloatingController rotates via inline style. */
+      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+      border: none;
+    }
+  `
+];
+export {
+  popover_styles_default as default
+};
+//# sourceMappingURL=popover.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/popover/popover.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    .popover__body {\n      position: absolute;\n      z-index: var(--mz-z-dropdown, 1000);\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      border: var(--mz-border-width-sm) solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md);\n      box-shadow: var(--mz-shadow-lg);\n      padding: var(--mz-space-md);\n      width: max-content;\n      max-width: 24rem;\n    }\n\n    .popover__arrow {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      border: var(--mz-border-width-sm) solid var(--mz-color-border);\n      /* Default: points up (for bottom placement). FloatingController rotates via inline style. */\n      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n      border: 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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BF;",
+  "names": []
+}

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

@@ -0,0 +1,26 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A horizontal progress bar.
+ *
+ * @tag mz-progress
+ *
+ * @csspart base - The progress bar wrapper.
+ * @csspart indicator - The filled indicator.
+ *
+ * @cssproperty --mz-progress-height - Override the bar height.
+ * @cssproperty --mz-progress-indicator-color - Override the indicator color.
+ * @cssproperty --mz-progress-track-color - Override the track color.
+ */
+export declare class MzProgress extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The progress value (0 to max). */
+    value: number;
+    /** The maximum value. */
+    max: number;
+    /** An accessible label for the progress bar. */
+    label: string;
+    /** Whether the progress is indeterminate (unknown completion). */
+    indeterminate: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=progress.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.component.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;GAWG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC5C,MAAM,CAAC,MAAM,4BAAU;IAEvB,qCAAqC;IACT,KAAK,SAAK;IAEtC,yBAAyB;IACG,GAAG,SAAO;IAEtC,gDAAgD;IACpC,KAAK,SAAM;IAEvB,kEAAkE;IACtB,aAAa,UAAS;IAElE,MAAM;CA0BP"}

package/dist/components/progress/progress.component.js

@@ -0,0 +1,66 @@
+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 { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./progress.styles.js";
+class MzProgress extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.max = 100;
+    this.label = "";
+    this.indeterminate = false;
+  }
+  render() {
+    const percentage = Math.min(Math.max(this.value / this.max * 100, 0), 100);
+    const classes = {
+      progress: true,
+      "progress--indeterminate": this.indeterminate
+    };
+    return html`
+      <div
+        part="base"
+        class=${classMap(classes)}
+        role="progressbar"
+        aria-label=${this.label || nothing}
+        aria-valuenow=${this.indeterminate ? nothing : this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+      >
+        <div
+          part="indicator"
+          class="progress__indicator"
+          style=${this.indeterminate ? nothing : styleMap({ width: `${percentage}%` })}
+        ></div>
+      </div>
+    `;
+  }
+}
+MzProgress.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzProgress.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], MzProgress.prototype, "max", 2);
+__decorateClass([
+  property()
+], MzProgress.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzProgress.prototype, "indeterminate", 2);
+export {
+  MzProgress
+};
+//# sourceMappingURL=progress.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/progress/progress.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './progress.styles.js';\n\n/**\n * @summary A horizontal progress bar.\n *\n * @tag mz-progress\n *\n * @csspart base - The progress bar wrapper.\n * @csspart indicator - The filled indicator.\n *\n * @cssproperty --mz-progress-height - Override the bar height.\n * @cssproperty --mz-progress-indicator-color - Override the indicator color.\n * @cssproperty --mz-progress-track-color - Override the track color.\n */\nexport class MzProgress extends ManzanoElement {\n  static styles = styles;\n\n  /** The progress value (0 to max). */\n  @property({ type: Number }) value = 0;\n\n  /** The maximum value. */\n  @property({ type: Number }) max = 100;\n\n  /** An accessible label for the progress bar. */\n  @property() label = '';\n\n  /** Whether the progress is indeterminate (unknown completion). */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  render() {\n    const percentage = Math.min(Math.max((this.value / this.max) * 100, 0), 100);\n\n    const classes = {\n      progress: true,\n      'progress--indeterminate': this.indeterminate\n    };\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap(classes)}\n        role=\"progressbar\"\n        aria-label=${this.label || nothing}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress__indicator\"\n          style=${this.indeterminate ? nothing : styleMap({ width: `${percentage}%` })}\n        ></div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAcZ,MAAM,mBAAmB,eAAe;AAAA,EAAxC;AAAA;AAIuB,iBAAQ;AAGR,eAAM;AAGtB,iBAAQ;AAGwB,yBAAgB;AAAA;AAAA,EAE5D,SAAS;AACP,UAAM,aAAa,KAAK,IAAI,KAAK,IAAK,KAAK,QAAQ,KAAK,MAAO,KAAK,CAAC,GAAG,GAAG;AAE3E,UAAM,UAAU;AAAA,MACd,UAAU;AAAA,MACV,2BAA2B,KAAK;AAAA,IAClC;AAEA,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS,OAAO,CAAC;AAAA;AAAA,qBAEZ,KAAK,SAAS,OAAO;AAAA,wBAClB,KAAK,gBAAgB,UAAU,KAAK,KAAK;AAAA;AAAA,wBAEzC,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKd,KAAK,gBAAgB,UAAU,SAAS,EAAE,OAAO,GAAG,UAAU,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIpF;AACF;AAzCa,WACJ,SAAS;AAGY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJf,WAIiB;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPf,WAOiB;AAGhB;AAAA,EAAX,SAAS;AAAA,GAVC,WAUC;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAb/B,WAaiC;",
+  "names": []
+}

package/dist/components/progress/progress.d.ts

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