@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/relative-time/relative-time.component.js

@@ -0,0 +1,143 @@
+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, state } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./relative-time.styles.js";
+const UNITS = [
+  { unit: "year", seconds: 31536e3 },
+  { unit: "month", seconds: 2592e3 },
+  { unit: "week", seconds: 604800 },
+  { unit: "day", seconds: 86400 },
+  { unit: "hour", seconds: 3600 },
+  { unit: "minute", seconds: 60 },
+  { unit: "second", seconds: 1 }
+];
+class MzRelativeTime extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.date = /* @__PURE__ */ new Date();
+    this.format = "long";
+    this.numeric = "auto";
+    this.sync = false;
+    this._tick = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.sync) {
+      this._startTimer();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopTimer();
+  }
+  updated(changedProps) {
+    if (changedProps.has("sync")) {
+      if (this.sync) {
+        this._startTimer();
+      } else {
+        this._stopTimer();
+      }
+    }
+  }
+  _startTimer() {
+    this._stopTimer();
+    const { seconds } = this._getRelativeValue();
+    const absSeconds = Math.abs(seconds);
+    let interval;
+    if (absSeconds < 60) {
+      interval = 1e3;
+    } else if (absSeconds < 3600) {
+      interval = 6e4;
+    } else {
+      interval = 36e5;
+    }
+    this._timer = setInterval(() => {
+      this._tick++;
+    }, interval);
+  }
+  _stopTimer() {
+    if (this._timer !== void 0) {
+      clearInterval(this._timer);
+      this._timer = void 0;
+    }
+  }
+  /** Calculate the diff in seconds and find the best unit. */
+  _getRelativeValue() {
+    const date = this.date instanceof Date ? this.date : new Date(this.date);
+    const now = Date.now();
+    const diffMs = date.getTime() - now;
+    const diffSeconds = diffMs / 1e3;
+    const absDiff = Math.abs(diffSeconds);
+    for (const { unit, seconds } of UNITS) {
+      if (absDiff >= seconds) {
+        return {
+          value: Math.round(diffSeconds / seconds),
+          unit,
+          seconds: diffSeconds
+        };
+      }
+    }
+    return { value: Math.round(diffSeconds), unit: "second", seconds: diffSeconds };
+  }
+  render() {
+    void this._tick;
+    const date = this.date instanceof Date ? this.date : new Date(this.date);
+    if (isNaN(date.getTime())) {
+      return html``;
+    }
+    const { value, unit } = this._getRelativeValue();
+    try {
+      const formatter = new Intl.RelativeTimeFormat(this.locale, {
+        style: this.format,
+        numeric: this.numeric
+      });
+      const formatted = formatter.format(value, unit);
+      const isoString = date.toISOString();
+      const fullDate = date.toLocaleString(this.locale);
+      return html`<time datetime=${isoString} title=${fullDate}>${formatted}</time>`;
+    } catch {
+      return html``;
+    }
+  }
+}
+MzRelativeTime.styles = styles;
+__decorateClass([
+  property({
+    attribute: "date",
+    converter: {
+      fromAttribute(value) {
+        const num = Number(value);
+        return isNaN(num) ? new Date(value) : new Date(num);
+      }
+    }
+  })
+], MzRelativeTime.prototype, "date", 2);
+__decorateClass([
+  property()
+], MzRelativeTime.prototype, "format", 2);
+__decorateClass([
+  property()
+], MzRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MzRelativeTime.prototype, "sync", 2);
+__decorateClass([
+  property()
+], MzRelativeTime.prototype, "locale", 2);
+__decorateClass([
+  state()
+], MzRelativeTime.prototype, "_tick", 2);
+export {
+  MzRelativeTime
+};
+//# sourceMappingURL=relative-time.component.js.map

package/dist/components/relative-time/relative-time.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/relative-time/relative-time.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './relative-time.styles.js';\n\n/** Time thresholds in seconds for each unit. */\nconst UNITS: Array<{ unit: Intl.RelativeTimeFormatUnit; seconds: number }> = [\n  { unit: 'year', seconds: 31536000 },\n  { unit: 'month', seconds: 2592000 },\n  { unit: 'week', seconds: 604800 },\n  { unit: 'day', seconds: 86400 },\n  { unit: 'hour', seconds: 3600 },\n  { unit: 'minute', seconds: 60 },\n  { unit: 'second', seconds: 1 }\n];\n\n/**\n * @summary Displays a relative time string that can auto-update (e.g. \"3 minutes ago\", \"in 2 hours\").\n *\n * @tag mz-relative-time\n *\n * @example\n * ```html\n * <mz-relative-time date=\"2024-01-01T00:00:00Z\" format=\"long\"></mz-relative-time>\n * ```\n */\nexport class MzRelativeTime extends ManzanoElement {\n  static styles = styles;\n\n  /** The reference date. Accepts a Date object, ISO string, or unix timestamp (ms). */\n  @property({\n    attribute: 'date',\n    converter: {\n      fromAttribute(value: string) {\n        const num = Number(value);\n        return isNaN(num) ? new Date(value) : new Date(num);\n      }\n    }\n  })\n  date: Date = new Date();\n\n  /** The format style: 'long' (\"3 minutes ago\"), 'short' (\"3 min. ago\"), or 'narrow' (\"3m ago\"). */\n  @property() format: 'long' | 'short' | 'narrow' = 'long';\n\n  /** Whether to use numeric output: 'always' (\"1 day ago\") or 'auto' (\"yesterday\"). */\n  @property() numeric: 'always' | 'auto' = 'auto';\n\n  /** Whether to automatically update the displayed time. */\n  @property({ type: Boolean }) sync = false;\n\n  /** The locale to use for formatting. Defaults to the browser's locale. */\n  @property() locale?: string;\n\n  /** Internal tick counter to trigger re-renders on interval. */\n  @state() private _tick = 0;\n\n  private _timer?: ReturnType<typeof setInterval>;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.sync) {\n      this._startTimer();\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopTimer();\n  }\n\n  override updated(changedProps: Map<PropertyKey, unknown>) {\n    if (changedProps.has('sync')) {\n      if (this.sync) {\n        this._startTimer();\n      } else {\n        this._stopTimer();\n      }\n    }\n  }\n\n  private _startTimer() {\n    this._stopTimer();\n    const { seconds } = this._getRelativeValue();\n    const absSeconds = Math.abs(seconds);\n\n    // Choose interval based on magnitude\n    let interval: number;\n    if (absSeconds < 60) {\n      interval = 1000; // every second\n    } else if (absSeconds < 3600) {\n      interval = 60_000; // every minute\n    } else {\n      interval = 3_600_000; // every hour\n    }\n\n    this._timer = setInterval(() => {\n      this._tick++;\n    }, interval);\n  }\n\n  private _stopTimer() {\n    if (this._timer !== undefined) {\n      clearInterval(this._timer);\n      this._timer = undefined;\n    }\n  }\n\n  /** Calculate the diff in seconds and find the best unit. */\n  private _getRelativeValue(): { value: number; unit: Intl.RelativeTimeFormatUnit; seconds: number } {\n    const date = this.date instanceof Date ? this.date : new Date(this.date);\n    const now = Date.now();\n    const diffMs = date.getTime() - now;\n    const diffSeconds = diffMs / 1000;\n    const absDiff = Math.abs(diffSeconds);\n\n    for (const { unit, seconds } of UNITS) {\n      if (absDiff >= seconds) {\n        return {\n          value: Math.round(diffSeconds / seconds),\n          unit,\n          seconds: diffSeconds\n        };\n      }\n    }\n\n    return { value: Math.round(diffSeconds), unit: 'second', seconds: diffSeconds };\n  }\n\n  render() {\n    // Reference _tick to ensure re-renders\n    void this._tick;\n\n    const date = this.date instanceof Date ? this.date : new Date(this.date);\n\n    if (isNaN(date.getTime())) {\n      return html``;\n    }\n\n    const { value, unit } = this._getRelativeValue();\n\n    try {\n      const formatter = new Intl.RelativeTimeFormat(this.locale, {\n        style: this.format,\n        numeric: this.numeric\n      });\n      const formatted = formatter.format(value, unit);\n      const isoString = date.toISOString();\n      const fullDate = date.toLocaleString(this.locale);\n\n      return html`<time datetime=${isoString} title=${fullDate}>${formatted}</time>`;\n    } catch {\n      return html``;\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/relative-time/relative-time.d.ts

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

package/dist/components/relative-time/relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../../src/components/relative-time/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,8BAA8B,CAAC;AAI7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/relative-time/relative-time.js

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

package/dist/components/relative-time/relative-time.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/relative-time/relative-time.ts"],
+  "sourcesContent": ["import { MzRelativeTime } from './relative-time.component.js';\n\nexport * from './relative-time.component.js';\n\nMzRelativeTime.define('mz-relative-time');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-relative-time': MzRelativeTime;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAE/B,cAAc;AAEd,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

package/dist/components/relative-time/relative-time.styles.d.ts

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

package/dist/components/relative-time/relative-time.styles.d.ts.map

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

package/dist/components/relative-time/relative-time.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var relative_time_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline;
+    }
+  `
+];
+export {
+  relative_time_styles_default as default
+};
+//# sourceMappingURL=relative-time.styles.js.map

package/dist/components/relative-time/relative-time.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/relative-time/relative-time.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;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,+BAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAKF;",
+  "names": []
+}

package/dist/components/resize-observer/resize-observer.component.d.ts

@@ -0,0 +1,21 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A wrapper around the browser's native `ResizeObserver` API that emits an event when the host element is resized.
+ *
+ * @event mz-resize - Emitted when the host element is resized. The event detail contains `{ entries: ResizeObserverEntry[] }`.
+ *
+ * @slot - The content to observe for size changes.
+ */
+export declare class MzResizeObserver extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private observer;
+    /** Disables the observer. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private startObserver;
+    private stopObserver;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=resize-observer.component.d.ts.map

package/dist/components/resize-observer/resize-observer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-observer.component.d.ts","sourceRoot":"","sources":["../../../src/components/resize-observer/resize-observer.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;GAMG;AACH,qBAAa,gBAAiB,SAAQ,cAAc;IAClD,MAAM,CAAC,MAAM,4BAA6B;IAE1C,OAAO,CAAC,QAAQ,CAA+B;IAE/C,6BAA6B;IACe,QAAQ,UAAS;IAE7D,iBAAiB;IAKjB,oBAAoB;IAKpB,SAAS,CAAC,OAAO;IAMjB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,YAAY;IAOpB,MAAM;CAGP"}

package/dist/components/resize-observer/resize-observer.component.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import componentStyles from "../../styles/component.styles.js";
+import styles from "./resize-observer.styles.js";
+class MzResizeObserver extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.observer = null;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.startObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  updated() {
+    this.stopObserver();
+    this.startObserver();
+  }
+  startObserver() {
+    if (this.disabled) return;
+    this.observer = new ResizeObserver((entries) => {
+      this.emit("mz-resize", { detail: { entries } });
+    });
+    this.observer.observe(this);
+  }
+  stopObserver() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+MzResizeObserver.styles = [componentStyles, styles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzResizeObserver.prototype, "disabled", 2);
+export {
+  MzResizeObserver
+};
+//# sourceMappingURL=resize-observer.component.js.map

package/dist/components/resize-observer/resize-observer.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/resize-observer/resize-observer.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './resize-observer.styles.js';\n\n/**\n * @summary A wrapper around the browser's native `ResizeObserver` API that emits an event when the host element is resized.\n *\n * @event mz-resize - Emitted when the host element is resized. The event detail contains `{ entries: ResizeObserverEntry[] }`.\n *\n * @slot - The content to observe for size changes.\n */\nexport class MzResizeObserver extends ManzanoElement {\n  static styles = [componentStyles, styles];\n\n  private observer: ResizeObserver | null = null;\n\n  /** Disables the observer. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.startObserver();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stopObserver();\n  }\n\n  protected updated() {\n    // Restart observer when disabled changes\n    this.stopObserver();\n    this.startObserver();\n  }\n\n  private startObserver() {\n    if (this.disabled) return;\n\n    this.observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      this.emit('mz-resize', { detail: { entries } });\n    });\n\n    this.observer.observe(this);\n  }\n\n  private stopObserver() {\n    if (this.observer) {\n      this.observer.disconnect();\n      this.observer = null;\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AASZ,MAAM,yBAAyB,eAAe;AAAA,EAA9C;AAAA;AAGL,SAAQ,WAAkC;AAGE,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,aAAa;AAAA,EACpB;AAAA,EAEU,UAAU;AAElB,SAAK,aAAa;AAClB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEQ,gBAAgB;AACtB,QAAI,KAAK,SAAU;AAEnB,SAAK,WAAW,IAAI,eAAe,CAAC,YAAmC;AACrE,WAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAAA,IAChD,CAAC;AAED,SAAK,SAAS,QAAQ,IAAI;AAAA,EAC5B;AAAA,EAEQ,eAAe;AACrB,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS,WAAW;AACzB,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AA5Ca,iBACJ,SAAS,CAAC,iBAAiB,MAAM;AAKI;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAN/B,iBAMiC;",
+  "names": []
+}

package/dist/components/resize-observer/resize-observer.d.ts

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

package/dist/components/resize-observer/resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../../src/components/resize-observer/resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIlE,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/resize-observer/resize-observer.js

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

package/dist/components/resize-observer/resize-observer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/resize-observer/resize-observer.ts"],
+  "sourcesContent": ["import { MzResizeObserver } from './resize-observer.component.js';\n\nMzResizeObserver.define('mz-resize-observer');\n\nexport { MzResizeObserver };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-resize-observer': MzResizeObserver;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AAEjC,iBAAiB,OAAO,oBAAoB;",
+  "names": []
+}

package/dist/components/resize-observer/resize-observer.styles.d.ts

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

package/dist/components/resize-observer/resize-observer.styles.d.ts.map

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

package/dist/components/resize-observer/resize-observer.styles.js

@@ -0,0 +1,10 @@
+import { css } from "lit";
+var resize_observer_styles_default = css`
+  :host {
+    display: block;
+  }
+`;
+export {
+  resize_observer_styles_default as default
+};
+//# sourceMappingURL=resize-observer.styles.js.map

package/dist/components/resize-observer/resize-observer.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/resize-observer/resize-observer.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/scroll-area/scroll-area.component.d.ts

@@ -0,0 +1,20 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A scrollable container with custom-styled thin scrollbars.
+ *
+ * @slot - Scrollable content.
+ *
+ * @csspart base - The scrollable container.
+ *
+ * @cssproperty --mz-scroll-area-height - Max height of the container (default: auto).
+ * @cssproperty --mz-scroll-area-scrollbar-width - Scrollbar width (default: 6px).
+ * @cssproperty --mz-scroll-area-scrollbar-color - Scrollbar thumb color.
+ * @cssproperty --mz-scroll-area-scrollbar-track - Scrollbar track color.
+ */
+export declare class MzScrollArea extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** The scroll direction: 'vertical', 'horizontal', or 'both'. */
+    direction: 'vertical' | 'horizontal' | 'both';
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=scroll-area.component.d.ts.map

package/dist/components/scroll-area/scroll-area.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/scroll-area.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,iEAAiE;IACpC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAc;IAExF,MAAM;CAeP"}

package/dist/components/scroll-area/scroll-area.component.js

@@ -0,0 +1,44 @@
+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 "./scroll-area.styles.js";
+class MzScrollArea extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.direction = "vertical";
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      "scroll-area": true,
+      "scroll-area--vertical": this.direction === "vertical" || this.direction === "both",
+      "scroll-area--horizontal": this.direction === "horizontal" || this.direction === "both"
+    })}
+        part="base"
+        tabindex="0"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+MzScrollArea.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], MzScrollArea.prototype, "direction", 2);
+export {
+  MzScrollArea
+};
+//# sourceMappingURL=scroll-area.component.js.map

package/dist/components/scroll-area/scroll-area.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/scroll-area/scroll-area.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 './scroll-area.styles.js';\n\n/**\n * @summary A scrollable container with custom-styled thin scrollbars.\n *\n * @slot - Scrollable content.\n *\n * @csspart base - The scrollable container.\n *\n * @cssproperty --mz-scroll-area-height - Max height of the container (default: auto).\n * @cssproperty --mz-scroll-area-scrollbar-width - Scrollbar width (default: 6px).\n * @cssproperty --mz-scroll-area-scrollbar-color - Scrollbar thumb color.\n * @cssproperty --mz-scroll-area-scrollbar-track - Scrollbar track color.\n */\nexport class MzScrollArea extends ManzanoElement {\n  static styles = styles;\n\n  /** The scroll direction: 'vertical', 'horizontal', or 'both'. */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'scroll-area': true,\n          'scroll-area--vertical': this.direction === 'vertical' || this.direction === 'both',\n          'scroll-area--horizontal': this.direction === 'horizontal' || this.direction === 'both',\n        })}\n        part=\"base\"\n        tabindex=\"0\"\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;AAcZ,MAAM,qBAAqB,eAAe;AAAA,EAA1C;AAAA;AAIwB,qBAAgD;AAAA;AAAA,EAE7E,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,eAAe;AAAA,MACf,yBAAyB,KAAK,cAAc,cAAc,KAAK,cAAc;AAAA,MAC7E,2BAA2B,KAAK,cAAc,gBAAgB,KAAK,cAAc;AAAA,IACnF,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOR;AACF;AArBa,aACJ,SAAS;AAGa;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAJhB,aAIkB;",
+  "names": []
+}

package/dist/components/scroll-area/scroll-area.d.ts

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

package/dist/components/scroll-area/scroll-area.d.ts.map

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

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

package/dist/components/scroll-area/scroll-area.js.map

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

package/dist/components/scroll-area/scroll-area.styles.d.ts

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

package/dist/components/scroll-area/scroll-area.styles.d.ts.map

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

package/dist/components/scroll-area/scroll-area.styles.js

@@ -0,0 +1,69 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var scroll_area_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    --_scroll-area-scrollbar-width: var(--mz-scroll-area-scrollbar-width, 6px);
+    --_scroll-area-scrollbar-color: var(--mz-scroll-area-scrollbar-color, var(--mz-color-border));
+    --_scroll-area-scrollbar-track: var(--mz-scroll-area-scrollbar-track, transparent);
+
+    display: block;
+  }
+
+  .scroll-area {
+    height: var(--mz-scroll-area-height, auto);
+    max-height: inherit;
+    overflow: hidden;
+
+    /* Firefox scrollbar styling */
+    scrollbar-width: thin;
+    scrollbar-color: var(--_scroll-area-scrollbar-color) var(--_scroll-area-scrollbar-track);
+  }
+
+  .scroll-area--vertical {
+    overflow-y: auto;
+  }
+
+  .scroll-area--horizontal {
+    overflow-x: auto;
+  }
+
+  /* Webkit scrollbar styling (Chrome, Safari, Edge) */
+  .scroll-area::-webkit-scrollbar {
+    width: var(--_scroll-area-scrollbar-width);
+    height: var(--_scroll-area-scrollbar-width);
+  }
+
+  .scroll-area::-webkit-scrollbar-thumb {
+    background: var(--_scroll-area-scrollbar-color);
+    border-radius: var(--_scroll-area-scrollbar-width);
+  }
+
+  .scroll-area::-webkit-scrollbar-thumb:hover {
+    background: var(--mz-color-text-disabled);
+  }
+
+  .scroll-area::-webkit-scrollbar-track {
+    background: var(--_scroll-area-scrollbar-track);
+  }
+
+  .scroll-area::-webkit-scrollbar-corner {
+    background: var(--_scroll-area-scrollbar-track);
+  }
+
+  /* Focus ring */
+  .scroll-area:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+    outline-offset: -2px;
+    border-radius: var(--mz-radius-sm);
+  }
+
+  .scroll-area:focus:not(:focus-visible) {
+    outline: none;
+  }
+`;
+export {
+  scroll_area_styles_default as default
+};
+//# sourceMappingURL=scroll-area.styles.js.map

package/dist/components/scroll-area/scroll-area.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/scroll-area/scroll-area.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n  ${componentStyles}\n\n  :host {\n    --_scroll-area-scrollbar-width: var(--mz-scroll-area-scrollbar-width, 6px);\n    --_scroll-area-scrollbar-color: var(--mz-scroll-area-scrollbar-color, var(--mz-color-border));\n    --_scroll-area-scrollbar-track: var(--mz-scroll-area-scrollbar-track, transparent);\n\n    display: block;\n  }\n\n  .scroll-area {\n    height: var(--mz-scroll-area-height, auto);\n    max-height: inherit;\n    overflow: hidden;\n\n    /* Firefox scrollbar styling */\n    scrollbar-width: thin;\n    scrollbar-color: var(--_scroll-area-scrollbar-color) var(--_scroll-area-scrollbar-track);\n  }\n\n  .scroll-area--vertical {\n    overflow-y: auto;\n  }\n\n  .scroll-area--horizontal {\n    overflow-x: auto;\n  }\n\n  /* Webkit scrollbar styling (Chrome, Safari, Edge) */\n  .scroll-area::-webkit-scrollbar {\n    width: var(--_scroll-area-scrollbar-width);\n    height: var(--_scroll-area-scrollbar-width);\n  }\n\n  .scroll-area::-webkit-scrollbar-thumb {\n    background: var(--_scroll-area-scrollbar-color);\n    border-radius: var(--_scroll-area-scrollbar-width);\n  }\n\n  .scroll-area::-webkit-scrollbar-thumb:hover {\n    background: var(--mz-color-text-disabled);\n  }\n\n  .scroll-area::-webkit-scrollbar-track {\n    background: var(--_scroll-area-scrollbar-track);\n  }\n\n  .scroll-area::-webkit-scrollbar-corner {\n    background: var(--_scroll-area-scrollbar-track);\n  }\n\n  /* Focus ring */\n  .scroll-area:focus-visible {\n    outline: 2px solid color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n    outline-offset: -2px;\n    border-radius: var(--mz-radius-sm);\n  }\n\n  .scroll-area:focus:not(:focus-visible) {\n    outline: none;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,6BAAQ;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;",
+  "names": []
+}

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

@@ -0,0 +1,49 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A custom-styled range slider with single thumb.
+ *
+ * @tag mz-slider
+ *
+ * @event mz-input - Emitted continuously while dragging.
+ * @event mz-change - Emitted when the value settles (on mouseup/touchend).
+ *
+ * @csspart base - The container.
+ * @csspart track - The track line.
+ * @csspart fill - The filled portion of the track.
+ * @csspart thumb - The thumb/handle.
+ * @csspart input - The native range input (for accessibility).
+ * @csspart value-display - The value label.
+ *
+ * @cssproperty --mz-slider-track-height - Track height.
+ * @cssproperty --mz-slider-track-color - Unfilled track color.
+ * @cssproperty --mz-slider-fill-color - Filled portion color.
+ * @cssproperty --mz-slider-thumb-size - Thumb diameter.
+ * @cssproperty --mz-slider-thumb-color - Thumb color.
+ */
+export declare class MzSlider extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The current value. */
+    value: number;
+    /** The minimum value. */
+    min: number;
+    /** The maximum value. */
+    max: number;
+    /** The step increment. */
+    step: number;
+    /** Disables the slider. */
+    disabled: boolean;
+    /** An accessible label for the slider. */
+    label: string;
+    /** Whether to show the current value as a tooltip above the thumb. */
+    showValue: boolean;
+    /** The form field name. */
+    name: string;
+    /** The size of the slider. */
+    size: 'sm' | 'md' | 'lg';
+    /** Percentage of the current value within the range. */
+    private get percent();
+    private handleInput;
+    private handleChange;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=slider.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.component.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IAEvB,yBAAyB;IACG,KAAK,SAAM;IAEvC,yBAAyB;IACG,GAAG,SAAK;IAEpC,yBAAyB;IACG,GAAG,SAAO;IAEtC,0BAA0B;IACE,IAAI,SAAK;IAErC,2BAA2B;IACiB,QAAQ,UAAS;IAE7D,0CAA0C;IAC9B,KAAK,SAAM;IAEvB,sEAAsE;IAChB,SAAS,UAAS;IAExE,2BAA2B;IACf,IAAI,SAAM;IAEtB,8BAA8B;IACD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,wDAAwD;IACxD,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAIpB,MAAM;CAmDP"}