@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/slider/slider.component.js

@@ -0,0 +1,122 @@
+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 "./slider.styles.js";
+class MzSlider extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = 50;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.label = "";
+    this.showValue = false;
+    this.name = "";
+    this.size = "md";
+  }
+  /** Percentage of the current value within the range. */
+  get percent() {
+    const range = this.max - this.min;
+    if (range <= 0) return 0;
+    return (this.value - this.min) / range * 100;
+  }
+  handleInput(e) {
+    const target = e.target;
+    this.value = parseFloat(target.value);
+    this.emit("mz-input", { detail: { value: this.value } });
+  }
+  handleChange() {
+    this.emit("mz-change", { detail: { value: this.value } });
+  }
+  render() {
+    const pct = this.percent;
+    return html`
+      <div
+        class=${classMap({
+      slider: true,
+      "slider--disabled": this.disabled
+    })}
+        part="base"
+      >
+        ${this.label ? html`<label class="slider__label" part="label">${this.label}</label>` : nothing}
+        <div class="slider__control">
+          <div class="slider__track" part="track">
+            <div
+              class="slider__fill"
+              part="fill"
+              style=${styleMap({ width: `${pct}%` })}
+            ></div>
+            <div
+              class="slider__thumb"
+              part="thumb"
+              style=${styleMap({ left: `${pct}%` })}
+            >
+              ${this.showValue ? html`<span class="slider__value-display" part="value-display"
+                    >${this.value}</span
+                  >` : nothing}
+            </div>
+          </div>
+          <input
+            type="range"
+            class="slider__input"
+            part="input"
+            .value=${String(this.value)}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            ?disabled=${this.disabled}
+            aria-label=${this.label || "Slider"}
+            name=${this.name || nothing}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+MzSlider.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzSlider.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], MzSlider.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], MzSlider.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], MzSlider.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzSlider.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], MzSlider.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-value" })
+], MzSlider.prototype, "showValue", 2);
+__decorateClass([
+  property()
+], MzSlider.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzSlider.prototype, "size", 2);
+export {
+  MzSlider
+};
+//# sourceMappingURL=slider.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/slider/slider.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 './slider.styles.js';\n\n/**\n * @summary A custom-styled range slider with single thumb.\n *\n * @tag mz-slider\n *\n * @event mz-input - Emitted continuously while dragging.\n * @event mz-change - Emitted when the value settles (on mouseup/touchend).\n *\n * @csspart base - The container.\n * @csspart track - The track line.\n * @csspart fill - The filled portion of the track.\n * @csspart thumb - The thumb/handle.\n * @csspart input - The native range input (for accessibility).\n * @csspart value-display - The value label.\n *\n * @cssproperty --mz-slider-track-height - Track height.\n * @cssproperty --mz-slider-track-color - Unfilled track color.\n * @cssproperty --mz-slider-fill-color - Filled portion color.\n * @cssproperty --mz-slider-thumb-size - Thumb diameter.\n * @cssproperty --mz-slider-thumb-color - Thumb color.\n */\nexport class MzSlider extends ManzanoElement {\n  static styles = styles;\n\n  /** The current value. */\n  @property({ type: Number }) value = 50;\n\n  /** The minimum value. */\n  @property({ type: Number }) min = 0;\n\n  /** The maximum value. */\n  @property({ type: Number }) max = 100;\n\n  /** The step increment. */\n  @property({ type: Number }) step = 1;\n\n  /** Disables the slider. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** An accessible label for the slider. */\n  @property() label = '';\n\n  /** Whether to show the current value as a tooltip above the thumb. */\n  @property({ type: Boolean, attribute: 'show-value' }) showValue = false;\n\n  /** The form field name. */\n  @property() name = '';\n\n  /** The size of the slider. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Percentage of the current value within the range. */\n  private get percent(): number {\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    return ((this.value - this.min) / range) * 100;\n  }\n\n  private handleInput(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.value = parseFloat(target.value);\n    this.emit('mz-input', { detail: { value: this.value } });\n  }\n\n  private handleChange() {\n    this.emit('mz-change', { detail: { value: this.value } });\n  }\n\n  render() {\n    const pct = this.percent;\n\n    return html`\n      <div\n        class=${classMap({\n          slider: true,\n          'slider--disabled': this.disabled,\n        })}\n        part=\"base\"\n      >\n        ${this.label\n          ? html`<label class=\"slider__label\" part=\"label\">${this.label}</label>`\n          : nothing}\n        <div class=\"slider__control\">\n          <div class=\"slider__track\" part=\"track\">\n            <div\n              class=\"slider__fill\"\n              part=\"fill\"\n              style=${styleMap({ width: `${pct}%` })}\n            ></div>\n            <div\n              class=\"slider__thumb\"\n              part=\"thumb\"\n              style=${styleMap({ left: `${pct}%` })}\n            >\n              ${this.showValue\n                ? html`<span class=\"slider__value-display\" part=\"value-display\"\n                    >${this.value}</span\n                  >`\n                : nothing}\n            </div>\n          </div>\n          <input\n            type=\"range\"\n            class=\"slider__input\"\n            part=\"input\"\n            .value=${String(this.value)}\n            min=${this.min}\n            max=${this.max}\n            step=${this.step}\n            ?disabled=${this.disabled}\n            aria-label=${this.label || 'Slider'}\n            name=${this.name || nothing}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n          />\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;AAuBZ,MAAM,iBAAiB,eAAe;AAAA,EAAtC;AAAA;AAIuB,iBAAQ;AAGR,eAAM;AAGN,eAAM;AAGN,gBAAO;AAGS,oBAAW;AAG3C,iBAAQ;AAGkC,qBAAY;AAGtD,gBAAO;AAGU,gBAA2B;AAAA;AAAA;AAAA,EAGxD,IAAY,UAAkB;AAC5B,UAAM,QAAQ,KAAK,MAAM,KAAK;AAC9B,QAAI,SAAS,EAAG,QAAO;AACvB,YAAS,KAAK,QAAQ,KAAK,OAAO,QAAS;AAAA,EAC7C;AAAA,EAEQ,YAAY,GAAU;AAC5B,UAAM,SAAS,EAAE;AACjB,SAAK,QAAQ,WAAW,OAAO,KAAK;AACpC,SAAK,KAAK,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;AAAA,EACzD;AAAA,EAEQ,eAAe;AACrB,SAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;AAAA,EAC1D;AAAA,EAEA,SAAS;AACP,UAAM,MAAM,KAAK;AAEjB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,oBAAoB,KAAK;AAAA,IAC3B,CAAC,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,QACH,iDAAiD,KAAK,KAAK,aAC3D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMG,SAAS,EAAE,OAAO,GAAG,GAAG,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAK9B,SAAS,EAAE,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC;AAAA;AAAA,gBAEnC,KAAK,YACH;AAAA,uBACK,KAAK,KAAK;AAAA,uBAEf,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOJ,OAAO,KAAK,KAAK,CAAC;AAAA,kBACrB,KAAK,GAAG;AAAA,kBACR,KAAK,GAAG;AAAA,mBACP,KAAK,IAAI;AAAA,wBACJ,KAAK,QAAQ;AAAA,yBACZ,KAAK,SAAS,QAAQ;AAAA,mBAC5B,KAAK,QAAQ,OAAO;AAAA,qBAClB,KAAK,WAAW;AAAA,sBACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC;AACF;AAlGa,SACJ,SAAS;AAGY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJf,SAIiB;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPf,SAOiB;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAVf,SAUiB;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAbf,SAaiB;AAGgB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhB/B,SAgBiC;AAGhC;AAAA,EAAX,SAAS;AAAA,GAnBC,SAmBC;AAG0C;AAAA,EAArD,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa,CAAC;AAAA,GAtBzC,SAsB2C;AAG1C;AAAA,EAAX,SAAS;AAAA,GAzBC,SAyBC;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA5BhB,SA4BkB;",
+  "names": []
+}

package/dist/components/slider/slider.d.ts

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

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

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

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

package/dist/components/slider/slider.js.map

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

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

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

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

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

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,124 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var slider_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      --_slider-track-height: var(--mz-slider-track-height, 4px);
+      --_slider-track-color: var(--mz-slider-track-color, var(--mz-color-border));
+      --_slider-fill-color: var(--mz-slider-fill-color, var(--mz-color-primary));
+      --_slider-thumb-size: var(--mz-slider-thumb-size, 16px);
+      --_slider-thumb-color: var(--mz-slider-thumb-color, var(--mz-color-primary));
+
+      display: block;
+      font-family: var(--mz-font-sans);
+    }
+
+    /* Size variants */
+    :host([size='sm']) {
+      --_slider-track-height: var(--mz-slider-track-height, 2px);
+      --_slider-thumb-size: var(--mz-slider-thumb-size, 12px);
+    }
+
+    :host([size='lg']) {
+      --_slider-track-height: var(--mz-slider-track-height, 6px);
+      --_slider-thumb-size: var(--mz-slider-thumb-size, 20px);
+    }
+
+    .slider__label {
+      display: block;
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium, 500);
+      color: var(--mz-color-on-surface);
+      margin-bottom: var(--mz-space-xs);
+    }
+
+    .slider__control {
+      position: relative;
+      height: var(--_slider-thumb-size);
+      display: flex;
+      align-items: center;
+    }
+
+    .slider__track {
+      position: relative;
+      width: 100%;
+      height: var(--_slider-track-height);
+      background: var(--_slider-track-color);
+      border-radius: var(--mz-radius-pill);
+    }
+
+    .slider__fill {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      background: var(--_slider-fill-color);
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    .slider__thumb {
+      position: absolute;
+      top: 50%;
+      width: var(--_slider-thumb-size);
+      height: var(--_slider-thumb-size);
+      background: var(--_slider-thumb-color);
+      border: 2px solid var(--mz-color-surface, #fff);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: 0 1px 3px rgb(28 25 21 / 0.2);
+      pointer-events: none;
+      transition: box-shadow 150ms ease;
+    }
+
+    .slider__value-display {
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--mz-color-on-surface, #1c1915);
+      color: var(--mz-color-surface, #fff);
+      font-size: var(--mz-font-size-xs);
+      padding: 2px 6px;
+      border-radius: var(--mz-radius-sm);
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+    }
+
+    /* Native input overlay — on top for interaction, invisible */
+    .slider__input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+      margin: 0;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    /* Focus ring via :focus-within on the control container */
+    .slider__control:focus-within .slider__thumb {
+      box-shadow:
+        0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 25%, transparent),
+        0 1px 3px rgb(28 25 21 / 0.2);
+    }
+
+    /* Disabled */
+    .slider--disabled {
+      opacity: 0.5;
+    }
+
+    .slider--disabled .slider__input {
+      cursor: not-allowed;
+    }
+  `
+];
+export {
+  slider_styles_default as default
+};
+//# sourceMappingURL=slider.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/slider/slider.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      --_slider-track-height: var(--mz-slider-track-height, 4px);\n      --_slider-track-color: var(--mz-slider-track-color, var(--mz-color-border));\n      --_slider-fill-color: var(--mz-slider-fill-color, var(--mz-color-primary));\n      --_slider-thumb-size: var(--mz-slider-thumb-size, 16px);\n      --_slider-thumb-color: var(--mz-slider-thumb-color, var(--mz-color-primary));\n\n      display: block;\n      font-family: var(--mz-font-sans);\n    }\n\n    /* Size variants */\n    :host([size='sm']) {\n      --_slider-track-height: var(--mz-slider-track-height, 2px);\n      --_slider-thumb-size: var(--mz-slider-thumb-size, 12px);\n    }\n\n    :host([size='lg']) {\n      --_slider-track-height: var(--mz-slider-track-height, 6px);\n      --_slider-thumb-size: var(--mz-slider-thumb-size, 20px);\n    }\n\n    .slider__label {\n      display: block;\n      font-size: var(--mz-font-size-sm);\n      font-weight: var(--mz-font-weight-medium, 500);\n      color: var(--mz-color-on-surface);\n      margin-bottom: var(--mz-space-xs);\n    }\n\n    .slider__control {\n      position: relative;\n      height: var(--_slider-thumb-size);\n      display: flex;\n      align-items: center;\n    }\n\n    .slider__track {\n      position: relative;\n      width: 100%;\n      height: var(--_slider-track-height);\n      background: var(--_slider-track-color);\n      border-radius: var(--mz-radius-pill);\n    }\n\n    .slider__fill {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      background: var(--_slider-fill-color);\n      border-radius: inherit;\n      pointer-events: none;\n    }\n\n    .slider__thumb {\n      position: absolute;\n      top: 50%;\n      width: var(--_slider-thumb-size);\n      height: var(--_slider-thumb-size);\n      background: var(--_slider-thumb-color);\n      border: 2px solid var(--mz-color-surface, #fff);\n      border-radius: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: 0 1px 3px rgb(28 25 21 / 0.2);\n      pointer-events: none;\n      transition: box-shadow 150ms ease;\n    }\n\n    .slider__value-display {\n      position: absolute;\n      bottom: calc(100% + 6px);\n      left: 50%;\n      transform: translateX(-50%);\n      background: var(--mz-color-on-surface, #1c1915);\n      color: var(--mz-color-surface, #fff);\n      font-size: var(--mz-font-size-xs);\n      padding: 2px 6px;\n      border-radius: var(--mz-radius-sm);\n      white-space: nowrap;\n      font-variant-numeric: tabular-nums;\n      pointer-events: none;\n    }\n\n    /* Native input overlay \u2014 on top for interaction, invisible */\n    .slider__input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: pointer;\n      margin: 0;\n      -webkit-appearance: none;\n      appearance: none;\n    }\n\n    /* Focus ring via :focus-within on the control container */\n    .slider__control:focus-within .slider__thumb {\n      box-shadow:\n        0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 25%, transparent),\n        0 1px 3px rgb(28 25 21 / 0.2);\n    }\n\n    /* Disabled */\n    .slider--disabled {\n      opacity: 0.5;\n    }\n\n    .slider--disabled .slider__input {\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmHF;",
+  "names": []
+}

package/dist/components/split-panel/split-panel.component.d.ts

@@ -0,0 +1,42 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A resizable split panel with a draggable divider.
+ *
+ * @slot start - Content for the start (left/top) pane.
+ * @slot end - Content for the end (right/bottom) pane.
+ * @slot divider - Custom divider content.
+ *
+ * @event mz-reposition - Emitted while dragging. `event.detail.position` is the new percentage.
+ *
+ * @csspart panel - The overall container.
+ * @csspart start - The start pane.
+ * @csspart end - The end pane.
+ * @csspart divider - The divider handle.
+ *
+ * @cssproperty --mz-split-panel-divider-width - Divider thickness (default: 4px).
+ * @cssproperty --mz-split-panel-divider-color - Divider background color.
+ * @cssproperty --mz-split-panel-divider-hover-color - Divider hover/active color.
+ */
+export declare class MzSplitPanel extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** Divider position as a percentage (0-100). */
+    position: number;
+    /** Stack panes vertically instead of horizontally. */
+    vertical: boolean;
+    /** Prevent the divider from being dragged. */
+    disabled: boolean;
+    /** Snap points as comma-separated percentages (e.g. "25,50,75"). */
+    snap: string;
+    /** Distance in pixels before snapping to a snap point. */
+    snapThreshold: number;
+    /** Minimum allowed position percentage. */
+    min: number;
+    /** Maximum allowed position percentage. */
+    max: number;
+    private container;
+    private dragging;
+    private handleDragStart;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=split-panel.component.d.ts.map

package/dist/components/split-panel/split-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-panel.component.d.ts","sourceRoot":"","sources":["../../../src/components/split-panel/split-panel.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,cAAc;IAC9C,MAAM,CAAC,MAAM,0BAAU;IAEvB,gDAAgD;IACpB,QAAQ,SAAM;IAE1C,sDAAsD;IACV,QAAQ,UAAS;IAE7D,8CAA8C;IACF,QAAQ,UAAS;IAE7D,oEAAoE;IACxD,IAAI,SAAM;IAEtB,0DAA0D;IACD,aAAa,SAAM;IAE5E,2CAA2C;IACf,GAAG,SAAK;IAEpC,2CAA2C;IACf,GAAG,SAAO;IAEf,OAAO,CAAC,SAAS,CAAe;IAEvD,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,eAAe;IA+CvB,OAAO,CAAC,aAAa;IAqCrB,MAAM;CA+CP"}

package/dist/components/split-panel/split-panel.component.js

@@ -0,0 +1,167 @@
+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, query } 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 "./split-panel.styles.js";
+class MzSplitPanel extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.position = 50;
+    this.vertical = false;
+    this.disabled = false;
+    this.snap = "";
+    this.snapThreshold = 12;
+    this.min = 0;
+    this.max = 100;
+    this.dragging = false;
+  }
+  handleDragStart(e) {
+    if (this.disabled) return;
+    e.preventDefault();
+    this.dragging = true;
+    this.requestUpdate();
+    const onMove = (e2) => {
+      const rect = this.container.getBoundingClientRect();
+      let pct;
+      if (this.vertical) {
+        pct = (e2.clientY - rect.top) / rect.height * 100;
+      } else {
+        pct = (e2.clientX - rect.left) / rect.width * 100;
+      }
+      if (this.snap) {
+        const snapPoints = this.snap.split(",").map((s) => parseFloat(s.trim()));
+        const size = this.vertical ? rect.height : rect.width;
+        for (const sp of snapPoints) {
+          const dist = Math.abs(pct - sp) * size / 100;
+          if (dist <= this.snapThreshold) {
+            pct = sp;
+            break;
+          }
+        }
+      }
+      pct = Math.max(this.min, Math.min(this.max, pct));
+      this.position = pct;
+      this.emit("mz-reposition", { detail: { position: pct } });
+    };
+    const onUp = () => {
+      this.dragging = false;
+      this.requestUpdate();
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+  }
+  handleKeyDown(e) {
+    if (this.disabled) return;
+    const step = 1;
+    let newPos = this.position;
+    const decrease = this.vertical ? "ArrowUp" : "ArrowLeft";
+    const increase = this.vertical ? "ArrowDown" : "ArrowRight";
+    switch (e.key) {
+      case decrease:
+        e.preventDefault();
+        newPos -= step;
+        break;
+      case increase:
+        e.preventDefault();
+        newPos += step;
+        break;
+      case "Home":
+        e.preventDefault();
+        newPos = this.min;
+        break;
+      case "End":
+        e.preventDefault();
+        newPos = this.max;
+        break;
+      default:
+        return;
+    }
+    newPos = Math.max(this.min, Math.min(this.max, newPos));
+    if (newPos !== this.position) {
+      this.position = newPos;
+      this.emit("mz-reposition", { detail: { position: newPos } });
+    }
+  }
+  render() {
+    const pos = `${this.position}%`;
+    const dividerWidth = "var(--_split-panel-divider-width)";
+    const startStyles = this.vertical ? { height: `calc(${pos} - ${dividerWidth} / 2)` } : { width: `calc(${pos} - ${dividerWidth} / 2)` };
+    const endStyles = this.vertical ? { height: `calc(100% - ${pos} - ${dividerWidth} / 2)` } : { width: `calc(100% - ${pos} - ${dividerWidth} / 2)` };
+    return html`
+      <div
+        class=${classMap({
+      "split-panel": true,
+      "split-panel--vertical": this.vertical,
+      "split-panel--dragging": this.dragging,
+      "split-panel--disabled": this.disabled
+    })}
+        part="panel"
+      >
+        <div class="split-panel__start" part="start" style=${styleMap(startStyles)}>
+          <slot name="start"></slot>
+        </div>
+        <div
+          class="split-panel__divider"
+          part="divider"
+          role="separator"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-valuenow=${Math.round(this.position)}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-orientation=${this.vertical ? "vertical" : "horizontal"}
+          @pointerdown=${this.handleDragStart}
+          @keydown=${this.handleKeyDown}
+        >
+          <slot name="divider">
+            <div class="split-panel__divider-grip"></div>
+          </slot>
+        </div>
+        <div class="split-panel__end" part="end" style=${styleMap(endStyles)}>
+          <slot name="end"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+MzSplitPanel.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzSplitPanel.prototype, "position", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzSplitPanel.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzSplitPanel.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], MzSplitPanel.prototype, "snap", 2);
+__decorateClass([
+  property({ type: Number, attribute: "snap-threshold" })
+], MzSplitPanel.prototype, "snapThreshold", 2);
+__decorateClass([
+  property({ type: Number })
+], MzSplitPanel.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], MzSplitPanel.prototype, "max", 2);
+__decorateClass([
+  query(".split-panel")
+], MzSplitPanel.prototype, "container", 2);
+export {
+  MzSplitPanel
+};
+//# sourceMappingURL=split-panel.component.js.map

package/dist/components/split-panel/split-panel.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/split-panel/split-panel.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property, query } 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 './split-panel.styles.js';\n\n/**\n * @summary A resizable split panel with a draggable divider.\n *\n * @slot start - Content for the start (left/top) pane.\n * @slot end - Content for the end (right/bottom) pane.\n * @slot divider - Custom divider content.\n *\n * @event mz-reposition - Emitted while dragging. `event.detail.position` is the new percentage.\n *\n * @csspart panel - The overall container.\n * @csspart start - The start pane.\n * @csspart end - The end pane.\n * @csspart divider - The divider handle.\n *\n * @cssproperty --mz-split-panel-divider-width - Divider thickness (default: 4px).\n * @cssproperty --mz-split-panel-divider-color - Divider background color.\n * @cssproperty --mz-split-panel-divider-hover-color - Divider hover/active color.\n */\nexport class MzSplitPanel extends ManzanoElement {\n  static styles = styles;\n\n  /** Divider position as a percentage (0-100). */\n  @property({ type: Number }) position = 50;\n\n  /** Stack panes vertically instead of horizontally. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Prevent the divider from being dragged. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Snap points as comma-separated percentages (e.g. \"25,50,75\"). */\n  @property() snap = '';\n\n  /** Distance in pixels before snapping to a snap point. */\n  @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;\n\n  /** Minimum allowed position percentage. */\n  @property({ type: Number }) min = 0;\n\n  /** Maximum allowed position percentage. */\n  @property({ type: Number }) max = 100;\n\n  @query('.split-panel') private container!: HTMLElement;\n\n  private dragging = false;\n\n  private handleDragStart(e: PointerEvent) {\n    if (this.disabled) return;\n    e.preventDefault();\n    this.dragging = true;\n    this.requestUpdate();\n\n    const onMove = (e: PointerEvent) => {\n      const rect = this.container.getBoundingClientRect();\n      let pct: number;\n\n      if (this.vertical) {\n        pct = ((e.clientY - rect.top) / rect.height) * 100;\n      } else {\n        pct = ((e.clientX - rect.left) / rect.width) * 100;\n      }\n\n      // Apply snap\n      if (this.snap) {\n        const snapPoints = this.snap.split(',').map(s => parseFloat(s.trim()));\n        const size = this.vertical ? rect.height : rect.width;\n        for (const sp of snapPoints) {\n          const dist = (Math.abs(pct - sp) * size) / 100;\n          if (dist <= this.snapThreshold) {\n            pct = sp;\n            break;\n          }\n        }\n      }\n\n      // Clamp\n      pct = Math.max(this.min, Math.min(this.max, pct));\n\n      this.position = pct;\n      this.emit('mz-reposition', { detail: { position: pct } });\n    };\n\n    const onUp = () => {\n      this.dragging = false;\n      this.requestUpdate();\n      document.removeEventListener('pointermove', onMove);\n      document.removeEventListener('pointerup', onUp);\n    };\n\n    document.addEventListener('pointermove', onMove);\n    document.addEventListener('pointerup', onUp);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (this.disabled) return;\n\n    const step = 1;\n    let newPos = this.position;\n\n    const decrease = this.vertical ? 'ArrowUp' : 'ArrowLeft';\n    const increase = this.vertical ? 'ArrowDown' : 'ArrowRight';\n\n    switch (e.key) {\n      case decrease:\n        e.preventDefault();\n        newPos -= step;\n        break;\n      case increase:\n        e.preventDefault();\n        newPos += step;\n        break;\n      case 'Home':\n        e.preventDefault();\n        newPos = this.min;\n        break;\n      case 'End':\n        e.preventDefault();\n        newPos = this.max;\n        break;\n      default:\n        return;\n    }\n\n    newPos = Math.max(this.min, Math.min(this.max, newPos));\n    if (newPos !== this.position) {\n      this.position = newPos;\n      this.emit('mz-reposition', { detail: { position: newPos } });\n    }\n  }\n\n  render() {\n    const pos = `${this.position}%`;\n    const dividerWidth = 'var(--_split-panel-divider-width)';\n\n    const startStyles = this.vertical\n      ? { height: `calc(${pos} - ${dividerWidth} / 2)` }\n      : { width: `calc(${pos} - ${dividerWidth} / 2)` };\n\n    const endStyles = this.vertical\n      ? { height: `calc(100% - ${pos} - ${dividerWidth} / 2)` }\n      : { width: `calc(100% - ${pos} - ${dividerWidth} / 2)` };\n\n    return html`\n      <div\n        class=${classMap({\n          'split-panel': true,\n          'split-panel--vertical': this.vertical,\n          'split-panel--dragging': this.dragging,\n          'split-panel--disabled': this.disabled\n        })}\n        part=\"panel\"\n      >\n        <div class=\"split-panel__start\" part=\"start\" style=${styleMap(startStyles)}>\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          class=\"split-panel__divider\"\n          part=\"divider\"\n          role=\"separator\"\n          tabindex=${this.disabled ? -1 : 0}\n          aria-valuenow=${Math.round(this.position)}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n          @pointerdown=${this.handleDragStart}\n          @keydown=${this.handleKeyDown}\n        >\n          <slot name=\"divider\">\n            <div class=\"split-panel__divider-grip\"></div>\n          </slot>\n        </div>\n        <div class=\"split-panel__end\" part=\"end\" style=${styleMap(endStyles)}>\n          <slot name=\"end\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["e"]
+}

package/dist/components/split-panel/split-panel.d.ts

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

package/dist/components/split-panel/split-panel.d.ts.map

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

package/dist/components/split-panel/split-panel.js

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

package/dist/components/split-panel/split-panel.js.map

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

package/dist/components/split-panel/split-panel.styles.d.ts

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

package/dist/components/split-panel/split-panel.styles.d.ts.map

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