@manzanohq/components 0.1.1 → 0.1.4

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/number-input/number-input.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './number-input.styles.js';\n\n/**\n * @tag mz-number-input\n * @summary A numeric input with increment/decrement stepper buttons.\n *\n * @event mz-change - Emitted when the value changes (on blur, Enter, or stepper click).\n * @event mz-input - Emitted on each keystroke/input.\n *\n * @csspart base - The component wrapper.\n * @csspart input - The native input element.\n * @csspart decrement - The decrement button.\n * @csspart increment - The increment button.\n */\nexport class MzNumberInput extends ManzanoElement {\n  static override styles = [componentStyles, styles];\n\n  /** Current numeric value. `null` when empty. */\n  @property({ attribute: false }) value: number | null = null;\n\n  /** Minimum allowed value. */\n  @property({ type: Number, reflect: true }) min: number | undefined;\n\n  /** Maximum allowed value. */\n  @property({ type: Number, reflect: true }) max: number | undefined;\n\n  /** Step increment. */\n  @property({ type: Number, reflect: true }) step = 1;\n\n  /** Placeholder text shown when the input is empty. */\n  @property() placeholder = '';\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the input read-only. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controls the size of the input. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Form field name. */\n  @property() name = '';\n\n  /** Hides the stepper buttons. */\n  @property({ type: Boolean, reflect: true, attribute: 'no-stepper' }) noStepper = false;\n\n  @query('input') private inputEl!: HTMLInputElement;\n\n  /** Increase the value by one step, clamped to max. */\n  increment() {\n    const current = this.value ?? 0;\n    let next = current + this.step;\n    // Fix floating point\n    next = parseFloat(next.toFixed(10));\n    if (this.max != null) next = Math.min(next, this.max);\n    this.value = next;\n    this.emit('mz-change');\n    this.emit('mz-input');\n  }\n\n  /** Decrease the value by one step, clamped to min. */\n  decrement() {\n    const current = this.value ?? 0;\n    let next = current - this.step;\n    // Fix floating point\n    next = parseFloat(next.toFixed(10));\n    if (this.min != null) next = Math.max(next, this.min);\n    this.value = next;\n    this.emit('mz-change');\n    this.emit('mz-input');\n  }\n\n  /** Delegates focus to the inner input. */\n  override focus(options?: FocusOptions) {\n    this.inputEl?.focus(options);\n  }\n\n  /** Delegates blur to the inner input. */\n  override blur() {\n    this.inputEl?.blur();\n  }\n\n  private handleInput(e: Event) {\n    const raw = (e.target as HTMLInputElement).value;\n    if (raw === '' || raw === '-') {\n      this.value = null;\n    } else {\n      const parsed = parseFloat(raw);\n      if (!Number.isNaN(parsed)) {\n        this.value = parsed;\n      }\n    }\n    this.emit('mz-input');\n  }\n\n  private handleChange() {\n    this.clampValue();\n    this.emit('mz-change');\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.increment();\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.decrement();\n    } else if (e.key === 'Enter') {\n      this.clampValue();\n      this.emit('mz-change');\n    }\n  }\n\n  private clampValue() {\n    if (this.value == null) return;\n    if (this.min != null && this.value < this.min) this.value = this.min;\n    if (this.max != null && this.value > this.max) this.value = this.max;\n  }\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'number-input': true,\n          'number-input--small': this.size === 'small',\n          'number-input--medium': this.size === 'medium',\n          'number-input--large': this.size === 'large',\n          'number-input--disabled': this.disabled,\n          'number-input--no-stepper': this.noStepper\n        })}\n      >\n        <input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          .value=${this.value != null ? String(this.value) : ''}\n          placeholder=${this.placeholder || nothing}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n        />\n        ${!this.noStepper\n          ? html`\n              <div class=\"number-input__steppers\">\n                <button\n                  part=\"increment\"\n                  class=\"number-input__button number-input__button--increment\"\n                  type=\"button\"\n                  tabindex=\"-1\"\n                  aria-label=\"Increase\"\n                  ?disabled=${this.disabled || this.readonly || (this.max != null && this.value != null && this.value >= this.max)}\n                  @click=${this.increment}\n                >\n                  <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path d=\"M4 10l4-4 4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/></svg>\n                </button>\n                <button\n                  part=\"decrement\"\n                  class=\"number-input__button number-input__button--decrement\"\n                  type=\"button\"\n                  tabindex=\"-1\"\n                  aria-label=\"Decrease\"\n                  ?disabled=${this.disabled || this.readonly || (this.min != null && this.value != null && this.value <= this.min)}\n                  @click=${this.decrement}\n                >\n                  <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/></svg>\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,121 @@
+import { css } from "lit";
+var number_input_styles_default = css`
+  :host {
+    display: inline-block;
+  }
+
+  .number-input {
+    display: inline-flex;
+    align-items: stretch;
+    border: 1px solid var(--mz-color-border);
+    border-radius: var(--mz-radius-md, 0.5rem);
+    background: var(--mz-color-surface, #fff);
+    overflow: hidden;
+    font-family: var(--mz-font-sans);
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+
+  .number-input:focus-within {
+    border-color: var(--mz-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 20%, transparent);
+  }
+
+  .number-input--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  input {
+    flex: 1;
+    min-width: 0;
+    width: 4rem;
+    border: none;
+    background: transparent;
+    text-align: left;
+    font-family: inherit;
+    font-size: var(--mz-font-size-base);
+    color: var(--mz-color-text);
+    padding: var(--mz-space-sm) var(--mz-space-sm);
+    outline: none;
+  }
+
+  input::placeholder {
+    color: var(--mz-color-text-disabled);
+  }
+
+  :host([size='small']) input {
+    font-size: var(--mz-font-size-sm);
+    padding: var(--mz-space-xs) var(--mz-space-xs);
+  }
+
+  :host([size='large']) input {
+    font-size: var(--mz-font-size-lg);
+    padding: var(--mz-space-md) var(--mz-space-sm);
+  }
+
+  /* Stepper column — both buttons stacked on the right */
+  .number-input__steppers {
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid var(--mz-color-border);
+  }
+
+  .number-input__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: var(--mz-color-surface-raised);
+    color: var(--mz-color-text);
+    cursor: pointer;
+    padding: 0 var(--mz-space-sm);
+    flex: 1;
+    transition: background 0.15s;
+  }
+
+  .number-input__button:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--mz-color-text) 10%, var(--mz-color-surface));
+  }
+
+  .number-input__button:active:not(:disabled) {
+    background: color-mix(in srgb, var(--mz-color-text) 18%, var(--mz-color-surface));
+  }
+
+  .number-input__button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .number-input__button--increment {
+    border-bottom: 1px solid var(--mz-color-border);
+  }
+
+  .number-input__button svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Size: small */
+  :host([size='small']) .number-input__button {
+    padding: 0 var(--mz-space-xs);
+  }
+
+  :host([size='small']) .number-input__button svg {
+    width: 10px;
+    height: 10px;
+  }
+
+  /* Size: large */
+  :host([size='large']) .number-input__button {
+    padding: 0 var(--mz-space-md);
+  }
+
+  :host([size='large']) .number-input__button svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+export {
+  number_input_styles_default as default
+};
+//# sourceMappingURL=number-input.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/number-input/number-input.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: inline-block;\n  }\n\n  .number-input {\n    display: inline-flex;\n    align-items: stretch;\n    border: 1px solid var(--mz-color-border);\n    border-radius: var(--mz-radius-md, 0.5rem);\n    background: var(--mz-color-surface, #fff);\n    overflow: hidden;\n    font-family: var(--mz-font-sans);\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n\n  .number-input:focus-within {\n    border-color: var(--mz-color-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 20%, transparent);\n  }\n\n  .number-input--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  input {\n    flex: 1;\n    min-width: 0;\n    width: 4rem;\n    border: none;\n    background: transparent;\n    text-align: left;\n    font-family: inherit;\n    font-size: var(--mz-font-size-base);\n    color: var(--mz-color-text);\n    padding: var(--mz-space-sm) var(--mz-space-sm);\n    outline: none;\n  }\n\n  input::placeholder {\n    color: var(--mz-color-text-disabled);\n  }\n\n  :host([size='small']) input {\n    font-size: var(--mz-font-size-sm);\n    padding: var(--mz-space-xs) var(--mz-space-xs);\n  }\n\n  :host([size='large']) input {\n    font-size: var(--mz-font-size-lg);\n    padding: var(--mz-space-md) var(--mz-space-sm);\n  }\n\n  /* Stepper column \u2014 both buttons stacked on the right */\n  .number-input__steppers {\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid var(--mz-color-border);\n  }\n\n  .number-input__button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mz-color-surface-raised);\n    color: var(--mz-color-text);\n    cursor: pointer;\n    padding: 0 var(--mz-space-sm);\n    flex: 1;\n    transition: background 0.15s;\n  }\n\n  .number-input__button:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mz-color-text) 10%, var(--mz-color-surface));\n  }\n\n  .number-input__button:active:not(:disabled) {\n    background: color-mix(in srgb, var(--mz-color-text) 18%, var(--mz-color-surface));\n  }\n\n  .number-input__button:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  .number-input__button--increment {\n    border-bottom: 1px solid var(--mz-color-border);\n  }\n\n  .number-input__button svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  /* Size: small */\n  :host([size='small']) .number-input__button {\n    padding: 0 var(--mz-space-xs);\n  }\n\n  :host([size='small']) .number-input__button svg {\n    width: 10px;\n    height: 10px;\n  }\n\n  /* Size: large */\n  :host([size='large']) .number-input__button {\n    padding: 0 var(--mz-space-md);\n  }\n\n  :host([size='large']) .number-input__button svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,33 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @tag mz-pagination
+ * @summary A pagination component that displays page navigation controls.
+ *
+ * @event mz-change - Emitted when the page changes. Detail: `{ page: number }`
+ *
+ * @csspart base - The `<nav>` wrapper element.
+ * @csspart prev-button - The previous page button.
+ * @csspart next-button - The next page button.
+ * @csspart page-button - Each page number button.
+ * @csspart ellipsis - Each ellipsis separator.
+ */
+export declare class MzPagination extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** Total number of items. */
+    total: number;
+    /** Current page (1-based). */
+    page: number;
+    /** Number of items per page. */
+    pageSize: number;
+    /** Number of page buttons to show on each side of the current page. */
+    siblingCount: number;
+    /** Disables all pagination controls. */
+    disabled: boolean;
+    /** Computed total number of pages. */
+    get totalPages(): number;
+    /** Generate the page numbers to display, with ellipsis markers. */
+    private getPageRange;
+    private goToPage;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=pagination.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.component.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;GAWG;AACH,qBAAa,YAAa,SAAQ,cAAc;IAC9C,MAAM,CAAC,MAAM,0BAAU;IAEvB,6BAA6B;IACD,KAAK,SAAK;IAEtC,8BAA8B;IACa,IAAI,SAAK;IAEpD,gCAAgC;IACoB,QAAQ,SAAM;IAElE,uEAAuE;IACf,YAAY,SAAK;IAEzE,wCAAwC;IACI,QAAQ,UAAS;IAE7D,sCAAsC;IACtC,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAsDpB,OAAO,CAAC,QAAQ;IAQhB,MAAM;CAkDP"}

package/dist/components/pagination/pagination.component.js

@@ -0,0 +1,144 @@
+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 { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./pagination.styles.js";
+class MzPagination extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.total = 0;
+    this.page = 1;
+    this.pageSize = 10;
+    this.siblingCount = 1;
+    this.disabled = false;
+  }
+  /** Computed total number of pages. */
+  get totalPages() {
+    return Math.max(1, Math.ceil(this.total / this.pageSize));
+  }
+  /** Generate the page numbers to display, with ellipsis markers. */
+  getPageRange() {
+    const totalPages = this.totalPages;
+    const current = this.page;
+    const siblings = this.siblingCount;
+    const totalSlots = siblings * 2 + 5;
+    if (totalPages <= totalSlots) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSibling = Math.max(current - siblings, 1);
+    const rightSibling = Math.min(current + siblings, totalPages);
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < totalPages - 1;
+    const range = [];
+    range.push(1);
+    if (showLeftEllipsis) {
+      range.push("ellipsis");
+    } else {
+      for (let i = 2; i < leftSibling; i++) {
+        range.push(i);
+      }
+    }
+    for (let i = leftSibling; i <= rightSibling; i++) {
+      if (i !== 1 && i !== totalPages) {
+        range.push(i);
+      }
+    }
+    if (showRightEllipsis) {
+      range.push("ellipsis");
+    } else {
+      for (let i = rightSibling + 1; i < totalPages; i++) {
+        range.push(i);
+      }
+    }
+    if (totalPages > 1) {
+      range.push(totalPages);
+    }
+    return range;
+  }
+  goToPage(p) {
+    if (this.disabled) return;
+    const clamped = Math.max(1, Math.min(p, this.totalPages));
+    if (clamped === this.page) return;
+    this.page = clamped;
+    this.emit("mz-change", { detail: { page: this.page } });
+  }
+  render() {
+    const pages = this.getPageRange();
+    const isFirst = this.page <= 1;
+    const isLast = this.page >= this.totalPages;
+    return html`
+      <nav aria-label="Pagination" class="pagination" part="base">
+        <button
+          class="pagination__button pagination__button--prev"
+          part="prev-button"
+          aria-label="Previous page"
+          ?disabled=${isFirst || this.disabled}
+          @click=${() => this.goToPage(this.page - 1)}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+        </button>
+
+        ${pages.map((p, index) => {
+      if (p === "ellipsis") {
+        return html`<span class="pagination__ellipsis" part="ellipsis" aria-hidden="true" key="ellipsis-${index}">&hellip;</span>`;
+      }
+      const isCurrent = p === this.page;
+      return html`
+            <button
+              class=${classMap({
+        "pagination__button": true,
+        "pagination__button--page": true,
+        "pagination__button--current": isCurrent
+      })}
+              part="page-button"
+              aria-label="Page ${p}"
+              aria-current=${isCurrent ? "page" : nothing}
+              ?disabled=${this.disabled}
+              @click=${() => this.goToPage(p)}
+            >${p}</button>
+          `;
+    })}
+
+        <button
+          class="pagination__button pagination__button--next"
+          part="next-button"
+          aria-label="Next page"
+          ?disabled=${isLast || this.disabled}
+          @click=${() => this.goToPage(this.page + 1)}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+        </button>
+      </nav>
+    `;
+  }
+}
+MzPagination.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzPagination.prototype, "total", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], MzPagination.prototype, "page", 2);
+__decorateClass([
+  property({ type: Number, attribute: "page-size" })
+], MzPagination.prototype, "pageSize", 2);
+__decorateClass([
+  property({ type: Number, attribute: "sibling-count" })
+], MzPagination.prototype, "siblingCount", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzPagination.prototype, "disabled", 2);
+export {
+  MzPagination
+};
+//# sourceMappingURL=pagination.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/pagination/pagination.component.ts"],
+  "sourcesContent": ["import { html, nothing } 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 './pagination.styles.js';\n\n/**\n * @tag mz-pagination\n * @summary A pagination component that displays page navigation controls.\n *\n * @event mz-change - Emitted when the page changes. Detail: `{ page: number }`\n *\n * @csspart base - The `<nav>` wrapper element.\n * @csspart prev-button - The previous page button.\n * @csspart next-button - The next page button.\n * @csspart page-button - Each page number button.\n * @csspart ellipsis - Each ellipsis separator.\n */\nexport class MzPagination extends ManzanoElement {\n  static styles = styles;\n\n  /** Total number of items. */\n  @property({ type: Number }) total = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number, reflect: true }) page = 1;\n\n  /** Number of items per page. */\n  @property({ type: Number, attribute: 'page-size' }) pageSize = 10;\n\n  /** Number of page buttons to show on each side of the current page. */\n  @property({ type: Number, attribute: 'sibling-count' }) siblingCount = 1;\n\n  /** Disables all pagination controls. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Computed total number of pages. */\n  get totalPages(): number {\n    return Math.max(1, Math.ceil(this.total / this.pageSize));\n  }\n\n  /** Generate the page numbers to display, with ellipsis markers. */\n  private getPageRange(): (number | 'ellipsis')[] {\n    const totalPages = this.totalPages;\n    const current = this.page;\n    const siblings = this.siblingCount;\n\n    // If total pages is small enough, show all\n    const totalSlots = siblings * 2 + 5; // siblings each side + current + 2 boundaries + 2 ellipsis\n    if (totalPages <= totalSlots) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n\n    const leftSibling = Math.max(current - siblings, 1);\n    const rightSibling = Math.min(current + siblings, totalPages);\n\n    const showLeftEllipsis = leftSibling > 2;\n    const showRightEllipsis = rightSibling < totalPages - 1;\n\n    const range: (number | 'ellipsis')[] = [];\n\n    // Always show first page\n    range.push(1);\n\n    if (showLeftEllipsis) {\n      range.push('ellipsis');\n    } else {\n      // Fill in pages 2 through leftSibling-1\n      for (let i = 2; i < leftSibling; i++) {\n        range.push(i);\n      }\n    }\n\n    // Sibling range (excluding boundaries)\n    for (let i = leftSibling; i <= rightSibling; i++) {\n      if (i !== 1 && i !== totalPages) {\n        range.push(i);\n      }\n    }\n\n    if (showRightEllipsis) {\n      range.push('ellipsis');\n    } else {\n      for (let i = rightSibling + 1; i < totalPages; i++) {\n        range.push(i);\n      }\n    }\n\n    // Always show last page\n    if (totalPages > 1) {\n      range.push(totalPages);\n    }\n\n    return range;\n  }\n\n  private goToPage(p: number) {\n    if (this.disabled) return;\n    const clamped = Math.max(1, Math.min(p, this.totalPages));\n    if (clamped === this.page) return;\n    this.page = clamped;\n    this.emit('mz-change', { detail: { page: this.page } });\n  }\n\n  render() {\n    const pages = this.getPageRange();\n    const isFirst = this.page <= 1;\n    const isLast = this.page >= this.totalPages;\n\n    return html`\n      <nav aria-label=\"Pagination\" class=\"pagination\" part=\"base\">\n        <button\n          class=\"pagination__button pagination__button--prev\"\n          part=\"prev-button\"\n          aria-label=\"Previous page\"\n          ?disabled=${isFirst || this.disabled}\n          @click=${() => this.goToPage(this.page - 1)}\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n        </button>\n\n        ${pages.map((p, index) => {\n          if (p === 'ellipsis') {\n            return html`<span class=\"pagination__ellipsis\" part=\"ellipsis\" aria-hidden=\"true\" key=\"ellipsis-${index}\">&hellip;</span>`;\n          }\n          const isCurrent = p === this.page;\n          return html`\n            <button\n              class=${classMap({\n                'pagination__button': true,\n                'pagination__button--page': true,\n                'pagination__button--current': isCurrent\n              })}\n              part=\"page-button\"\n              aria-label=\"Page ${p}\"\n              aria-current=${isCurrent ? 'page' : nothing}\n              ?disabled=${this.disabled}\n              @click=${() => this.goToPage(p)}\n            >${p}</button>\n          `;\n        })}\n\n        <button\n          class=\"pagination__button pagination__button--next\"\n          part=\"next-button\"\n          aria-label=\"Next page\"\n          ?disabled=${isLast || this.disabled}\n          @click=${() => this.goToPage(this.page + 1)}\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n        </button>\n      </nav>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/pagination/pagination.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,cAAc,2BAA2B,CAAC;AAI1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/pagination/pagination.js

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

package/dist/components/pagination/pagination.js.map

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

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

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

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

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

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,80 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var pagination_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    font-family: var(--mz-font-sans);
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--mz-space-2xs);
+  }
+
+  .pagination__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 var(--mz-space-xs);
+    border: 1px solid var(--mz-color-border);
+    border-radius: var(--mz-radius-md);
+    background: var(--mz-color-surface, #fff);
+    color: var(--mz-color-text);
+    font-family: inherit;
+    font-size: var(--mz-font-size-sm);
+    font-weight: var(--mz-font-weight-medium, 500);
+    cursor: pointer;
+    transition: all 150ms ease;
+    outline: none;
+  }
+
+  .pagination__button:hover:not(:disabled) {
+    background: var(--mz-color-surface-raised);
+    border-color: var(--mz-color-border);
+  }
+
+  .pagination__button:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+  }
+
+  .pagination__button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .pagination__button--current {
+    background: var(--mz-color-primary);
+    border-color: var(--mz-color-primary);
+    color: #fff;
+  }
+
+  .pagination__button--current:hover:not(:disabled) {
+    background: var(--mz-color-primary);
+    border-color: var(--mz-color-primary);
+  }
+
+  .pagination__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    color: var(--mz-color-text-disabled);
+    font-size: var(--mz-font-size-sm);
+    user-select: none;
+  }
+
+  .pagination__button--prev svg,
+  .pagination__button--next svg {
+    display: block;
+  }
+`;
+export {
+  pagination_styles_default as default
+};
+//# sourceMappingURL=pagination.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/pagination/pagination.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  .pagination {\n    display: flex;\n    align-items: center;\n    gap: var(--mz-space-2xs);\n  }\n\n  .pagination__button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 var(--mz-space-xs);\n    border: 1px solid var(--mz-color-border);\n    border-radius: var(--mz-radius-md);\n    background: var(--mz-color-surface, #fff);\n    color: var(--mz-color-text);\n    font-family: inherit;\n    font-size: var(--mz-font-size-sm);\n    font-weight: var(--mz-font-weight-medium, 500);\n    cursor: pointer;\n    transition: all 150ms ease;\n    outline: none;\n  }\n\n  .pagination__button:hover:not(:disabled) {\n    background: var(--mz-color-surface-raised);\n    border-color: var(--mz-color-border);\n  }\n\n  .pagination__button:focus-visible {\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n  }\n\n  .pagination__button:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  .pagination__button--current {\n    background: var(--mz-color-primary);\n    border-color: var(--mz-color-primary);\n    color: #fff;\n  }\n\n  .pagination__button--current:hover:not(:disabled) {\n    background: var(--mz-color-primary);\n    border-color: var(--mz-color-primary);\n  }\n\n  .pagination__ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 2rem;\n    height: 2rem;\n    color: var(--mz-color-text-disabled);\n    font-size: var(--mz-font-size-sm);\n    user-select: none;\n  }\n\n  .pagination__button--prev svg,\n  .pagination__button--next svg {\n    display: block;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,4BAAQ;AAAA,IACX,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -48,6 +48,8 @@ export declare class MzPopover extends ManzanoElement {
     private addOutsideClickListener;
     private removeOutsideClickListener;
     private handleKeyDown;
+    private handleAnchorSlotChange;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }
 //# sourceMappingURL=popover.component.d.ts.map

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

@@ -1 +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"}
+{"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,OAAO,CAAC,sBAAsB;IASrB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAStD,MAAM;CAeP"}

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

@@ -113,13 +113,29 @@ class MzPopover extends ManzanoElement {
       this.hide();
     }
   }
+  handleAnchorSlotChange(e) {
+    const slot = e.target;
+    const anchor = slot.assignedElements({ flatten: true })[0];
+    if (anchor) {
+      anchor.setAttribute("aria-haspopup", "dialog");
+      anchor.setAttribute("aria-expanded", String(this.open));
+    }
+  }
+  willUpdate(changed) {
+    if (changed.has("open")) {
+      const anchor = this.getAnchor();
+      if (anchor) {
+        anchor.setAttribute("aria-expanded", String(this.open));
+      }
+    }
+  }
   render() {
     return html`
-      <slot name="anchor" @click=${this.handleAnchorClick}></slot>
+      <slot name="anchor" @click=${this.handleAnchorClick} @slotchange=${this.handleAnchorSlotChange}></slot>
       <div
         part="body"
         class="popover__body"
-        role="tooltip"
+        role="dialog"
         @keydown=${this.handleKeyDown}
         style="display: ${this.open ? "block" : "none"}"
       >

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

@@ -1,7 +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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",
+  "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  private handleAnchorSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const anchor = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n    if (anchor) {\n      anchor.setAttribute('aria-haspopup', 'dialog');\n      anchor.setAttribute('aria-expanded', String(this.open));\n    }\n  }\n\n  override willUpdate(changed: Map<PropertyKey, unknown>) {\n    if (changed.has('open')) {\n      const anchor = this.getAnchor();\n      if (anchor) {\n        anchor.setAttribute('aria-expanded', String(this.open));\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @click=${this.handleAnchorClick} @slotchange=${this.handleAnchorSlotChange}></slot>\n      <div\n        part=\"body\"\n        class=\"popover__body\"\n        role=\"dialog\"\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": []
 }