@manzanohq/components 0.1.1

package/dist/components/select/select.styles.js

@@ -0,0 +1,128 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import formControlStyles from "../../styles/form-control.styles.js";
+var select_styles_default = [
+  componentStyles,
+  formControlStyles,
+  css`
+    @layer base, sizes, states;
+
+    @layer base {
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .select__control-wrapper {
+        position: relative;
+      }
+
+      .select__trigger {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);
+        border-radius: var(--_radius, var(--mz-input-border-radius));
+        background: var(--mz-input-bg, var(--mz-color-surface));
+        color: var(--mz-color-text);
+        font-family: var(--mz-font-sans);
+        font-size: var(--_font-size);
+        line-height: var(--mz-line-height-normal);
+        height: var(--_height);
+        padding: 0 var(--_padding-inline);
+        cursor: pointer;
+        transition:
+          border-color var(--mz-transition-fast),
+          box-shadow var(--mz-transition-fast);
+        text-align: start;
+      }
+
+      .select__trigger:hover {
+        border-color: var(--mz-color-border-hover);
+      }
+
+      .select__trigger:focus-visible {
+        border-color: var(--mz-color-primary);
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+
+      .select__trigger--placeholder .select__display {
+        color: var(--mz-color-text-disabled);
+      }
+
+      .select__display {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .select__chevron {
+        flex-shrink: 0;
+        margin-inline-start: var(--mz-space-xs);
+        color: var(--mz-color-text-secondary);
+        transition: transform var(--mz-transition-fast);
+      }
+
+      .select__trigger--open .select__chevron {
+        transform: rotate(180deg);
+      }
+
+      .select__dropdown {
+        position: absolute;
+        z-index: 1000;
+        background: var(--mz-color-surface);
+        border: var(--mz-border-width-sm) solid var(--mz-color-border);
+        border-radius: var(--mz-radius-md);
+        box-shadow: var(--mz-shadow-lg);
+        padding: var(--mz-space-2xs);
+        overflow-y: auto;
+      }
+    }
+
+    @layer sizes {
+      :host([size='sm']) {
+        --_height: var(--mz-input-height-sm);
+        --_font-size: var(--mz-input-font-size-sm);
+        --_padding-inline: var(--mz-space-sm);
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_height: var(--mz-input-height-md);
+        --_font-size: var(--mz-input-font-size-md);
+        --_padding-inline: var(--mz-space-md);
+      }
+
+      :host([size='lg']) {
+        --_height: var(--mz-input-height-lg);
+        --_font-size: var(--mz-input-font-size-lg);
+        --_padding-inline: var(--mz-space-md);
+      }
+    }
+
+    @layer states {
+      :host([disabled]) .select__trigger {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([data-user-invalid]) .select__trigger {
+        border-color: var(--mz-color-danger);
+      }
+
+      :host([data-user-invalid]) .select__trigger:focus-visible {
+        --mz-focus-ring-color: var(--mz-color-danger);
+      }
+
+      :host([pill]) {
+        --_radius: var(--mz-radius-pill);
+      }
+    }
+  `
+];
+export {
+  select_styles_default as default
+};
+//# sourceMappingURL=select.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/select/select.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default [\n  componentStyles,\n  formControlStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      .select__control-wrapper {\n        position: relative;\n      }\n\n      .select__trigger {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);\n        border-radius: var(--_radius, var(--mz-input-border-radius));\n        background: var(--mz-input-bg, var(--mz-color-surface));\n        color: var(--mz-color-text);\n        font-family: var(--mz-font-sans);\n        font-size: var(--_font-size);\n        line-height: var(--mz-line-height-normal);\n        height: var(--_height);\n        padding: 0 var(--_padding-inline);\n        cursor: pointer;\n        transition:\n          border-color var(--mz-transition-fast),\n          box-shadow var(--mz-transition-fast);\n        text-align: start;\n      }\n\n      .select__trigger:hover {\n        border-color: var(--mz-color-border-hover);\n      }\n\n      .select__trigger:focus-visible {\n        border-color: var(--mz-color-primary);\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      .select__trigger--placeholder .select__display {\n        color: var(--mz-color-text-disabled);\n      }\n\n      .select__display {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .select__chevron {\n        flex-shrink: 0;\n        margin-inline-start: var(--mz-space-xs);\n        color: var(--mz-color-text-secondary);\n        transition: transform var(--mz-transition-fast);\n      }\n\n      .select__trigger--open .select__chevron {\n        transform: rotate(180deg);\n      }\n\n      .select__dropdown {\n        position: absolute;\n        z-index: 1000;\n        background: var(--mz-color-surface);\n        border: var(--mz-border-width-sm) solid var(--mz-color-border);\n        border-radius: var(--mz-radius-md);\n        box-shadow: var(--mz-shadow-lg);\n        padding: var(--mz-space-2xs);\n        overflow-y: auto;\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_height: var(--mz-input-height-sm);\n        --_font-size: var(--mz-input-font-size-sm);\n        --_padding-inline: var(--mz-space-sm);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_height: var(--mz-input-height-md);\n        --_font-size: var(--mz-input-font-size-md);\n        --_padding-inline: var(--mz-space-md);\n      }\n\n      :host([size='lg']) {\n        --_height: var(--mz-input-height-lg);\n        --_font-size: var(--mz-input-font-size-lg);\n        --_padding-inline: var(--mz-space-md);\n      }\n    }\n\n    @layer states {\n      :host([disabled]) .select__trigger {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      :host([data-user-invalid]) .select__trigger {\n        border-color: var(--mz-color-danger);\n      }\n\n      :host([data-user-invalid]) .select__trigger:focus-visible {\n        --mz-focus-ring-color: var(--mz-color-danger);\n      }\n\n      :host([pill]) {\n        --_radius: var(--mz-radius-pill);\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAC5B,OAAO,uBAAuB;AAE9B,IAAO,wBAAQ;AAAA,EACb;AAAA,EACA;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;AAAA;AAAA;AAqHF;",
+  "names": []
+}

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

@@ -0,0 +1,23 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A skeleton placeholder for loading states.
+ *
+ * @tag mz-skeleton
+ *
+ * @csspart base - The skeleton element.
+ *
+ * @cssproperty --mz-skeleton-width - The skeleton width.
+ * @cssproperty --mz-skeleton-height - The skeleton height.
+ * @cssproperty --mz-skeleton-radius - The skeleton border radius.
+ * @cssproperty --mz-skeleton-color - The skeleton background color.
+ * @cssproperty --mz-skeleton-sheen-color - The sheen highlight color.
+ */
+export declare class MzSkeleton extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The animation effect. */
+    effect: 'pulse' | 'sheen';
+    /** The skeleton shape. */
+    shape: 'rectangle' | 'circle';
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=skeleton.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.component.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;GAYG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC5C,MAAM,CAAC,MAAM,4BAAU;IAEvB,4BAA4B;IACC,MAAM,EAAE,OAAO,GAAG,OAAO,CAAW;IAEjE,0BAA0B;IACG,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAe;IAEzE,MAAM;CAKP"}

package/dist/components/skeleton/skeleton.component.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./skeleton.styles.js";
+class MzSkeleton extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "pulse";
+    this.shape = "rectangle";
+  }
+  render() {
+    return html`
+      <div part="base" class="skeleton" aria-hidden="true" aria-busy="true"></div>
+    `;
+  }
+}
+MzSkeleton.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], MzSkeleton.prototype, "effect", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzSkeleton.prototype, "shape", 2);
+export {
+  MzSkeleton
+};
+//# sourceMappingURL=skeleton.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/skeleton/skeleton.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './skeleton.styles.js';\n\n/**\n * @summary A skeleton placeholder for loading states.\n *\n * @tag mz-skeleton\n *\n * @csspart base - The skeleton element.\n *\n * @cssproperty --mz-skeleton-width - The skeleton width.\n * @cssproperty --mz-skeleton-height - The skeleton height.\n * @cssproperty --mz-skeleton-radius - The skeleton border radius.\n * @cssproperty --mz-skeleton-color - The skeleton background color.\n * @cssproperty --mz-skeleton-sheen-color - The sheen highlight color.\n */\nexport class MzSkeleton extends ManzanoElement {\n  static styles = styles;\n\n  /** The animation effect. */\n  @property({ reflect: true }) effect: 'pulse' | 'sheen' = 'pulse';\n\n  /** The skeleton shape. */\n  @property({ reflect: true }) shape: 'rectangle' | 'circle' = 'rectangle';\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"skeleton\" aria-hidden=\"true\" aria-busy=\"true\"></div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAeZ,MAAM,mBAAmB,eAAe;AAAA,EAAxC;AAAA;AAIwB,kBAA4B;AAG5B,iBAAgC;AAAA;AAAA,EAE7D,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AACF;AAda,WACJ,SAAS;AAGa;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAJhB,WAIkB;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPhB,WAOkB;",
+  "names": []
+}

package/dist/components/skeleton/skeleton.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,cAAc,yBAAyB,CAAC;AAIxC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/skeleton/skeleton.js

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

package/dist/components/skeleton/skeleton.js.map

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

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

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

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var skeleton_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      display: flex;
+      width: var(--mz-skeleton-width, 100%);
+      height: var(--mz-skeleton-height, 1em);
+      border-radius: var(--mz-skeleton-radius, var(--mz-radius-md));
+      background: var(--mz-skeleton-color, var(--mz-color-surface-raised));
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    :host([effect='sheen']) .skeleton {
+      background: linear-gradient(
+        90deg,
+        var(--mz-skeleton-color, var(--mz-color-surface-raised)) 25%,
+        var(--mz-skeleton-sheen-color, var(--mz-color-border)) 50%,
+        var(--mz-skeleton-color, var(--mz-color-surface-raised)) 75%
+      );
+      background-size: 200% 100%;
+      animation: sheen 1.5s ease-in-out infinite;
+    }
+
+    :host([shape='circle']) .skeleton {
+      width: var(--mz-skeleton-height, 3rem);
+      height: var(--mz-skeleton-height, 3rem);
+      border-radius: var(--mz-radius-circle);
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    @keyframes sheen {
+      from { background-position: 200% 0; }
+      to { background-position: -200% 0; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+  `
+];
+export {
+  skeleton_styles_default as default
+};
+//# sourceMappingURL=skeleton.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/skeleton/skeleton.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .skeleton {\n      display: flex;\n      width: var(--mz-skeleton-width, 100%);\n      height: var(--mz-skeleton-height, 1em);\n      border-radius: var(--mz-skeleton-radius, var(--mz-radius-md));\n      background: var(--mz-skeleton-color, var(--mz-color-surface-raised));\n      animation: pulse 2s ease-in-out infinite;\n    }\n\n    :host([effect='sheen']) .skeleton {\n      background: linear-gradient(\n        90deg,\n        var(--mz-skeleton-color, var(--mz-color-surface-raised)) 25%,\n        var(--mz-skeleton-sheen-color, var(--mz-color-border)) 50%,\n        var(--mz-skeleton-color, var(--mz-color-surface-raised)) 75%\n      );\n      background-size: 200% 100%;\n      animation: sheen 1.5s ease-in-out infinite;\n    }\n\n    :host([shape='circle']) .skeleton {\n      width: var(--mz-skeleton-height, 3rem);\n      height: var(--mz-skeleton-height, 3rem);\n      border-radius: var(--mz-radius-circle);\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    @keyframes sheen {\n      from { background-position: 200% 0; }\n      to { background-position: -200% 0; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .skeleton {\n        animation: none;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,0BAAQ;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;AA+CF;",
+  "names": []
+}

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

@@ -0,0 +1,21 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+import '../../translations/en.js';
+/**
+ * @summary A loading spinner indicator.
+ *
+ * @tag mz-spinner
+ *
+ * @csspart base - The spinner's base wrapper.
+ *
+ * @cssproperty --mz-spinner-size - The size of the spinner.
+ * @cssproperty --mz-spinner-track-width - The width of the spinner track.
+ * @cssproperty --mz-spinner-track-color - The color of the spinner track.
+ * @cssproperty --mz-spinner-indicator-color - The color of the spinner indicator.
+ * @cssproperty --mz-spinner-speed - The animation speed.
+ */
+export declare class MzSpinner extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private readonly localize;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=spinner.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.component.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBAAa,SAAU,SAAQ,cAAc;IAC3C,MAAM,CAAC,MAAM,4BAAU;IAEvB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,MAAM;CAiBP"}

package/dist/components/spinner/spinner.component.js

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { LocalizeController } from "@shoelace-style/localize";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./spinner.styles.js";
+import "../../translations/en.js";
+class MzSpinner extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    let label = "Loading";
+    try {
+      label = this.localize.term("loading") || "Loading";
+    } catch {
+    }
+    return html`
+      <div
+        part="base"
+        class="spinner"
+        role="progressbar"
+        aria-label=${label}
+      ></div>
+    `;
+  }
+}
+MzSpinner.styles = styles;
+export {
+  MzSpinner
+};
+//# sourceMappingURL=spinner.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/spinner/spinner.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { LocalizeController } from '@shoelace-style/localize';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './spinner.styles.js';\n\n// Ensure English translations are registered\nimport '../../translations/en.js';\n\n/**\n * @summary A loading spinner indicator.\n *\n * @tag mz-spinner\n *\n * @csspart base - The spinner's base wrapper.\n *\n * @cssproperty --mz-spinner-size - The size of the spinner.\n * @cssproperty --mz-spinner-track-width - The width of the spinner track.\n * @cssproperty --mz-spinner-track-color - The color of the spinner track.\n * @cssproperty --mz-spinner-indicator-color - The color of the spinner indicator.\n * @cssproperty --mz-spinner-speed - The animation speed.\n */\nexport class MzSpinner extends ManzanoElement {\n  static styles = styles;\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    let label = 'Loading';\n    try {\n      label = this.localize.term('loading') || 'Loading';\n    } catch {\n      // Fallback if localization fails (e.g., invalid language tag)\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"spinner\"\n        role=\"progressbar\"\n        aria-label=${label}\n      ></div>\n    `;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAGnB,OAAO;AAeA,MAAM,kBAAkB,eAAe;AAAA,EAAvC;AAAA;AAGL,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAAA;AAAA,EAEvD,SAAS;AACP,QAAI,QAAQ;AACZ,QAAI;AACF,cAAQ,KAAK,SAAS,KAAK,SAAS,KAAK;AAAA,IAC3C,QAAQ;AAAA,IAER;AAEA,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK;AAAA;AAAA;AAAA,EAGxB;AACF;AAtBa,UACJ,SAAS;",
+  "names": []
+}

package/dist/components/spinner/spinner.d.ts

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

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

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

package/dist/components/spinner/spinner.js

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

package/dist/components/spinner/spinner.js.map

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

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

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

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

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

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,42 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var spinner_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      --_size: var(--mz-spinner-size, 1em);
+      --_track-width: var(--mz-spinner-track-width, 2px);
+      --_track-color: var(--mz-spinner-track-color, var(--mz-color-border, #e5e7eb));
+      --_indicator-color: var(--mz-spinner-indicator-color, var(--mz-color-primary, #2563eb));
+      --_speed: var(--mz-spinner-speed, 750ms);
+
+      display: inline-flex;
+      width: var(--_size);
+      height: var(--_size);
+      flex: none;
+    }
+
+    .spinner {
+      flex: 1 1 auto;
+      border-radius: var(--mz-radius-circle, 50%);
+      border: solid var(--_track-width) var(--_track-color);
+      border-block-start-color: var(--_indicator-color);
+      animation: spin var(--_speed) linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 1500ms;
+      }
+    }
+  `
+];
+export {
+  spinner_styles_default as default
+};
+//# sourceMappingURL=spinner.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/spinner/spinner.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      --_size: var(--mz-spinner-size, 1em);\n      --_track-width: var(--mz-spinner-track-width, 2px);\n      --_track-color: var(--mz-spinner-track-color, var(--mz-color-border, #e5e7eb));\n      --_indicator-color: var(--mz-spinner-indicator-color, var(--mz-color-primary, #2563eb));\n      --_speed: var(--mz-spinner-speed, 750ms);\n\n      display: inline-flex;\n      width: var(--_size);\n      height: var(--_size);\n      flex: none;\n    }\n\n    .spinner {\n      flex: 1 1 auto;\n      border-radius: var(--mz-radius-circle, 50%);\n      border: solid var(--_track-width) var(--_track-color);\n      border-block-start-color: var(--_indicator-color);\n      animation: spin var(--_speed) linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .spinner {\n        animation-duration: 1500ms;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,yBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCF;",
+  "names": []
+}

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

@@ -0,0 +1,45 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A toggle switch.
+ *
+ * @tag mz-switch
+ *
+ * @slot - The switch label.
+ *
+ * @event mz-change - Emitted when the checked state changes.
+ * @event mz-focus - Emitted when the switch gains focus.
+ * @event mz-blur - Emitted when the switch loses focus.
+ *
+ * @csspart base - The switch wrapper.
+ * @csspart track - The switch track.
+ * @csspart thumb - The switch thumb.
+ * @csspart label - The label text.
+ *
+ * @cssproperty --mz-switch-color - Override the active track color.
+ */
+export declare class MzSwitch extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private inputEl;
+    /** The switch's name for form participation. */
+    name: string;
+    /** The value submitted with the form when checked. */
+    value: string;
+    /** The switch's size. */
+    size: 'sm' | 'md' | 'lg';
+    /** Whether the switch is checked. */
+    checked: boolean;
+    /** Disables the switch. */
+    disabled: boolean;
+    /** Makes the switch required. */
+    required: boolean;
+    /** Sets focus on the switch. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the switch. */
+    blur(): void;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=switch.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.component.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IACvB,MAAM,CAAC,cAAc,UAAQ;IAEJ,OAAO,CAAC,OAAO,CAAoB;IAE5D,gDAAgD;IACpC,IAAI,SAAM;IAEtB,sDAAsD;IAC1C,KAAK,SAAQ;IAEzB,yBAAyB;IACI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,qCAAqC;IACO,OAAO,UAAS;IAE5D,2BAA2B;IACiB,QAAQ,UAAS;IAE7D,iCAAiC;IACW,QAAQ,UAAS;IAE7D,gCAAgC;IAChC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,qCAAqC;IACrC,IAAI,IAAI,IAAI;IAIZ,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,MAAM;CA+BP"}

package/dist/components/switch/switch.component.js

@@ -0,0 +1,101 @@
+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 { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./switch.styles.js";
+class MzSwitch extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.value = "on";
+    this.size = "md";
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.inputEl?.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.inputEl?.blur();
+  }
+  handleChange() {
+    this.checked = this.inputEl.checked;
+    this.emit("mz-change");
+  }
+  handleFocus() {
+    this.emit("mz-focus");
+  }
+  handleBlur() {
+    this.emit("mz-blur");
+  }
+  render() {
+    const trackClasses = {
+      switch__track: true,
+      "switch__track--checked": this.checked
+    };
+    return html`
+      <label part="base" class="switch">
+        <input
+          class="switch__input"
+          type="checkbox"
+          role="switch"
+          name=${this.name}
+          value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-checked=${this.checked}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <span part="track" class=${classMap(trackClasses)}>
+          <span part="thumb" class="switch__thumb"></span>
+        </span>
+        <span part="label" class="switch__label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+}
+MzSwitch.styles = styles;
+MzSwitch.formAssociated = true;
+__decorateClass([
+  query(".switch__input")
+], MzSwitch.prototype, "inputEl", 2);
+__decorateClass([
+  property()
+], MzSwitch.prototype, "name", 2);
+__decorateClass([
+  property()
+], MzSwitch.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzSwitch.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzSwitch.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzSwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzSwitch.prototype, "required", 2);
+export {
+  MzSwitch
+};
+//# sourceMappingURL=switch.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/switch/switch.component.ts"],
+  "sourcesContent": ["import { html } 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 styles from './switch.styles.js';\n\n/**\n * @summary A toggle switch.\n *\n * @tag mz-switch\n *\n * @slot - The switch label.\n *\n * @event mz-change - Emitted when the checked state changes.\n * @event mz-focus - Emitted when the switch gains focus.\n * @event mz-blur - Emitted when the switch loses focus.\n *\n * @csspart base - The switch wrapper.\n * @csspart track - The switch track.\n * @csspart thumb - The switch thumb.\n * @csspart label - The label text.\n *\n * @cssproperty --mz-switch-color - Override the active track color.\n */\nexport class MzSwitch extends ManzanoElement {\n  static styles = styles;\n  static formAssociated = true;\n\n  @query('.switch__input') private inputEl!: HTMLInputElement;\n\n  /** The switch's name for form participation. */\n  @property() name = '';\n\n  /** The value submitted with the form when checked. */\n  @property() value = 'on';\n\n  /** The switch's size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Whether the switch is checked. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the switch required. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Sets focus on the switch. */\n  focus(options?: FocusOptions): void {\n    this.inputEl?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  blur(): void {\n    this.inputEl?.blur();\n  }\n\n  private handleChange(): void {\n    this.checked = this.inputEl.checked;\n    this.emit('mz-change');\n  }\n\n  private handleFocus(): void {\n    this.emit('mz-focus');\n  }\n\n  private handleBlur(): void {\n    this.emit('mz-blur');\n  }\n\n  render() {\n    const trackClasses = {\n      switch__track: true,\n      'switch__track--checked': this.checked\n    };\n\n    return html`\n      <label part=\"base\" class=\"switch\">\n        <input\n          class=\"switch__input\"\n          type=\"checkbox\"\n          role=\"switch\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-checked=${this.checked}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <span part=\"track\" class=${classMap(trackClasses)}>\n          <span part=\"thumb\" class=\"switch__thumb\"></span>\n        </span>\n        <span part=\"label\" class=\"switch__label\">\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AAChC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAoBZ,MAAM,iBAAiB,eAAe;AAAA,EAAtC;AAAA;AAOO,gBAAO;AAGP,iBAAQ;AAGS,gBAA2B;AAGZ,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAAA;AAAA;AAAA,EAGvD,MAAM,SAA8B;AAClC,SAAK,SAAS,MAAM,OAAO;AAAA,EAC7B;AAAA;AAAA,EAGA,OAAa;AACX,SAAK,SAAS,KAAK;AAAA,EACrB;AAAA,EAEQ,eAAqB;AAC3B,SAAK,UAAU,KAAK,QAAQ;AAC5B,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAoB;AAC1B,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,aAAmB;AACzB,SAAK,KAAK,SAAS;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,UAAM,eAAe;AAAA,MACnB,eAAe;AAAA,MACf,0BAA0B,KAAK;AAAA,IACjC;AAEA,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMM,KAAK,IAAI;AAAA,kBACR,KAAK,KAAK;AAAA,qBACP,KAAK,OAAO;AAAA,sBACX,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,yBACV,KAAK,OAAO;AAAA,oBACjB,KAAK,YAAY;AAAA,mBAClB,KAAK,WAAW;AAAA,kBACjB,KAAK,UAAU;AAAA;AAAA,mCAEE,SAAS,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvD;AACF;AA9Ea,SACJ,SAAS;AADL,SAEJ,iBAAiB;AAES;AAAA,EAAhC,MAAM,gBAAgB;AAAA,GAJZ,SAIsB;AAGrB;AAAA,EAAX,SAAS;AAAA,GAPC,SAOC;AAGA;AAAA,EAAX,SAAS;AAAA,GAVC,SAUC;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAbhB,SAakB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhB/B,SAgBiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnB/B,SAmBiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAtB/B,SAsBiC;",
+  "names": []
+}