@manzanohq/components 0.1.1 → 0.1.4

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

@@ -0,0 +1,33 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A circular progress indicator using SVG.
+ *
+ * @slot - Content to display in the center of the ring (overrides showValue text).
+ *
+ * @csspart base - The SVG container.
+ * @csspart track - The background circle.
+ * @csspart indicator - The progress arc.
+ * @csspart label - The center text/content container.
+ *
+ * @cssproperty --mz-progress-ring-indicator-color - Color of the progress indicator.
+ * @cssproperty --mz-progress-ring-track-color - Color of the background track.
+ * @cssproperty --mz-progress-ring-size - Override size via CSS.
+ * @cssproperty --mz-progress-ring-stroke-width - Override stroke width via CSS.
+ */
+export declare class MzProgressRing extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** Current progress value (0-100). */
+    value: number;
+    /** Diameter of the ring in pixels. */
+    size: number;
+    /** Stroke width of the ring in pixels. */
+    strokeWidth: number;
+    /** Accessible label for screen readers. */
+    label: string;
+    /** Whether to show the percentage text in the center. */
+    showValue: boolean;
+    /** Whether to show the indeterminate (spinning) state. */
+    indeterminate: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=progress-ring.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-ring.component.d.ts","sourceRoot":"","sources":["../../../src/components/progress-ring/progress-ring.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;GAcG;AACH,qBAAa,cAAe,SAAQ,cAAc;IAChD,MAAM,CAAC,MAAM,0BAAU;IAEvB,sCAAsC;IACV,KAAK,SAAK;IAEtC,sCAAsC;IACV,IAAI,SAAM;IAEtC,0CAA0C;IACa,WAAW,SAAK;IAEvE,2CAA2C;IAC/B,KAAK,SAAc;IAE/B,yDAAyD;IACH,SAAS,UAAS;IAExE,0DAA0D;IACd,aAAa,UAAS;IAElE,MAAM;CA4DP"}

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

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./progress-ring.styles.js";
+class MzProgressRing extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.size = 64;
+    this.strokeWidth = 4;
+    this.label = "Progress";
+    this.showValue = false;
+    this.indeterminate = false;
+  }
+  render() {
+    const radius = (this.size - this.strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clampedValue = Math.max(0, Math.min(100, this.value));
+    const offset = circumference - clampedValue / 100 * circumference;
+    const center = this.size / 2;
+    return html`
+      <div
+        class=${classMap({
+      "progress-ring": true,
+      "progress-ring--indeterminate": this.indeterminate
+    })}
+        role="progressbar"
+        aria-label=${this.label}
+        aria-valuenow=${this.indeterminate ? nothing : clampedValue}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        style=${styleMap({
+      width: `${this.size}px`,
+      height: `${this.size}px`
+    })}
+      >
+        <svg
+          width=${this.size}
+          height=${this.size}
+          viewBox="0 0 ${this.size} ${this.size}"
+          part="base"
+        >
+          <circle
+            class="progress-ring__track"
+            part="track"
+            cx=${center}
+            cy=${center}
+            r=${radius}
+            stroke-width=${this.strokeWidth}
+          ></circle>
+          <circle
+            class="progress-ring__indicator"
+            part="indicator"
+            cx=${center}
+            cy=${center}
+            r=${radius}
+            stroke-width=${this.strokeWidth}
+            stroke-dasharray=${circumference}
+            stroke-dashoffset=${this.indeterminate ? circumference * 0.75 : offset}
+            transform="rotate(-90 ${center} ${center})"
+          ></circle>
+        </svg>
+        <div class="progress-ring__label" part="label">
+          <slot>
+            ${this.showValue && !this.indeterminate ? html`<span class="progress-ring__value">${Math.round(clampedValue)}%</span>` : nothing}
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}
+MzProgressRing.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzProgressRing.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], MzProgressRing.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number, attribute: "stroke-width" })
+], MzProgressRing.prototype, "strokeWidth", 2);
+__decorateClass([
+  property()
+], MzProgressRing.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-value" })
+], MzProgressRing.prototype, "showValue", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzProgressRing.prototype, "indeterminate", 2);
+export {
+  MzProgressRing
+};
+//# sourceMappingURL=progress-ring.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/progress-ring/progress-ring.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './progress-ring.styles.js';\n\n/**\n * @summary A circular progress indicator using SVG.\n *\n * @slot - Content to display in the center of the ring (overrides showValue text).\n *\n * @csspart base - The SVG container.\n * @csspart track - The background circle.\n * @csspart indicator - The progress arc.\n * @csspart label - The center text/content container.\n *\n * @cssproperty --mz-progress-ring-indicator-color - Color of the progress indicator.\n * @cssproperty --mz-progress-ring-track-color - Color of the background track.\n * @cssproperty --mz-progress-ring-size - Override size via CSS.\n * @cssproperty --mz-progress-ring-stroke-width - Override stroke width via CSS.\n */\nexport class MzProgressRing extends ManzanoElement {\n  static styles = styles;\n\n  /** Current progress value (0-100). */\n  @property({ type: Number }) value = 0;\n\n  /** Diameter of the ring in pixels. */\n  @property({ type: Number }) size = 64;\n\n  /** Stroke width of the ring in pixels. */\n  @property({ type: Number, attribute: 'stroke-width' }) strokeWidth = 4;\n\n  /** Accessible label for screen readers. */\n  @property() label = 'Progress';\n\n  /** Whether to show the percentage text in the center. */\n  @property({ type: Boolean, attribute: 'show-value' }) showValue = false;\n\n  /** Whether to show the indeterminate (spinning) state. */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  render() {\n    const radius = (this.size - this.strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const clampedValue = Math.max(0, Math.min(100, this.value));\n    const offset = circumference - (clampedValue / 100) * circumference;\n    const center = this.size / 2;\n\n    return html`\n      <div\n        class=${classMap({\n          'progress-ring': true,\n          'progress-ring--indeterminate': this.indeterminate\n        })}\n        role=\"progressbar\"\n        aria-label=${this.label}\n        aria-valuenow=${this.indeterminate ? nothing : clampedValue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        style=${styleMap({\n          width: `${this.size}px`,\n          height: `${this.size}px`\n        })}\n      >\n        <svg\n          width=${this.size}\n          height=${this.size}\n          viewBox=\"0 0 ${this.size} ${this.size}\"\n          part=\"base\"\n        >\n          <circle\n            class=\"progress-ring__track\"\n            part=\"track\"\n            cx=${center}\n            cy=${center}\n            r=${radius}\n            stroke-width=${this.strokeWidth}\n          ></circle>\n          <circle\n            class=\"progress-ring__indicator\"\n            part=\"indicator\"\n            cx=${center}\n            cy=${center}\n            r=${radius}\n            stroke-width=${this.strokeWidth}\n            stroke-dasharray=${circumference}\n            stroke-dashoffset=${this.indeterminate ? circumference * 0.75 : offset}\n            transform=\"rotate(-90 ${center} ${center})\"\n          ></circle>\n        </svg>\n        <div class=\"progress-ring__label\" part=\"label\">\n          <slot>\n            ${this.showValue && !this.indeterminate\n              ? html`<span class=\"progress-ring__value\">${Math.round(clampedValue)}%</span>`\n              : nothing\n            }\n          </slot>\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;AAiBZ,MAAM,uBAAuB,eAAe;AAAA,EAA5C;AAAA;AAIuB,iBAAQ;AAGR,gBAAO;AAGoB,uBAAc;AAGzD,iBAAQ;AAGkC,qBAAY;AAGtB,yBAAgB;AAAA;AAAA,EAE5D,SAAS;AACP,UAAM,UAAU,KAAK,OAAO,KAAK,eAAe;AAChD,UAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,UAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC;AAC1D,UAAM,SAAS,gBAAiB,eAAe,MAAO;AACtD,UAAM,SAAS,KAAK,OAAO;AAE3B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,iBAAiB;AAAA,MACjB,gCAAgC,KAAK;AAAA,IACvC,CAAC,CAAC;AAAA;AAAA,qBAEW,KAAK,KAAK;AAAA,wBACP,KAAK,gBAAgB,UAAU,YAAY;AAAA;AAAA;AAAA,gBAGnD,SAAS;AAAA,MACf,OAAO,GAAG,KAAK,IAAI;AAAA,MACnB,QAAQ,GAAG,KAAK,IAAI;AAAA,IACtB,CAAC,CAAC;AAAA;AAAA;AAAA,kBAGQ,KAAK,IAAI;AAAA,mBACR,KAAK,IAAI;AAAA,yBACH,KAAK,IAAI,IAAI,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM9B,MAAM;AAAA,iBACN,MAAM;AAAA,gBACP,MAAM;AAAA,2BACK,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK1B,MAAM;AAAA,iBACN,MAAM;AAAA,gBACP,MAAM;AAAA,2BACK,KAAK,WAAW;AAAA,+BACZ,aAAa;AAAA,gCACZ,KAAK,gBAAgB,gBAAgB,OAAO,MAAM;AAAA,oCAC9C,MAAM,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,cAKtC,KAAK,aAAa,CAAC,KAAK,gBACtB,0CAA0C,KAAK,MAAM,YAAY,CAAC,aAClE,OACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV;AACF;AAjFa,eACJ,SAAS;AAGY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJf,eAIiB;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPf,eAOiB;AAG2B;AAAA,EAAtD,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAV1C,eAU4C;AAG3C;AAAA,EAAX,SAAS;AAAA,GAbC,eAaC;AAG0C;AAAA,EAArD,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa,CAAC;AAAA,GAhBzC,eAgB2C;AAGV;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnB/B,eAmBiC;",
+  "names": []
+}

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

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

package/dist/components/progress-ring/progress-ring.d.ts.map

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

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

package/dist/components/progress-ring/progress-ring.js.map

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

package/dist/components/progress-ring/progress-ring.styles.d.ts

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

package/dist/components/progress-ring/progress-ring.styles.d.ts.map

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

package/dist/components/progress-ring/progress-ring.styles.js

@@ -0,0 +1,71 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var progress_ring_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    --_ring-indicator-color: var(--mz-progress-ring-indicator-color, var(--mz-color-primary));
+    --_ring-track-color: var(--mz-progress-ring-track-color, var(--mz-color-border));
+
+    display: inline-flex;
+  }
+
+  .progress-ring {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  svg {
+    display: block;
+    transform-origin: center;
+  }
+
+  .progress-ring__track {
+    fill: none;
+    stroke: var(--_ring-track-color);
+  }
+
+  .progress-ring__indicator {
+    fill: none;
+    stroke: var(--_ring-indicator-color);
+    stroke-linecap: round;
+    transition: stroke-dashoffset 300ms ease;
+  }
+
+  .progress-ring__label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--mz-font-sans);
+    font-size: var(--mz-font-size-xs);
+    font-weight: var(--mz-font-weight-semibold, 600);
+    color: var(--mz-color-text);
+    user-select: none;
+  }
+
+  .progress-ring__value {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Indeterminate animation */
+  .progress-ring--indeterminate svg {
+    animation: progress-ring-spin 1.5s linear infinite;
+  }
+
+  @keyframes progress-ring-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+export {
+  progress_ring_styles_default as default
+};
+//# sourceMappingURL=progress-ring.styles.js.map

package/dist/components/progress-ring/progress-ring.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/progress-ring/progress-ring.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n  ${componentStyles}\n\n  :host {\n    --_ring-indicator-color: var(--mz-progress-ring-indicator-color, var(--mz-color-primary));\n    --_ring-track-color: var(--mz-progress-ring-track-color, var(--mz-color-border));\n\n    display: inline-flex;\n  }\n\n  .progress-ring {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  svg {\n    display: block;\n    transform-origin: center;\n  }\n\n  .progress-ring__track {\n    fill: none;\n    stroke: var(--_ring-track-color);\n  }\n\n  .progress-ring__indicator {\n    fill: none;\n    stroke: var(--_ring-indicator-color);\n    stroke-linecap: round;\n    transition: stroke-dashoffset 300ms ease;\n  }\n\n  .progress-ring__label {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--mz-font-sans);\n    font-size: var(--mz-font-size-xs);\n    font-weight: var(--mz-font-weight-semibold, 600);\n    color: var(--mz-color-text);\n    user-select: none;\n  }\n\n  .progress-ring__value {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* Indeterminate animation */\n  .progress-ring--indeterminate svg {\n    animation: progress-ring-spin 1.5s linear infinite;\n  }\n\n  @keyframes progress-ring-spin {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,+BAAQ;AAAA,IACX,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/qr-code/qr-code.component.d.ts

@@ -0,0 +1,29 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+import { type ErrorCorrectionLevel } from './qr-encoder.js';
+/**
+ * @summary Generates and renders a QR code as an SVG from a value string.
+ *
+ * @tag mz-qr-code
+ *
+ * @csspart svg - The SVG element.
+ * @csspart empty - The empty-state container shown when no value is set.
+ *
+ * @cssproperty --mz-qr-code-size - Override the rendered size.
+ */
+export declare class MzQrCode extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The text or URL to encode as a QR code. */
+    value: string;
+    /** Pixel size of the QR code. */
+    size: number;
+    /** Foreground (module) color. */
+    foreground: string;
+    /** Background color. */
+    background: string;
+    /** Error correction level. */
+    errorCorrection: ErrorCorrectionLevel;
+    /** Border radius of individual modules (0-0.5). For rounded QR codes. */
+    radius: number;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=qr-code.component.d.ts.map

package/dist/components/qr-code/qr-code.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.component.d.ts","sourceRoot":"","sources":["../../../src/components/qr-code/qr-code.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGxE;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IAEvB,8CAA8C;IAClC,KAAK,SAAM;IAEvB,iCAAiC;IACL,IAAI,SAAO;IAEvC,iCAAiC;IACrB,UAAU,SAAkB;IAExC,wBAAwB;IACZ,UAAU,SAAiB;IAEvC,8BAA8B;IACe,eAAe,EAAE,oBAAoB,CAAO;IAEzF,yEAAyE;IAC7C,MAAM,SAAK;IAEvC,MAAM;CA6CP"}

package/dist/components/qr-code/qr-code.component.js

@@ -0,0 +1,85 @@
+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, svg } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { generateQR } from "./qr-encoder.js";
+import styles from "./qr-code.styles.js";
+class MzQrCode extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.size = 200;
+    this.foreground = "currentColor";
+    this.background = "transparent";
+    this.errorCorrection = "M";
+    this.radius = 0;
+  }
+  render() {
+    if (!this.value) {
+      return html`<div class="qr-code__empty" part="empty" style="width:${this.size}px;height:${this.size}px">No value</div>`;
+    }
+    let matrix;
+    try {
+      matrix = generateQR(this.value, this.errorCorrection);
+    } catch {
+      return html`<div class="qr-code__empty" part="empty" style="width:${this.size}px;height:${this.size}px">Error</div>`;
+    }
+    if (!matrix.length) {
+      return html`<div class="qr-code__empty" part="empty" style="width:${this.size}px;height:${this.size}px">No value</div>`;
+    }
+    const moduleCount = matrix.length;
+    const rects = [];
+    for (let y = 0; y < moduleCount; y++) {
+      for (let x = 0; x < moduleCount; x++) {
+        if (matrix[y][x]) {
+          rects.push(
+            this.radius > 0 ? svg`<rect x=${x} y=${y} width="1" height="1" fill=${this.foreground} rx=${this.radius} ry=${this.radius} />` : svg`<rect x=${x} y=${y} width="1" height="1" fill=${this.foreground} />`
+          );
+        }
+      }
+    }
+    return html`
+      <svg part="svg"
+        width=${this.size} height=${this.size}
+        viewBox="0 0 ${moduleCount} ${moduleCount}"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label="QR code: ${this.value}">
+        ${this.background !== "transparent" ? svg`<rect width=${moduleCount} height=${moduleCount} fill=${this.background} />` : nothing}
+        ${rects}
+      </svg>
+    `;
+  }
+}
+MzQrCode.styles = styles;
+__decorateClass([
+  property()
+], MzQrCode.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], MzQrCode.prototype, "size", 2);
+__decorateClass([
+  property()
+], MzQrCode.prototype, "foreground", 2);
+__decorateClass([
+  property()
+], MzQrCode.prototype, "background", 2);
+__decorateClass([
+  property({ attribute: "error-correction" })
+], MzQrCode.prototype, "errorCorrection", 2);
+__decorateClass([
+  property({ type: Number })
+], MzQrCode.prototype, "radius", 2);
+export {
+  MzQrCode
+};
+//# sourceMappingURL=qr-code.component.js.map

package/dist/components/qr-code/qr-code.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/qr-code/qr-code.component.ts"],
+  "sourcesContent": ["import { html, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { generateQR, type ErrorCorrectionLevel } from './qr-encoder.js';\nimport styles from './qr-code.styles.js';\n\n/**\n * @summary Generates and renders a QR code as an SVG from a value string.\n *\n * @tag mz-qr-code\n *\n * @csspart svg - The SVG element.\n * @csspart empty - The empty-state container shown when no value is set.\n *\n * @cssproperty --mz-qr-code-size - Override the rendered size.\n */\nexport class MzQrCode extends ManzanoElement {\n  static styles = styles;\n\n  /** The text or URL to encode as a QR code. */\n  @property() value = '';\n\n  /** Pixel size of the QR code. */\n  @property({ type: Number }) size = 200;\n\n  /** Foreground (module) color. */\n  @property() foreground = 'currentColor';\n\n  /** Background color. */\n  @property() background = 'transparent';\n\n  /** Error correction level. */\n  @property({ attribute: 'error-correction' }) errorCorrection: ErrorCorrectionLevel = 'M';\n\n  /** Border radius of individual modules (0-0.5). For rounded QR codes. */\n  @property({ type: Number }) radius = 0;\n\n  render() {\n    if (!this.value) {\n      return html`<div class=\"qr-code__empty\" part=\"empty\" style=\"width:${this.size}px;height:${this.size}px\">No value</div>`;\n    }\n\n    let matrix: boolean[][];\n    try {\n      matrix = generateQR(this.value, this.errorCorrection);\n    } catch {\n      return html`<div class=\"qr-code__empty\" part=\"empty\" style=\"width:${this.size}px;height:${this.size}px\">Error</div>`;\n    }\n\n    if (!matrix.length) {\n      return html`<div class=\"qr-code__empty\" part=\"empty\" style=\"width:${this.size}px;height:${this.size}px\">No value</div>`;\n    }\n\n    const moduleCount = matrix.length;\n\n    const rects = [];\n    for (let y = 0; y < moduleCount; y++) {\n      for (let x = 0; x < moduleCount; x++) {\n        if (matrix[y][x]) {\n          rects.push(\n            this.radius > 0\n              ? svg`<rect x=${x} y=${y} width=\"1\" height=\"1\" fill=${this.foreground} rx=${this.radius} ry=${this.radius} />`\n              : svg`<rect x=${x} y=${y} width=\"1\" height=\"1\" fill=${this.foreground} />`\n          );\n        }\n      }\n    }\n\n    return html`\n      <svg part=\"svg\"\n        width=${this.size} height=${this.size}\n        viewBox=\"0 0 ${moduleCount} ${moduleCount}\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=\"img\"\n        aria-label=\"QR code: ${this.value}\">\n        ${this.background !== 'transparent'\n          ? svg`<rect width=${moduleCount} height=${moduleCount} fill=${this.background} />`\n          : nothing}\n        ${rects}\n      </svg>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,SAAS,WAAW;AACnC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,kBAA6C;AACtD,OAAO,YAAY;AAYZ,MAAM,iBAAiB,eAAe;AAAA,EAAtC;AAAA;AAIO,iBAAQ;AAGQ,gBAAO;AAGvB,sBAAa;AAGb,sBAAa;AAGoB,2BAAwC;AAGzD,kBAAS;AAAA;AAAA,EAErC,SAAS;AACP,QAAI,CAAC,KAAK,OAAO;AACf,aAAO,6DAA6D,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,IACrG;AAEA,QAAI;AACJ,QAAI;AACF,eAAS,WAAW,KAAK,OAAO,KAAK,eAAe;AAAA,IACtD,QAAQ;AACN,aAAO,6DAA6D,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,IACrG;AAEA,QAAI,CAAC,OAAO,QAAQ;AAClB,aAAO,6DAA6D,KAAK,IAAI,aAAa,KAAK,IAAI;AAAA,IACrG;AAEA,UAAM,cAAc,OAAO;AAE3B,UAAM,QAAQ,CAAC;AACf,aAAS,IAAI,GAAG,IAAI,aAAa,KAAK;AACpC,eAAS,IAAI,GAAG,IAAI,aAAa,KAAK;AACpC,YAAI,OAAO,CAAC,EAAE,CAAC,GAAG;AAChB,gBAAM;AAAA,YACJ,KAAK,SAAS,IACV,cAAc,CAAC,MAAM,CAAC,8BAA8B,KAAK,UAAU,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,QACvG,cAAc,CAAC,MAAM,CAAC,8BAA8B,KAAK,UAAU;AAAA,UACzE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA;AAAA,gBAEK,KAAK,IAAI,WAAW,KAAK,IAAI;AAAA,uBACtB,WAAW,IAAI,WAAW;AAAA;AAAA;AAAA,+BAGlB,KAAK,KAAK;AAAA,UAC/B,KAAK,eAAe,gBAClB,kBAAkB,WAAW,WAAW,WAAW,SAAS,KAAK,UAAU,QAC3E,OAAO;AAAA,UACT,KAAK;AAAA;AAAA;AAAA,EAGb;AACF;AAlEa,SACJ,SAAS;AAGJ;AAAA,EAAX,SAAS;AAAA,GAJC,SAIC;AAGgB;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPf,SAOiB;AAGhB;AAAA,EAAX,SAAS;AAAA,GAVC,SAUC;AAGA;AAAA,EAAX,SAAS;AAAA,GAbC,SAaC;AAGiC;AAAA,EAA5C,SAAS,EAAE,WAAW,mBAAmB,CAAC;AAAA,GAhBhC,SAgBkC;AAGjB;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnBf,SAmBiB;",
+  "names": []
+}

package/dist/components/qr-code/qr-code.d.ts

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

package/dist/components/qr-code/qr-code.d.ts.map

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

package/dist/components/qr-code/qr-code.js

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

package/dist/components/qr-code/qr-code.js.map

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

package/dist/components/qr-code/qr-code.styles.d.ts

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

package/dist/components/qr-code/qr-code.styles.d.ts.map

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

package/dist/components/qr-code/qr-code.styles.js

@@ -0,0 +1,28 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var qr_code_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-block;
+      line-height: 0;
+    }
+
+    svg {
+      display: block;
+    }
+
+    .qr-code__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text-secondary);
+    }
+  `
+];
+export {
+  qr_code_styles_default as default
+};
+//# sourceMappingURL=qr-code.styles.js.map

package/dist/components/qr-code/qr-code.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/qr-code/qr-code.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-block;\n      line-height: 0;\n    }\n\n    svg {\n      display: block;\n    }\n\n    .qr-code__empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text-secondary);\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;AAmBF;",
+  "names": []
+}

package/dist/components/qr-code/qr-encoder.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Minimal, zero-dependency QR code encoder.
+ *
+ * Supports:
+ *  - Byte-mode encoding (covers all UTF-8 strings)
+ *  - Numeric and alphanumeric mode for shorter output when applicable
+ *  - Error correction levels L, M, Q, H
+ *  - Versions 1-40 (auto-selected to smallest that fits)
+ *  - Reed-Solomon error correction
+ *  - Data masking (all 8 mask patterns evaluated, best selected)
+ *  - Format and version information
+ */
+export type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+/**
+ * Generate a QR code matrix from a text string.
+ *
+ * @param text - The string to encode
+ * @param ecLevel - Error correction level (L, M, Q, H). Default: 'M'
+ * @returns A 2D boolean array where `true` = dark module
+ */
+export declare function generateQR(text: string, ecLevel?: ErrorCorrectionLevel): boolean[][];
+//# sourceMappingURL=qr-encoder.d.ts.map

package/dist/components/qr-code/qr-encoder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-encoder.d.ts","sourceRoot":"","sources":["../../../src/components/qr-code/qr-encoder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,oBAAoB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAwsBzD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,oBAA0B,GAAG,OAAO,EAAE,EAAE,CAqFzF"}