@skdx/web-components 0.26.0

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

@@ -0,0 +1,105 @@
+import { LitElement } from 'lit';
+import type { QrCodeErrorCorrection } from './types.js';
+import '../utils/visually-hidden.js';
+/** @internal The broadcast every `<skdx-qr-code-*>` part subscribes to for re-render. */
+export declare const QR_CODE_INTERNAL_UPDATE = "skdx-qr-code-internal-update";
+/**
+ * `<skdx-qr-code>` — the Web Components implementation of the shared QrCode
+ * contract (see `@skdx/shared`'s `qrCodeContract`). Encodes `value` once and
+ * hands the resulting module matrix to `<skdx-qr-code-frame>` /
+ * `<skdx-qr-code-pattern>` / `<skdx-qr-code-overlay>`.
+ *
+ * Carries `--skdx-qr-code-size` — the module count, e.g. `29` — as an inline
+ * custom property, so a consumer can size the symbol from CSS
+ * (`width: calc(var(--skdx-qr-code-size) * 4px)`) without reading the version
+ * back out in JavaScript.
+ *
+ * **The encode is cached on `value` + `error-correction` + `version`.** A QR
+ * encode is ~8 full passes over up to 177² modules for mask selection; doing it
+ * on every render is the bug this component ships with everywhere.
+ *
+ * By default the root also renders `value` as visually hidden text: a QR code
+ * is a dead end for anyone without a camera, and the payload is usually a URL
+ * they would otherwise never reach.
+ *
+ * When `value` will not fit — over capacity, or a pinned `version` too small —
+ * an `encode-error` event fires and the root renders **nothing**. A partial or
+ * clipped symbol would scan to the wrong destination, which is worse than no
+ * symbol.
+ *
+ * @csspart hidden-label - The visually hidden copy of `value`.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code value="https://example.com" error-correction="H">
+ *   <skdx-qr-code-frame aria-label="Link to example.com">
+ *     <skdx-qr-code-pattern fill="currentColor"></skdx-qr-code-pattern>
+ *   </skdx-qr-code-frame>
+ * </skdx-qr-code>
+ * ```
+ *
+ * @fires encode-error - Fires with an `Error` as `detail` when `value` cannot be encoded.
+ */
+export declare class SkdxQrCode extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The payload to encode — a URL, a phone number, a Wi-Fi credential string.
+     * Encoded as UTF-8 bytes, so any string is valid input; only its *length* can
+     * push the symbol past capacity.
+     */
+    value: string;
+    /**
+     * Error-correction level. Higher levels survive more damage, at the cost of a
+     * denser symbol for the same payload.
+     *
+     * **A logo overlay requires `"H"`, or the code stops scanning.** Anything
+     * painted over the centre destroys the modules underneath it, and only `'H'`
+     * carries enough redundancy (~30%) to reconstruct them.
+     * `<skdx-qr-code-overlay>` does not raise the level for you — covering an
+     * `'M'` symbol produces a code that looks right and scans in your hand, then
+     * fails on a customer's older phone in poor light.
+     * @default 'M'
+     */
+    errorCorrection: QrCodeErrorCorrection;
+    /**
+     * Force a symbol version (1–40), fixing the module count at `4 × version + 17`.
+     * Useful when a set of codes must all render at the same density.
+     *
+     * A version too small for `value` is an encode failure, not a silent
+     * upgrade — see the `encode-error` event.
+     * @default undefined — the smallest version whose capacity fits `value`.
+     */
+    version?: number;
+    /**
+     * Encoding mode. `'byte'` is the only value today; the property exists so
+     * numeric, alphanumeric and Kanji modes can be added later without a
+     * breaking change.
+     * @default 'byte'
+     */
+    encoding: "byte";
+    /**
+     * Render `value` as visually hidden text inside the root, so a screen-reader
+     * user reaches the destination without a camera. A QR code is otherwise a
+     * dead end to anyone who cannot point a phone at it.
+     *
+     * Turn it off (`hidden-label="false"`) only when you already render the value
+     * (or an equivalent link) yourself — otherwise it is announced twice.
+     * @default true
+     */
+    hiddenLabel: boolean;
+    /** The last encode, kept so a re-render that changed none of the inputs does not redo ~8 passes over the matrix. */
+    private cache;
+    /** The error already reported, so the same failure is not announced on every update. */
+    private reportedError;
+    /** @internal The encoded symbol, indexed `[row][column]`; `true` is a dark module. `null` when it will not fit. */
+    get matrix(): boolean[][] | null;
+    /** @internal Modules along one edge — `4 × version + 17`, and the `viewBox` extent. */
+    get size(): number;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code': SkdxQrCode;
+    }
+}

package/dist/qr-code/QrCode.js

@@ -0,0 +1,8 @@
+var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var o=(l,n,t,e)=>{for(var r=e>1?void 0:e?u(n,t):n,a=l.length-1,c;a>=0;a--)(c=l[a])&&(r=(e?c(n,t,r):c(r))||r);return e&&r&&h(n,t,r),r};import{css as m,html as d,LitElement as p}from"lit";import{property as s}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{optOutBoolean as b}from"../internal/positioning.js";import{encodeQr as E}from"./encoder.js";import"../utils/visually-hidden.js";var y="skdx-qr-code-internal-update",i=class extends p{constructor(){super(...arguments);this.value="";this.errorCorrection="M";this.encoding="byte";this.hiddenLabel=!0;this.cache=null;this.reportedError=null}get matrix(){let{value:t,errorCorrection:e,version:r}=this;return(this.cache===null||this.cache.value!==t||this.cache.level!==e||this.cache.version!==r)&&(this.cache={value:t,level:e,version:r,matrix:E(t,e,r)}),this.cache.matrix}get size(){return this.matrix?.length??0}updated(){let t=this.matrix;if(t===null){let e=`[skandadx] <skdx-qr-code> cannot encode a ${this.value.length}-character value at error correction "${this.errorCorrection}"`+(this.version===void 0?" within version 40.":` at version ${this.version}.`);this.reportedError!==e&&(this.reportedError=e,this.dispatchEvent(new CustomEvent("encode-error",{detail:new Error(e),bubbles:!0,composed:!0}))),this.style.removeProperty("--skdx-qr-code-size")}else this.reportedError=null,this.style.setProperty("--skdx-qr-code-size",String(t.length));this.setAttribute("data-skdx-qr-code",""),this.dispatchEvent(new CustomEvent(y))}render(){return this.matrix===null?null:d`
+      <slot></slot>
+      ${this.hiddenLabel?d`<skdx-visually-hidden part="hidden-label">${this.value}</skdx-visually-hidden>`:null}
+    `}};i.styles=m`
+    :host {
+      display: inline-block;
+    }
+  `,o([s({type:String})],i.prototype,"value",2),o([s({type:String,attribute:"error-correction"})],i.prototype,"errorCorrection",2),o([s({type:Number})],i.prototype,"version",2),o([s({type:String})],i.prototype,"encoding",2),o([s({converter:b,attribute:"hidden-label"})],i.prototype,"hiddenLabel",2),i=o([v("skdx-qr-code","qr-code","root")],i);export{y as QR_CODE_INTERNAL_UPDATE,i as SkdxQrCode};

package/dist/qr-code/QrCodeFrame.cjs

@@ -0,0 +1,7 @@
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var r in e)d(o,r,{get:e[r],enumerable:!0})},f=(o,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!b.call(o,t)&&t!==r&&d(o,t,{get:()=>e[t],enumerable:!(i=h(e,t))||i.enumerable});return o};var k=o=>f(d({},"__esModule",{value:!0}),o),m=(o,e,r,i)=>{for(var t=i>1?void 0:i?h(e,r):e,l=o.length-1,n;l>=0;l--)(n=o[l])&&(t=(i?n(e,r,t):n(t))||t);return i&&t&&d(e,r,t),t};var y={};u(y,{SkdxQrCodeFrame:()=>s});module.exports=k(y);var a=require("lit"),p=require("../internal/define.cjs"),c=require("./QrCode.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-qr-code"),this.root?.addEventListener(c.QR_CODE_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("data-skdx-qr-code-frame",""),this.syncRole()}disconnectedCallback(){this.root?.removeEventListener(c.QR_CODE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){this.syncRole()}syncRole(){this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")?(this.setAttribute("role","img"),this.removeAttribute("aria-hidden")):(this.removeAttribute("role"),this.setAttribute("aria-hidden","true"))}render(){return a.html`<slot></slot>`}};s.styles=a.css`
+    :host {
+      /* The containing block for <skdx-qr-code-overlay>'s absolute placement. */
+      position: relative;
+      display: block;
+    }
+  `,s=m([(0,p.customElement)("skdx-qr-code-frame","qr-code","frame")],s);0&&(module.exports={SkdxQrCodeFrame});

package/dist/qr-code/QrCodeFrame.d.cts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-qr-code-frame>` — the square box the symbol is drawn in, and the
+ * element that names it.
+ *
+ * ARIA follows what you name it. Give it an `aria-label` or `aria-labelledby`
+ * and it becomes `role="img"` with that name — worth doing when the symbol is
+ * the only copy of the destination on screen. Give it neither and it is
+ * `aria-hidden`, because an unnamed grid of squares is decoration, and the
+ * root's `hidden-label` text already carries the payload.
+ *
+ * It carries no width or height of its own; size it from CSS, optionally via
+ * the root's `--skdx-qr-code-size`.
+ *
+ * **Divergence from the React port, forced by the platform.** There, `QrCodeFrame`
+ * *is* the `<svg>` and its children are real SVG elements. A custom element is
+ * an HTML element: slotted into an `<svg>` it does not become SVG content, and
+ * SVG authored in HTML light DOM outside an `<svg>` is not SVG either. So here
+ * the frame is a positioned box, `<skdx-qr-code-pattern>` owns its own `<svg>`,
+ * and `<skdx-qr-code-overlay>` is a positioned HTML box rather than a `<g>`.
+ * The rendered result and the accessibility tree are the same; the element
+ * each piece of markup lives in is not.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code-frame aria-label="Scan to open example.com" style="width: 160px">
+ *   <skdx-qr-code-pattern fill="currentColor"></skdx-qr-code-pattern>
+ * </skdx-qr-code-frame>
+ * ```
+ */
+export declare class SkdxQrCodeFrame extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * The role is on this host rather than moved into shadow DOM, so a
+     * consumer's `aria-label` stays where they wrote it and keeps working.
+     */
+    private syncRole;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code-frame': SkdxQrCodeFrame;
+    }
+}

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-qr-code-frame>` — the square box the symbol is drawn in, and the
+ * element that names it.
+ *
+ * ARIA follows what you name it. Give it an `aria-label` or `aria-labelledby`
+ * and it becomes `role="img"` with that name — worth doing when the symbol is
+ * the only copy of the destination on screen. Give it neither and it is
+ * `aria-hidden`, because an unnamed grid of squares is decoration, and the
+ * root's `hidden-label` text already carries the payload.
+ *
+ * It carries no width or height of its own; size it from CSS, optionally via
+ * the root's `--skdx-qr-code-size`.
+ *
+ * **Divergence from the React port, forced by the platform.** There, `QrCodeFrame`
+ * *is* the `<svg>` and its children are real SVG elements. A custom element is
+ * an HTML element: slotted into an `<svg>` it does not become SVG content, and
+ * SVG authored in HTML light DOM outside an `<svg>` is not SVG either. So here
+ * the frame is a positioned box, `<skdx-qr-code-pattern>` owns its own `<svg>`,
+ * and `<skdx-qr-code-overlay>` is a positioned HTML box rather than a `<g>`.
+ * The rendered result and the accessibility tree are the same; the element
+ * each piece of markup lives in is not.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code-frame aria-label="Scan to open example.com" style="width: 160px">
+ *   <skdx-qr-code-pattern fill="currentColor"></skdx-qr-code-pattern>
+ * </skdx-qr-code-frame>
+ * ```
+ */
+export declare class SkdxQrCodeFrame extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * The role is on this host rather than moved into shadow DOM, so a
+     * consumer's `aria-label` stays where they wrote it and keeps working.
+     */
+    private syncRole;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code-frame': SkdxQrCodeFrame;
+    }
+}

package/dist/qr-code/QrCodeFrame.js

@@ -0,0 +1,7 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(s,t,r,i)=>{for(var e=i>1?void 0:i?h(t,r):t,a=s.length-1,d;a>=0;a--)(d=s[a])&&(e=(i?d(t,r,e):d(e))||e);return i&&e&&c(t,r,e),e};import{css as m,html as p,LitElement as v}from"lit";import{customElement as b}from"../internal/define.js";import{QR_CODE_INTERNAL_UPDATE as n}from"./QrCode.js";var o=class extends v{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-qr-code"),this.root?.addEventListener(n,this.onRootUpdate),this.setAttribute("data-skdx-qr-code-frame",""),this.syncRole()}disconnectedCallback(){this.root?.removeEventListener(n,this.onRootUpdate),super.disconnectedCallback()}updated(){this.syncRole()}syncRole(){this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")?(this.setAttribute("role","img"),this.removeAttribute("aria-hidden")):(this.removeAttribute("role"),this.setAttribute("aria-hidden","true"))}render(){return p`<slot></slot>`}};o.styles=m`
+    :host {
+      /* The containing block for <skdx-qr-code-overlay>'s absolute placement. */
+      position: relative;
+      display: block;
+    }
+  `,o=l([b("skdx-qr-code-frame","qr-code","frame")],o);export{o as SkdxQrCodeFrame};

package/dist/qr-code/QrCodeOverlay.cjs

@@ -0,0 +1,7 @@
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},f=(o,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!v.call(o,t)&&t!==s&&n(o,t,{get:()=>e[t],enumerable:!(r=h(e,t))||r.enumerable});return o};var k=o=>f(n({},"__esModule",{value:!0}),o),c=(o,e,s,r)=>{for(var t=r>1?void 0:r?h(e,s):e,l=o.length-1,a;l>=0;l--)(a=o[l])&&(t=(r?a(e,s,t):a(t))||t);return r&&t&&n(e,s,t),t};var E={};y(E,{SkdxQrCodeOverlay:()=>i});module.exports=k(E);var d=require("lit"),m=require("lit/decorators.js"),b=require("../internal/define.cjs"),p=require("./QrCode.cjs");var i=class extends d.LitElement{constructor(){super(...arguments);this.size=7;this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-qr-code"),this.root?.addEventListener(p.QR_CODE_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("data-skdx-qr-code-overlay",""),this.setAttribute("aria-hidden","true")}disconnectedCallback(){this.root?.removeEventListener(p.QR_CODE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){let s=this.root?.size??0;if(s===0)return;let r=this.size/s*100,t=(100-r)/2;this.style.width=`${r}%`,this.style.height=`${r}%`,this.style.insetInlineStart=`${t}%`,this.style.insetBlockStart=`${t}%`}render(){return d.html`<slot></slot>`}};i.styles=d.css`
+    :host {
+      position: absolute;
+      display: block;
+      box-sizing: border-box;
+    }
+  `,c([(0,m.property)({type:Number})],i.prototype,"size",2),i=c([(0,b.customElement)("skdx-qr-code-overlay","qr-code","overlay")],i);0&&(module.exports={SkdxQrCodeOverlay});

package/dist/qr-code/QrCodeOverlay.d.cts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-qr-code-overlay>` — a centred slot for a logo, sitting on top of the
+ * pattern.
+ *
+ * Positioned as a percentage of the symbol's edge rather than as an SVG `<g>`:
+ * `size` is still counted **in modules**, so `7` is seven modules wide however
+ * large the symbol renders, but the box is placed with `inset`/`width` against
+ * the `<skdx-qr-code-frame>` around it. That is what lets you slot ordinary
+ * markup — an `<img>`, an inline `<svg>`, a `<div>` — into it, which a `<g>`
+ * inside a shadow `<svg>` could not accept.
+ *
+ * Nothing is drawn for you — no backing plate, no padding, no clip. A logo
+ * usually wants an opaque background so the modules do not show through; that
+ * is a consumer decision, and this library ships no paint.
+ *
+ * **Use `error-correction="H"` on the root whenever this is present.** The
+ * overlay hides every module underneath it; only level `'H'` has the redundancy
+ * (~30%) to reconstruct them, and this element cannot raise the level on your
+ * behalf without silently changing the symbol you asked for.
+ *
+ * `aria-hidden`, because the root's `hidden-label` already carries the payload
+ * and a decorative logo adds nothing to it.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code-overlay size="7" style="background: white">
+ *   <img src="/logo.svg" alt="" width="100%" height="100%" />
+ * </skdx-qr-code-overlay>
+ * ```
+ */
+export declare class SkdxQrCodeOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Edge length of the overlay box, **in module units** — the same counting as
+     * the pattern's `viewBox`, so `8` is eight modules wide however large the
+     * symbol renders.
+     *
+     * Keep it under roughly a fifth of the symbol's edge: a larger patch damages
+     * more modules than even `'H'` error correction can reconstruct.
+     * @default 7 — the width of a finder pattern, which reads as deliberate at any version.
+     */
+    size: number;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code-overlay': SkdxQrCodeOverlay;
+    }
+}

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

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-qr-code-overlay>` — a centred slot for a logo, sitting on top of the
+ * pattern.
+ *
+ * Positioned as a percentage of the symbol's edge rather than as an SVG `<g>`:
+ * `size` is still counted **in modules**, so `7` is seven modules wide however
+ * large the symbol renders, but the box is placed with `inset`/`width` against
+ * the `<skdx-qr-code-frame>` around it. That is what lets you slot ordinary
+ * markup — an `<img>`, an inline `<svg>`, a `<div>` — into it, which a `<g>`
+ * inside a shadow `<svg>` could not accept.
+ *
+ * Nothing is drawn for you — no backing plate, no padding, no clip. A logo
+ * usually wants an opaque background so the modules do not show through; that
+ * is a consumer decision, and this library ships no paint.
+ *
+ * **Use `error-correction="H"` on the root whenever this is present.** The
+ * overlay hides every module underneath it; only level `'H'` has the redundancy
+ * (~30%) to reconstruct them, and this element cannot raise the level on your
+ * behalf without silently changing the symbol you asked for.
+ *
+ * `aria-hidden`, because the root's `hidden-label` already carries the payload
+ * and a decorative logo adds nothing to it.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code-overlay size="7" style="background: white">
+ *   <img src="/logo.svg" alt="" width="100%" height="100%" />
+ * </skdx-qr-code-overlay>
+ * ```
+ */
+export declare class SkdxQrCodeOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Edge length of the overlay box, **in module units** — the same counting as
+     * the pattern's `viewBox`, so `8` is eight modules wide however large the
+     * symbol renders.
+     *
+     * Keep it under roughly a fifth of the symbol's edge: a larger patch damages
+     * more modules than even `'H'` error correction can reconstruct.
+     * @default 7 — the width of a finder pattern, which reads as deliberate at any version.
+     */
+    size: number;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code-overlay': SkdxQrCodeOverlay;
+    }
+}

package/dist/qr-code/QrCodeOverlay.js

@@ -0,0 +1,7 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(i,r,o,e)=>{for(var t=e>1?void 0:e?p(r,o):r,d=i.length-1,n;d>=0;d--)(n=i[d])&&(t=(e?n(r,o,t):n(t))||t);return e&&t&&c(r,o,t),t};import{css as h,html as m,LitElement as b}from"lit";import{property as u}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{QR_CODE_INTERNAL_UPDATE as a}from"./QrCode.js";var s=class extends b{constructor(){super(...arguments);this.size=7;this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-qr-code"),this.root?.addEventListener(a,this.onRootUpdate),this.setAttribute("data-skdx-qr-code-overlay",""),this.setAttribute("aria-hidden","true")}disconnectedCallback(){this.root?.removeEventListener(a,this.onRootUpdate),super.disconnectedCallback()}updated(){let o=this.root?.size??0;if(o===0)return;let e=this.size/o*100,t=(100-e)/2;this.style.width=`${e}%`,this.style.height=`${e}%`,this.style.insetInlineStart=`${t}%`,this.style.insetBlockStart=`${t}%`}render(){return m`<slot></slot>`}};s.styles=h`
+    :host {
+      position: absolute;
+      display: block;
+      box-sizing: border-box;
+    }
+  `,l([u({type:Number})],s.prototype,"size",2),s=l([v("skdx-qr-code-overlay","qr-code","overlay")],s);export{s as SkdxQrCodeOverlay};

package/dist/qr-code/QrCodePattern.cjs

@@ -0,0 +1,20 @@
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(i,r)=>{for(var e in r)c(i,e,{get:r[e],enumerable:!0})},b=(i,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of g(r))!m.call(i,t)&&t!==e&&c(i,t,{get:()=>r[t],enumerable:!(o=h(r,t))||o.enumerable});return i};var E=i=>b(c({},"__esModule",{value:!0}),i),d=(i,r,e,o)=>{for(var t=o>1?void 0:o?h(r,e):r,n=i.length-1,s;n>=0;n--)(s=i[n])&&(t=(o?s(r,e,t):s(t))||t);return o&&t&&c(r,e,t),t};var k={};f(k,{SkdxQrCodePattern:()=>a});module.exports=E(k);var l=require("lit"),v=require("lit/decorators.js"),u=require("../internal/define.cjs"),p=require("./QrCode.cjs");var a=class extends l.LitElement{constructor(){super(...arguments);this.fill="currentColor";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.cache=null}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-qr-code"),this.root?.addEventListener(p.QR_CODE_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("data-skdx-qr-code-pattern","")}disconnectedCallback(){this.root?.removeEventListener(p.QR_CODE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}pathData(e){if(this.cache?.matrix===e)return this.cache.d;let o="";for(let t=0;t<e.length;t++){let n=e[t];for(let s=0;s<n.length;s++)n[s]&&(o+=`M${s} ${t}h1v1h-1z`)}return this.cache={matrix:e,d:o},o}render(){let e=this.root?.matrix??null;if(e===null)return null;let o=e.length;return l.html`
+      <svg
+        part="svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 ${o} ${o}"
+        shape-rendering="crispEdges"
+        aria-hidden="true"
+      >
+        ${l.svg`<path part="pattern" d=${this.pathData(e)} fill=${this.fill} />`}
+      </svg>
+    `}};a.styles=l.css`
+    :host {
+      display: block;
+    }
+    svg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  `,d([(0,v.property)({type:String})],a.prototype,"fill",2),a=d([(0,u.customElement)("skdx-qr-code-pattern","qr-code","pattern")],a);0&&(module.exports={SkdxQrCodePattern});

package/dist/qr-code/QrCodePattern.d.cts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-qr-code-pattern>` — every dark module of the symbol, as **one
+ * `<path>`** inside its own `<svg>`.
+ *
+ * The obvious implementation — one `<rect>` per module — puts 31,329 elements
+ * in the DOM for a version 40 code and makes the browser lay out and paint each
+ * of them. A single path with one `M x y h1 v1 h-1 z` subpath per module is one
+ * element and one paint, and the `d` string is cached on the matrix so it
+ * survives re-renders that do not re-encode.
+ *
+ * The `<svg>`'s `viewBox` is `0 0 size size`, so **one user unit is one
+ * module**. It fills its container; give the `<skdx-qr-code-frame>` around it a
+ * width.
+ *
+ * It has no fill of its own: set the `fill` attribute, or style
+ * `::part(pattern)`. Adjacent subpaths share edges, so `fill-rule` never
+ * matters here.
+ *
+ * Owns the `<svg>` rather than living inside the frame's, because a custom
+ * element slotted into an `<svg>` is still an HTML element and does not render
+ * as SVG content — see `<skdx-qr-code-frame>`.
+ *
+ * @csspart svg - The `<svg>` element inside the shadow root.
+ * @csspart pattern - The single `<path>` carrying every dark module.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code-pattern fill="currentColor"></skdx-qr-code-pattern>
+ * ```
+ */
+export declare class SkdxQrCodePattern extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Paint for the dark modules, forwarded to the `<path>`.
+     * @default 'currentColor'
+     */
+    fill: string;
+    private root;
+    private readonly onRootUpdate;
+    /** The last `d` built, keyed on the matrix identity it was built from. */
+    private cache;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** One subpath per dark module. Rebuilt only when the encode produced a new matrix. */
+    private pathData;
+    render(): import("lit").TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code-pattern': SkdxQrCodePattern;
+    }
+}

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

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-qr-code-pattern>` — every dark module of the symbol, as **one
+ * `<path>`** inside its own `<svg>`.
+ *
+ * The obvious implementation — one `<rect>` per module — puts 31,329 elements
+ * in the DOM for a version 40 code and makes the browser lay out and paint each
+ * of them. A single path with one `M x y h1 v1 h-1 z` subpath per module is one
+ * element and one paint, and the `d` string is cached on the matrix so it
+ * survives re-renders that do not re-encode.
+ *
+ * The `<svg>`'s `viewBox` is `0 0 size size`, so **one user unit is one
+ * module**. It fills its container; give the `<skdx-qr-code-frame>` around it a
+ * width.
+ *
+ * It has no fill of its own: set the `fill` attribute, or style
+ * `::part(pattern)`. Adjacent subpaths share edges, so `fill-rule` never
+ * matters here.
+ *
+ * Owns the `<svg>` rather than living inside the frame's, because a custom
+ * element slotted into an `<svg>` is still an HTML element and does not render
+ * as SVG content — see `<skdx-qr-code-frame>`.
+ *
+ * @csspart svg - The `<svg>` element inside the shadow root.
+ * @csspart pattern - The single `<path>` carrying every dark module.
+ *
+ * @example
+ * ```html
+ * <skdx-qr-code-pattern fill="currentColor"></skdx-qr-code-pattern>
+ * ```
+ */
+export declare class SkdxQrCodePattern extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Paint for the dark modules, forwarded to the `<path>`.
+     * @default 'currentColor'
+     */
+    fill: string;
+    private root;
+    private readonly onRootUpdate;
+    /** The last `d` built, keyed on the matrix identity it was built from. */
+    private cache;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** One subpath per dark module. Rebuilt only when the encode produced a new matrix. */
+    private pathData;
+    render(): import("lit").TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-qr-code-pattern': SkdxQrCodePattern;
+    }
+}

package/dist/qr-code/QrCodePattern.js

@@ -0,0 +1,20 @@
+var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(a,l,t,r)=>{for(var e=r>1?void 0:r?p(l,t):l,i=a.length-1,o;i>=0;i--)(o=a[i])&&(e=(r?o(l,t,e):o(e))||e);return r&&e&&d(l,t,e),e};import{css as h,html as v,LitElement as u,svg as g}from"lit";import{property as m}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{QR_CODE_INTERNAL_UPDATE as c}from"./QrCode.js";var s=class extends u{constructor(){super(...arguments);this.fill="currentColor";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.cache=null}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-qr-code"),this.root?.addEventListener(c,this.onRootUpdate),this.setAttribute("data-skdx-qr-code-pattern","")}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}pathData(t){if(this.cache?.matrix===t)return this.cache.d;let r="";for(let e=0;e<t.length;e++){let i=t[e];for(let o=0;o<i.length;o++)i[o]&&(r+=`M${o} ${e}h1v1h-1z`)}return this.cache={matrix:t,d:r},r}render(){let t=this.root?.matrix??null;if(t===null)return null;let r=t.length;return v`
+      <svg
+        part="svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 ${r} ${r}"
+        shape-rendering="crispEdges"
+        aria-hidden="true"
+      >
+        ${g`<path part="pattern" d=${this.pathData(t)} fill=${this.fill} />`}
+      </svg>
+    `}};s.styles=h`
+    :host {
+      display: block;
+    }
+    svg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  `,n([m({type:String})],s.prototype,"fill",2),s=n([f("skdx-qr-code-pattern","qr-code","pattern")],s);export{s as SkdxQrCodePattern};

package/dist/qr-code/encoder.cjs

@@ -0,0 +1 @@
+"use strict";var L=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var K=(t,n)=>{for(var r in n)L(t,r,{get:n[r],enumerable:!0})},X=(t,n,r,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of j(n))!H.call(t,o)&&o!==r&&L(t,o,{get:()=>n[o],enumerable:!(e=Y(n,o))||e.enumerable});return t};var W=t=>X(L({},"__esModule",{value:!0}),t);var at={};K(at,{MAX_VERSION:()=>B,MIN_VERSION:()=>k,alignmentPatternPositions:()=>R,dataCapacityBits:()=>E,encodeQr:()=>ft,formatInfoBits:()=>T,moduleCount:()=>N,reedSolomonGeneratorPoly:()=>O,totalCodewords:()=>S,versionInfoBits:()=>V});module.exports=W(at);var q={L:1,M:0,Q:3,H:2},F={L:0,M:1,Q:2,H:3},P=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],I=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],k=1,B=40,J=3,Z=3,$=40,g=10;function N(t){return t*4+17}function v(t){let n=(16*t+128)*t+64;if(t>=2){let r=Math.floor(t/7)+2;n-=(25*r-10)*r-55,t>=7&&(n-=36)}return n}function S(t){return Math.floor(v(t)/8)}function E(t,n){let r=F[n],e=P[r][t]*I[r][t];return(S(t)-e)*8}function R(t){if(t===1)return[];let n=Math.floor(t/7)+2,r=t===32?26:Math.ceil((t*4+4)/(n*2-2))*2,e=[6];for(let o=N(t)-7;e.length<n;o-=r)e.splice(1,0,o);return e}var A=new Uint8Array(512),U=new Uint8Array(256);{let t=1;for(let n=0;n<255;n++)A[n]=t,U[t]=n,t<<=1,t&256&&(t^=285);for(let n=255;n<512;n++)A[n]=A[n-255]}function G(t,n){return t===0||n===0?0:A[U[t]+U[n]]}function O(t){let n=new Uint8Array(t);n[t-1]=1;let r=1;for(let e=0;e<t;e++){for(let o=0;o<t;o++){let c=G(n[o]??0,r);n[o]=o+1<t?c^(n[o+1]??0):c}r=G(r,2)}return n}function tt(t,n){let r=new Uint8Array(n.length);for(let e of t){let o=e^(r[0]??0);r.copyWithin(0,1),r[r.length-1]=0;for(let c=0;c<r.length;c++)r[c]=(r[c]??0)^G(n[c]??0,o)}return r}function D(t,n,r){let e=t;for(let o=0;o<r;o++)e=e<<1^(e>>>r-1)*n;return e}function T(t,n){let r=q[t]<<3|n;return((r<<10|D(r,1335,10))^21522)&32767}function V(t){return(t<<12|D(t,7973,12))&262143}function z(t){return t<=9?8:16}function x(t,n,r){for(let e=r-1;e>=0;e--)t.push(n>>>e&1)}function nt(t,n,r){let e=E(n,r),o=[];x(o,4,4),x(o,t.length,z(n));for(let u of t)x(o,u,8);x(o,0,Math.min(4,e-o.length)),x(o,0,(8-o.length%8)%8);for(let u=236;o.length<e;u^=253)x(o,u,8);let c=new Uint8Array(o.length/8);for(let u=0;u<o.length;u++){let l=u>>>3;c[l]=(c[l]??0)|o[u]<<7-(u&7)}return c}function ot(t,n,r){let e=F[r],o=I[e][n],c=P[e][n],u=S(n),l=o-u%o,i=Math.floor(u/o)-c,s=O(c),p=[];for(let f=0,m=0;f<o;f++){let y=i+(f<l?0:1),w=t.subarray(m,m+y);m+=y,p.push({data:w,ecc:tt(w,s)})}let h=new Uint8Array(u),a=0;for(let f=0;f<=i;f++)for(let m of p)f<m.data.length&&(h[a++]=m.data[f]);for(let f=0;f<c;f++)for(let m of p)h[a++]=m.ecc[f];return h}var Q=[(t,n)=>(t+n)%2===0,(t,n)=>n%2===0,t=>t%3===0,(t,n)=>(t+n)%3===0,(t,n)=>(Math.floor(n/2)+Math.floor(t/3))%2===0,(t,n)=>t*n%2+t*n%3===0,(t,n)=>(t*n%2+t*n%3)%2===0,(t,n)=>((t+n)%2+t*n%3)%2===0];function rt(t){let n=N(t),r=()=>Array.from({length:n},()=>new Array(n).fill(!1));return{size:n,modules:r(),isFunction:r()}}function b(t,n,r,e){t.modules[r][n]=e,t.isFunction[r][n]=!0}var d=(t,n)=>(t>>>n&1)!==0;function M(t,n,r){for(let e=-4;e<=4;e++)for(let o=-4;o<=4;o++){let c=n+o,u=r+e;if(c<0||c>=t.size||u<0||u>=t.size)continue;let l=Math.max(Math.abs(o),Math.abs(e));b(t,c,u,l!==2&&l!==4)}}function et(t,n,r){for(let e=-2;e<=2;e++)for(let o=-2;o<=2;o++)b(t,n+o,r+e,Math.max(Math.abs(o),Math.abs(e))!==1)}function _(t,n,r){let e=T(n,r),{size:o}=t;for(let c=0;c<=5;c++)b(t,8,c,d(e,c));b(t,8,7,d(e,6)),b(t,8,8,d(e,7)),b(t,7,8,d(e,8));for(let c=9;c<15;c++)b(t,14-c,8,d(e,c));for(let c=0;c<8;c++)b(t,o-1-c,8,d(e,c));for(let c=8;c<15;c++)b(t,8,o-15+c,d(e,c));b(t,8,o-8,!0)}function ct(t,n){if(n<7)return;let r=V(n);for(let e=0;e<18;e++){let o=d(r,e),c=t.size-11+e%3,u=Math.floor(e/3);b(t,c,u,o),b(t,u,c,o)}}function ut(t,n,r){let{size:e}=t;for(let u=0;u<e;u++)b(t,6,u,u%2===0),b(t,u,6,u%2===0);M(t,3,3),M(t,e-4,3),M(t,3,e-4);let o=R(n),c=o.length-1;for(let u=0;u<=c;u++)for(let l=0;l<=c;l++)u===0&&l===0||u===0&&l===c||u===c&&l===0||et(t,o[u],o[l]);_(t,r,0),ct(t,n)}function lt(t,n){let{size:r}=t,e=0;for(let o=r-1;o>=1;o-=2){o===6&&(o=5);for(let c=0;c<r;c++)for(let u=0;u<2;u++){let l=o-u,s=(o+1&2)===0?r-1-c:c;t.isFunction[s][l]||e>=n.length*8||(t.modules[s][l]=d(n[e>>>3],7-(e&7)),e++)}}}function C(t,n){let r=Q[n];for(let e=0;e<t.size;e++)for(let o=0;o<t.size;o++)!t.isFunction[e][o]&&r(o,e)&&(t.modules[e][o]=!t.modules[e][o])}function it(t){let{size:n,modules:r}=t,e=0;for(let l of[!0,!1])for(let i=0;i<n;i++){let s=a=>l?r[i][a]:r[a][i],p=s(0),h=1;for(let a=1;a<n;a++)s(a)===p?(h++,h===5?e+=J:h>5&&(e+=1)):(p=s(a),h=1);for(let a=0;a+10<n;a++){let f=0,m=0;for(let y=0;y<11;y++){let w=s(a+y)?1:0;f=f<<1|w,m|=w<<y}(f===1488||m===1488)&&(e+=$)}}for(let l=0;l+1<n;l++)for(let i=0;i+1<n;i++){let s=r[l][i];s===r[l][i+1]&&s===r[l+1][i]&&s===r[l+1][i+1]&&(e+=Z)}let o=0;for(let l of r)for(let i of l)i&&o++;let c=n*n,u=Math.floor(Math.abs(o*2-c)*10/c);return e+u*g}function st(t,n){for(let r=k;r<=B;r++)if(4+z(r)+t*8<=E(r,n))return r;return null}function ft(t,n,r){let e=new TextEncoder().encode(t),o;if(r===void 0?o=st(e.length,n):!Number.isInteger(r)||r<k||r>B?o=null:o=4+z(r)+e.length*8<=E(r,n)?r:null,o===null)return null;let c=rt(o);ut(c,o,n),lt(c,ot(nt(e,o,n),o,n));let u=0,l=1/0;for(let i=0;i<Q.length;i++){C(c,i),_(c,n,i);let s=it(c);s<l&&(l=s,u=i),C(c,i)}return C(c,u),_(c,n,u),c.modules}0&&(module.exports={MAX_VERSION,MIN_VERSION,alignmentPatternPositions,dataCapacityBits,encodeQr,formatInfoBits,moduleCount,reedSolomonGeneratorPoly,totalCodewords,versionInfoBits});

package/dist/qr-code/encoder.d.cts

@@ -0,0 +1,73 @@
+/**
+ * A compact QR Code encoder written from ISO/IEC 18004, deliberately narrow in
+ * scope: **byte mode only** (UTF-8), versions 1–40, all four error-correction
+ * levels. No Kanji/alphanumeric/numeric mode switching, no ECI, no Micro QR.
+ *
+ * Byte mode alone is not a limitation worth fixing: it encodes every string,
+ * and the modes it omits only ever buy density for inputs that are entirely
+ * digits or entirely uppercase-alphanumeric. Paying ~20% more modules on a URL
+ * is cheaper than shipping a segment optimiser nobody reads.
+ *
+ * The whole module is pure and synchronous — no DOM, no canvas, no timers — so
+ * it runs unchanged under SSR.
+ *
+ * @module
+ */
+/** Error-correction level, in ascending order of redundancy: `L` ≈ 7%, `M` ≈ 15%, `Q` ≈ 25%, `H` ≈ 30%. */
+export type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+export declare const MIN_VERSION = 1;
+export declare const MAX_VERSION = 40;
+/** Module count along one edge for `version`: `4 × version + 17`, so 21 at v1 and 177 at v40. */
+export declare function moduleCount(version: number): number;
+/** Total codewords (data + EC) a version holds, independent of level. */
+export declare function totalCodewords(version: number): number;
+/**
+ * Bits available for the *data* segment (mode indicator, character count,
+ * payload, padding) at this version and level — total codewords less every
+ * error-correction codeword.
+ */
+export declare function dataCapacityBits(version: number, level: ErrorCorrectionLevel): number;
+/**
+ * Centre coordinates of the alignment patterns for `version`, ascending.
+ * Empty at version 1, which has none.
+ *
+ * The spacing is even except for the first gap, which absorbs the remainder —
+ * exactly the rule ISO/IEC 18004 Table E.1 tabulates, with version 32's
+ * one-off step of 26 as the single exception the rule does not cover.
+ */
+export declare function alignmentPatternPositions(version: number): number[];
+/**
+ * Reed–Solomon generator polynomial of the given degree — the product
+ * `(x − α^0)(x − α^1)…(x − α^(degree−1))` over GF(256).
+ *
+ * Returned **monic-implicit**: `degree` coefficients from x^(degree−1) down to
+ * x^0, with the leading 1 omitted, which is the form the remainder loop wants.
+ * Degree 7 is `[127, 122, 154, 164, 11, 68, 117]`.
+ */
+export declare function reedSolomonGeneratorPoly(degree: number): Uint8Array;
+/**
+ * The 15-bit format-information word for a level/mask pair: a BCH(15, 5)
+ * codeword over the 5 data bits `level | mask`, XOR-masked with `0b101010000010010`
+ * so that the all-zero data never produces an all-zero word.
+ *
+ * `formatInfoBits('L', 0)` is `0b111011111000100`.
+ */
+export declare function formatInfoBits(level: ErrorCorrectionLevel, mask: number): number;
+/**
+ * The 18-bit version-information word, a BCH(18, 6) codeword over the version
+ * number. Only versions ≥ 7 carry one; smaller symbols are identified by their
+ * size alone. Unmasked, unlike the format word.
+ */
+export declare function versionInfoBits(version: number): number;
+/**
+ * Encodes `value` as a QR Code matrix.
+ *
+ * @param value - The payload, encoded as UTF-8 bytes (byte mode).
+ * @param level - Error-correction level. Use `'H'` whenever a logo covers the centre.
+ * @param version - Force a symbol version 1–40. Omit to pick the smallest that fits.
+ * @returns A square `boolean[][]` indexed `[row][column]`, `true` meaning a dark
+ * module — or `null` when the payload exceeds capacity, or `version` is out of
+ * range or too small. **Never throws**: over-capacity is an ordinary outcome for
+ * a user-supplied string, not an exceptional one.
+ */
+export declare function encodeQr(value: string, level: ErrorCorrectionLevel, version?: number): boolean[][] | null;