wj-elements 0.2.0-alpha.8 → 0.3.0

package/dist/wje-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-progress-bar.js","sources":["../packages/wje-progress-bar/progress-bar.element.js","../packages/wje-progress-bar/progress-bar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ProgressBar` is a custom web component that represents a progress bar.\n * @summary This element represents a progress bar.\n * @documentation https://elements.webjet.sk/components/progress-bar\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the progress bar.\n * @slot start - The start slot of the progress bar.\n * @slot end - The end slot of the progress bar.\n * @cssproperty [--wje-progress-bar-color=var(--wje-color-contrast-6)] - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables.\n * @cssproperty [--wje-progress-bar-text-size=.75rem] - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design.\n * @cssproperty [--wje-progress-bar-text-color=var(--wje-color)] - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background.\n * @tag wje-progress-bar\n */\nexport default class ProgressBar extends WJElement {\n    /**\n     * Creates an instance of ProgressBar.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the radius of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set radius(value) {\n        this.setAttribute('radius', value);\n    }\n\n    /**\n     * Gets the radius of the progress bar.\n     * @returns {number} The value of the radius.\n     */\n    get radius() {\n        return +this.getAttribute('radius') || 70;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get diameter() {\n        return this.radius * 2;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get containerSize() {\n        return this.diameter + 2 * this.stroke;\n    }\n\n    /**\n     * Sets the stroke of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set stroke(value) {\n        this.setAttribute('stroke', value);\n    }\n\n    /**\n     * Gets the stroke of the progress bar.\n     * @returns {number} The value of the stroke.\n     */\n    get stroke() {\n        return +this.getAttribute('stroke') || 6;\n    }\n\n    /**\n     * Gets the linecap of the progress bar.\n     * @returns {string} The value of the linecap.\n     */\n    get linecap() {\n        return this.getAttribute('linecap') || 'square';\n    }\n\n    className = 'ProgressBar';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['progress'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let xy = this.radius + this.stroke / 2;\n\n        let fragment = document.createDocumentFragment();\n\n        if (params.color) this.classList.add('wje-color');\n\n        let element = document.createElement('div');\n        element.classList.add('progress');\n\n        let slot = document.createElement('slot');\n\n        let slotWrapper = document.createElement('div');\n        slotWrapper.classList.add('slot-wrapper');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        const svgNamespace = 'http://www.w3.org/2000/svg';\n\n        let svg = document.createElementNS(svgNamespace, 'svg');\n\n        let background;\n        let bar;\n\n        if (this?.type === 'circle') {\n            svg.setAttribute('width', this.containerSize);\n            svg.setAttribute('height', this.containerSize);\n            svg.setAttribute('viewBox', `0 0 ${this.containerSize} ${this.containerSize}`);\n            svg.setAttribute('style', 'transform: rotate(-90deg)');\n\n            background = document.createElementNS(svgNamespace, 'circle');\n            background.setAttribute('stroke', 'var(--wje-progress-bar-background-color)');\n            background.setAttribute('stroke-width', this.stroke);\n            background.setAttribute('fill', 'transparent');\n            background.setAttribute('r', this.radius);\n            background.setAttribute('cx', this.containerSize / 2);\n            background.setAttribute('cy', this.containerSize / 2);\n\n            bar = document.createElementNS(svgNamespace, 'circle');\n            bar.setAttribute('stroke', 'var(--wje-progress-bar-color)');\n            bar.setAttribute('stroke-width', this.stroke);\n            bar.setAttribute('fill', 'transparent');\n            bar.setAttribute('r', this.radius);\n            bar.setAttribute('cx', this.containerSize / 2);\n            bar.setAttribute('cy', this.containerSize / 2);\n            bar.setAttribute('stroke-linecap', this.linecap);\n\n            let text = document.createElementNS(svgNamespace, 'text');\n            text.setAttribute('x', '50%');\n            text.setAttribute('y', '50%');\n            text.innerHTML = this.progress + '%';\n\n            svg.appendChild(text);\n        } else {\n            svg.setAttribute('width', '100%');\n            svg.setAttribute('height', this.stroke);\n            svg.setAttribute('preserveAspectRatio', 'none');\n\n            background = document.createElementNS(svgNamespace, 'rect');\n            background.setAttribute('x', 0);\n            background.setAttribute('y', 0);\n            background.setAttribute('width', '100%');\n            background.setAttribute('height', this.stroke);\n            if (this.linecap === 'round') {\n                background.setAttribute('rx', this.stroke / 2);\n                background.setAttribute('ry', this.stroke / 2);\n            }\n\n            bar = document.createElementNS(svgNamespace, 'rect');\n            bar.setAttribute('x', 0);\n            bar.setAttribute('y', 0);\n            bar.setAttribute('width', this.progress + '%');\n            bar.setAttribute('height', this.stroke);\n            bar.setAttribute('id', 'bar');\n\n            if (this.linecap === 'round') {\n                bar.setAttribute('rx', this.stroke / 2);\n                bar.setAttribute('ry', this.stroke / 2);\n            }\n        }\n\n        svg.appendChild(background);\n        svg.appendChild(bar);\n\n        slotWrapper.appendChild(slot);\n\n        element.appendChild(slotStart);\n        element.appendChild(slotWrapper);\n        element.appendChild(svg);\n        element.appendChild(slotEnd);\n\n        fragment.appendChild(element);\n\n        this.background = background;\n        this.bar = bar;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.type === 'circle') {\n            this.setCircleProgress(this.progress);\n        }\n    }\n\n    /**\n     * Returns the dasharray for a circle with the given radius.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dasharray value.\n     */\n    getCircleDasharray(radius = 70) {\n        return 2 * Math.PI * radius;\n    }\n\n    /**\n     * Returns the dashoffset for a circle with the given progress and radius.\n     * @param {number} progress The progress of the circle in percentage.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dashoffset value.\n     */\n    getCircleDashoffset(progress = 0, radius = 70) {\n        return this.getCircleDasharray(radius) * ((100 - progress) / 100);\n    }\n\n    /**\n     * Sets the progress of the circle.\n     * @param percent\n     */\n    setCircleProgress(percent) {\n        const progress = this.bar;\n        const radius = progress.r.baseVal.value;\n        const circumference = 2 * Math.PI * radius;\n\n        progress.style.strokeDasharray = `${circumference}`;\n        const offset = circumference - (percent / 100) * circumference;\n        progress.style.strokeDashoffset = offset;\n    }\n}\n","import ProgressBar from './progress-bar.element.js';\n\nexport default ProgressBar;\n\nProgressBar.define('wje-progress-bar', ProgressBar);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-progress-bar.js","sources":["../packages/wje-progress-bar/progress-bar.element.js","../packages/wje-progress-bar/progress-bar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ProgressBar` is a custom web component that represents a progress bar.\n * @summary This element represents a progress bar.\n * @documentation https://elements.webjet.sk/components/progress-bar\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the progress bar.\n * @slot start - The start slot of the progress bar.\n * @slot end - The end slot of the progress bar.\n * @cssproperty [--wje-progress-bar-color=var(--wje-color-contrast-6)] - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables.\n * @cssproperty [--wje-progress-bar-text-size=.75rem] - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design.\n * @cssproperty [--wje-progress-bar-text-color=var(--wje-color)] - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background.\n * @tag wje-progress-bar\n */\nexport default class ProgressBar extends WJElement {\n    /**\n     * Creates an instance of ProgressBar.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the radius of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set radius(value) {\n        this.setAttribute('radius', value);\n    }\n\n    /**\n     * Gets the radius of the progress bar.\n     * @returns {number} The value of the radius.\n     */\n    get radius() {\n        return +this.getAttribute('radius') || 70;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get diameter() {\n        return this.radius * 2;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get containerSize() {\n        return this.diameter + 2 * this.stroke;\n    }\n\n    /**\n     * Sets the stroke of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set stroke(value) {\n        this.setAttribute('stroke', value);\n    }\n\n    /**\n     * Gets the stroke of the progress bar.\n     * @returns {number} The value of the stroke.\n     */\n    get stroke() {\n        return +this.getAttribute('stroke') || 6;\n    }\n\n    /**\n     * Gets the linecap of the progress bar.\n     * @returns {string} The value of the linecap.\n     */\n    get linecap() {\n        return this.getAttribute('linecap') || 'square';\n    }\n\n    className = 'ProgressBar';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['progress'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let xy = this.radius + this.stroke / 2;\n\n        let fragment = document.createDocumentFragment();\n\n        if (params.color) this.classList.add('wje-color');\n\n        let element = document.createElement('div');\n        element.classList.add('progress');\n\n        let slot = document.createElement('slot');\n\n        let slotWrapper = document.createElement('div');\n        slotWrapper.classList.add('slot-wrapper');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        const svgNamespace = 'http://www.w3.org/2000/svg';\n\n        let svg = document.createElementNS(svgNamespace, 'svg');\n\n        let background;\n        let bar;\n\n        if (this?.type === 'circle') {\n            svg.setAttribute('width', this.containerSize);\n            svg.setAttribute('height', this.containerSize);\n            svg.setAttribute('viewBox', `0 0 ${this.containerSize} ${this.containerSize}`);\n            svg.setAttribute('style', 'transform: rotate(-90deg)');\n\n            background = document.createElementNS(svgNamespace, 'circle');\n            background.setAttribute('stroke', 'var(--wje-progress-bar-background-color)');\n            background.setAttribute('stroke-width', this.stroke);\n            background.setAttribute('fill', 'transparent');\n            background.setAttribute('r', this.radius);\n            background.setAttribute('cx', this.containerSize / 2);\n            background.setAttribute('cy', this.containerSize / 2);\n\n            bar = document.createElementNS(svgNamespace, 'circle');\n            bar.setAttribute('stroke', 'var(--wje-progress-bar-color)');\n            bar.setAttribute('stroke-width', this.stroke);\n            bar.setAttribute('fill', 'transparent');\n            bar.setAttribute('r', this.radius);\n            bar.setAttribute('cx', this.containerSize / 2);\n            bar.setAttribute('cy', this.containerSize / 2);\n            bar.setAttribute('stroke-linecap', this.linecap);\n\n            let text = document.createElementNS(svgNamespace, 'text');\n            text.setAttribute('x', '50%');\n            text.setAttribute('y', '50%');\n            text.innerHTML = this.progress + '%';\n\n            svg.appendChild(text);\n        } else {\n            svg.setAttribute('width', '100%');\n            svg.setAttribute('height', this.stroke);\n            svg.setAttribute('preserveAspectRatio', 'none');\n\n            background = document.createElementNS(svgNamespace, 'rect');\n            background.setAttribute('x', 0);\n            background.setAttribute('y', 0);\n            background.setAttribute('width', '100%');\n            background.setAttribute('height', this.stroke);\n            if (this.linecap === 'round') {\n                background.setAttribute('rx', this.stroke / 2);\n                background.setAttribute('ry', this.stroke / 2);\n            }\n\n            bar = document.createElementNS(svgNamespace, 'rect');\n            bar.setAttribute('x', 0);\n            bar.setAttribute('y', 0);\n            bar.setAttribute('width', this.progress + '%');\n            bar.setAttribute('height', this.stroke);\n            bar.setAttribute('id', 'bar');\n\n            if (this.linecap === 'round') {\n                bar.setAttribute('rx', this.stroke / 2);\n                bar.setAttribute('ry', this.stroke / 2);\n            }\n        }\n\n        svg.appendChild(background);\n        svg.appendChild(bar);\n\n        slotWrapper.appendChild(slot);\n\n        element.appendChild(slotStart);\n        element.appendChild(slotWrapper);\n        element.appendChild(svg);\n        element.appendChild(slotEnd);\n\n        fragment.appendChild(element);\n\n        this.background = background;\n        this.bar = bar;\n\n        return fragment;\n    }\n\n    /**\n     * Handles attribute changes for ARIA sync.\n     * @param {string} name\n     * @param {string|null} oldValue\n     * @param {string|null} newValue\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, oldValue, newValue);\n        }\n\n        if (name === 'progress' && oldValue !== newValue) {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'progressbar',\n            valuemin: 0,\n            valuemax: 100,\n            valuenow: this.progress || 0,\n        });\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.type === 'circle') {\n            this.setCircleProgress(this.progress);\n        }\n    }\n\n    /**\n     * Returns the dasharray for a circle with the given radius.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dasharray value.\n     */\n    getCircleDasharray(radius = 70) {\n        return 2 * Math.PI * radius;\n    }\n\n    /**\n     * Returns the dashoffset for a circle with the given progress and radius.\n     * @param {number} progress The progress of the circle in percentage.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dashoffset value.\n     */\n    getCircleDashoffset(progress = 0, radius = 70) {\n        return this.getCircleDasharray(radius) * ((100 - progress) / 100);\n    }\n\n    /**\n     * Sets the progress of the circle.\n     * @param percent\n     */\n    setCircleProgress(percent) {\n        const progress = this.bar;\n        const radius = progress.r.baseVal.value;\n        const circumference = 2 * Math.PI * radius;\n\n        progress.style.strokeDasharray = `${circumference}`;\n        const offset = circumference - (percent / 100) * circumference;\n        progress.style.strokeDashoffset = offset;\n    }\n}\n","import ProgressBar from './progress-bar.element.js';\n\nexport default ProgressBar;\n\nProgressBar.define('wje-progress-bar', ProgressBar);\n"],"names":[],"mappings":"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"}

package/dist/wje-qr-code/qr-code.element.d.ts

@@ -0,0 +1,96 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `QrCode` is a custom web component that generates a QR code.
+ * @summary This element represents a QR code generator.
+ * @documentation https://elements.webjet.sk/components/qr-code
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part of the QR code.
+ * @slot top - The slot for the top content of the QR code.
+ * @slot bottom - The slot for the bottom content of the QR code.
+ * @tag wje-qr-code
+ */
+export default class QrCode extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @returns {CSSStyleSheet} The CSS stylesheet.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of observed attributes.
+     * @returns {string[]} The list of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Content encoded into the QR code.
+     * @type {string}
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * Background color of the QR code.
+     * @type {string|null}
+     */
+    set background(value: string);
+    get background(): string;
+    /**
+     * Background alpha channel in range 0-1.
+     * Supports aliases: background-alpha, backgroundalpha, backgroundAlpha.
+     * @type {number|null}
+     */
+    set backgroundAlpha(value: number);
+    get backgroundAlpha(): number;
+    /**
+     * Foreground color of the QR code.
+     * @type {string|null}
+     */
+    set foreground(value: string);
+    get foreground(): string;
+    /**
+     * Foreground alpha channel in range 0-1.
+     * Supports aliases: foreground-alpha, foregroundalpha, foregroundAlpha.
+     * @type {number|null}
+     */
+    set foregroundAlpha(value: number);
+    get foregroundAlpha(): number;
+    /**
+     * Error correction level. Accepted values: L, M, Q, H.
+     * @type {string|null}
+     */
+    set level(value: string);
+    get level(): string;
+    /**
+     * Padding around the QR code in pixels.
+     * @type {number|null}
+     */
+    set padding(value: number);
+    get padding(): number;
+    /**
+     * Output QR code size in pixels.
+     * @type {number|null}
+     */
+    set size(value: number);
+    get size(): number;
+    /**
+     * Draws the QR code component.
+     * @returns {DocumentFragment} The document fragment containing the QR code component.
+     */
+    draw(): DocumentFragment;
+    /**
+     * Called after the component is drawn to generate the QR code.
+     */
+    afterDraw(): void;
+    qr: any;
+    /**
+     * Returns first defined attribute value from alias list.
+     * @param {string[]} aliases
+     * @returns {string|null}
+     */
+    getAttributeFromAliases(aliases?: string[]): string | null;
+    /**
+     * Writes value to the canonical attribute and clears alternate aliases.
+     * @param {string} optionName
+     * @param {string|number|null|undefined} value
+     */
+    setAliasedAttribute(optionName: string, value: string | number | null | undefined): void;
+}

package/dist/wje-qr-code.js

@@ -2801,6 +2801,17 @@ function requireQrious() {
 }
 var qriousExports = requireQrious();
 const QRious = /* @__PURE__ */ getDefaultExportFromCjs(qriousExports);
+const QR_ATTRIBUTE_ALIASES = {
+  value: ["value"],
+  background: ["background"],
+  backgroundAlpha: ["background-alpha", "backgroundalpha", "backgroundAlpha"],
+  foreground: ["foreground"],
+  foregroundAlpha: ["foreground-alpha", "foregroundalpha", "foregroundAlpha"],
+  level: ["level"],
+  padding: ["padding"],
+  size: ["size"]
+};
+const NUMERIC_OPTIONS = /* @__PURE__ */ new Set(["backgroundAlpha", "foregroundAlpha", "padding", "size"]);
 class QrCode extends WJElement {
   /**
    * Creates an instance of QrCode.
@@ -2813,6 +2824,105 @@ class QrCode extends WJElement {
      */
     __publicField(this, "className", "QrCode");
   }
+  /**
+   * Content encoded into the QR code.
+   * @type {string}
+   */
+  set value(value) {
+    this.setAliasedAttribute("value", value);
+  }
+  get value() {
+    return this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.value) || "empty value";
+  }
+  /**
+   * Background color of the QR code.
+   * @type {string|null}
+   */
+  set background(value) {
+    this.setAliasedAttribute("background", value);
+  }
+  get background() {
+    return this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.background);
+  }
+  /**
+   * Background alpha channel in range 0-1.
+   * Supports aliases: background-alpha, backgroundalpha, backgroundAlpha.
+   * @type {number|null}
+   */
+  set backgroundAlpha(value) {
+    this.setAliasedAttribute("backgroundAlpha", value);
+  }
+  get backgroundAlpha() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.backgroundAlpha);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  /**
+   * Foreground color of the QR code.
+   * @type {string|null}
+   */
+  set foreground(value) {
+    this.setAliasedAttribute("foreground", value);
+  }
+  get foreground() {
+    return this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.foreground);
+  }
+  /**
+   * Foreground alpha channel in range 0-1.
+   * Supports aliases: foreground-alpha, foregroundalpha, foregroundAlpha.
+   * @type {number|null}
+   */
+  set foregroundAlpha(value) {
+    this.setAliasedAttribute("foregroundAlpha", value);
+  }
+  get foregroundAlpha() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.foregroundAlpha);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  /**
+   * Error correction level. Accepted values: L, M, Q, H.
+   * @type {string|null}
+   */
+  set level(value) {
+    if (value === null || value === void 0 || value === "") {
+      this.removeAttribute("level");
+      return;
+    }
+    this.setAttribute("level", String(value).trim().toUpperCase());
+  }
+  get level() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.level);
+    return value ? String(value).trim().toUpperCase() : null;
+  }
+  /**
+   * Padding around the QR code in pixels.
+   * @type {number|null}
+   */
+  set padding(value) {
+    this.setAliasedAttribute("padding", value);
+  }
+  get padding() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.padding);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  /**
+   * Output QR code size in pixels.
+   * @type {number|null}
+   */
+  set size(value) {
+    this.setAliasedAttribute("size", value);
+  }
+  get size() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.size);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
   /**
    * Returns the CSS stylesheet for the component.
    * @returns {CSSStyleSheet} The CSS stylesheet.
@@ -2831,7 +2941,7 @@ class QrCode extends WJElement {
    * @returns {string[]} The list of observed attributes.
    */
   static get observedAttributes() {
-    return ["value", "background", "backgroundAlpha", "foreground", "foregroundAlpha", "level", "padding", "size"];
+    return Object.values(QR_ATTRIBUTE_ALIASES).flat();
   }
   /**
    * Draws the QR code component.
@@ -2859,31 +2969,63 @@ class QrCode extends WJElement {
    */
   afterDraw() {
     const canvas = this.shadowRoot.querySelector("canvas");
+    if (!canvas) return;
     const qrOptions = {};
-    const attributes = [
-      "value",
-      "background",
-      "backgroundAlpha",
-      "foreground",
-      "foregroundAlpha",
-      "level",
-      "padding",
-      "size"
-    ];
-    attributes.forEach((attribute) => {
-      const value = this.getAttribute(attribute);
-      if (value !== null) {
-        qrOptions[attribute] = value;
+    Object.entries(QR_ATTRIBUTE_ALIASES).forEach(([optionName, aliases]) => {
+      const value = this.getAttributeFromAliases(aliases);
+      if (value === null) return;
+      if (optionName === "level") {
+        const level = String(value).trim().toUpperCase();
+        if (["L", "M", "Q", "H"].includes(level)) {
+          qrOptions.level = level;
+        }
+        return;
+      }
+      if (NUMERIC_OPTIONS.has(optionName)) {
+        const numericValue = Number(value);
+        if (Number.isFinite(numericValue)) {
+          qrOptions[optionName] = numericValue;
+        }
+        return;
       }
+      qrOptions[optionName] = value;
     });
-    if (!qrOptions.hasOwnProperty("value")) {
+    if (!Object.prototype.hasOwnProperty.call(qrOptions, "value")) {
       qrOptions.value = "empty value";
     }
-    new QRious({
+    this.qr = new QRious({
       element: canvas,
       ...qrOptions
     });
   }
+  /**
+   * Returns first defined attribute value from alias list.
+   * @param {string[]} aliases
+   * @returns {string|null}
+   */
+  getAttributeFromAliases(aliases = []) {
+    for (const alias of aliases) {
+      const value = this.getAttribute(alias);
+      if (value !== null) return value;
+    }
+    return null;
+  }
+  /**
+   * Writes value to the canonical attribute and clears alternate aliases.
+   * @param {string} optionName
+   * @param {string|number|null|undefined} value
+   */
+  setAliasedAttribute(optionName, value) {
+    const aliases = QR_ATTRIBUTE_ALIASES[optionName] || [];
+    const [primaryAlias, ...secondaryAliases] = aliases;
+    secondaryAliases.forEach((alias) => this.removeAttribute(alias));
+    if (!primaryAlias) return;
+    if (value === null || value === void 0 || value === "") {
+      this.removeAttribute(primaryAlias);
+      return;
+    }
+    this.setAttribute(primaryAlias, String(value));
+  }
 }
 QrCode.define("wje-qr-code", QrCode);
 export {