igniteui-webcomponents 7.3.0-beta.0 → 7.3.0

package/components/nav-drawer/nav-drawer.js

@@ -11,6 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { addCommandController } from '#internals/controllers/command.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { addToggleController } from '#internals/controllers/toggle.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
 import { partMap } from '#internals/part-map.js';
@@ -44,6 +45,13 @@ export default class IgcNavDrawerComponent extends EventEmitterMixin(LitElement)
         super();
         this._dialogRef = createRef();
         this._miniRef = createRef();
+        this._toggleController = addToggleController(this, {
+            transition: async (open) => {
+                this.open = open;
+                await this.updateComplete;
+                return true;
+            },
+        });
         this._slots = addSlotController(this, {
             slots: setSlots('mini'),
             onChange: this._handleMiniState,
@@ -113,36 +121,17 @@ export default class IgcNavDrawerComponent extends EventEmitterMixin(LitElement)
             this._closeWithEvent();
         }
     }
-    _emitClosing() {
-        return this.emitEvent('igcClosing', { cancelable: true });
-    }
     async _closeWithEvent() {
-        if (!(this.open && this._emitClosing())) {
-            return false;
-        }
-        this.open = false;
-        await this.updateComplete;
-        this.emitEvent('igcClosed');
-        return true;
+        return this._toggleController.hide(true);
     }
     async show() {
-        if (this.open) {
-            return false;
-        }
-        this.open = true;
-        await this.updateComplete;
-        return true;
+        return this._toggleController.show();
     }
     async hide() {
-        if (!this.open) {
-            return false;
-        }
-        this.open = false;
-        await this.updateComplete;
-        return true;
+        return this._toggleController.hide();
     }
     toggle() {
-        return this.open ? this.hide() : this.show();
+        return this._toggleController.toggle();
     }
     _renderMiniVariant() {
         return html `

package/components/nav-drawer/nav-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,+BAA+B,MAAM,6BAA6B,CAAC;AAC1E,OAAO,yBAAyB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAuCtF,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,iBAAiB,CAGlE,UAAU,CAAC;aACY,YAAO,GAAG,gBAAgB,AAAnB,CAAoB;aACpC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,qBAAqB,EACrB,+BAA+B,EAC/B,yBAAyB,CAC1B,CAAC;IACJ,CAAC;IAYD,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC7B,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC;IACtC,CAAC;IA4DD;QACE,KAAK,EAAE,CAAC;QAnFO,eAAU,GAAG,SAAS,EAAqB,CAAC;QAC5C,aAAQ,GAAG,SAAS,EAAe,CAAC;QAEpC,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;YACvB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;SAChC,CAAC,CAAC;QAmCI,aAAQ,GAAsB,OAAO,CAAC;QAStC,SAAI,GAAG,KAAK,CAAC;QAYb,qBAAgB,GAAG,KAAK,CAAC;QAuB9B,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAChC,oBAAoB,CAAC,IAAI,CAAC;aACvB,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;aACxB,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;aACxB,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM,CAAC,UAAgC;QACxD,IAAI,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnD,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACtB,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC9B,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC;QAED,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC;IAEkB,OAAO,CAAC,UAAgC;QACzD,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACzD,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAMO,gBAAgB;QACtB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAChE,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACvC,IAAI,WAAW,EAAE,CAAC;gBAChB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YACxB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAgB;QAC7D,IACE,IAAI,CAAC,OAAO,KAAK,MAAM;YACvB,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACrD,CAAC;YACD,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAMO,YAAY;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC;YACxC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;IAOM,KAAK,CAAC,IAAI;QACf,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,OAAO,IAAI,CAAC;IACd,CAAC;IAGM,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,OAAO,IAAI,CAAC;IACd,CAAC;IAGM,MAAM;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;IAIO,kBAAkB;QACxB,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;qBACP,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;eAC3B,OAAO,CAAC;YACb,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe;SAC9B,CAAC;iBACO,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,eAAe;mBAChC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;;;;KAIjD,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;;;qBAGT,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;iBACzB,IAAI,CAAC,YAAY;kBAChB,IAAI,CAAC,aAAa;iBACnB,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC;;UAEvD,IAAI,CAAC,cAAc,EAAE;;QAEvB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;oCACqB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI;UACpE,IAAI,CAAC,cAAc,EAAE;;QAEvB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,KAAK,CACjB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CACjE,EAAE,CAAC;IACN,CAAC;;AA3OM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACiB;AAStC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB;AAYb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;+DAC9B;AAczB;IADN,QAAQ,EAAE;oDACW","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addCommandController } from '#internals/controllers/command.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isPointInsideElement, isPopoverOpen } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { NavDrawerPosition } from '../types.js';\nimport IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';\nimport IgcNavDrawerItemComponent from './nav-drawer-item.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';\n\nexport interface IgcNavDrawerComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * A side navigation container that provides\n * quick access between views within an application.\n *\n * For non-relative positions (`start`, `end`, `top`, `bottom`) the drawer is\n * rendered as a native `<dialog>` element, providing modal semantics, automatic\n * focus trapping, and a backdrop. For the `relative` position it is rendered\n * inline as a `<nav>` landmark.\n *\n * When content is provided in the `mini` slot, a compact icon-only variant is\n * always displayed alongside the main drawer (hidden only while the full drawer\n * is open).\n *\n * The component integrates with the\n * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\n * an Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` / `\"--toggle\"`\n * and `commandfor` pointing to this element will call the corresponding method\n * declaratively without any JavaScript.\n *\n * @element igc-nav-drawer\n *\n * @fires igcClosing - Emitted just before the drawer is closed by a user interaction. Cancelable —\n *   call `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted just after the drawer is closed by a user interaction.\n *\n * @slot - Renders the main navigation content of the drawer.\n * @slot mini - Renders the compact mini variant of the drawer.\n *\n * @csspart base - The base wrapper of the drawer.\n * @csspart main - The main content container of the drawer.\n * @csspart mini - The mini variant container of the drawer.\n */\nexport default class IgcNavDrawerComponent extends EventEmitterMixin<\n  IgcNavDrawerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcNavDrawerComponent,\n      IgcNavDrawerHeaderItemComponent,\n      IgcNavDrawerItemComponent\n    );\n  }\n\n  //#region Internal state\n\n  private readonly _dialogRef = createRef<HTMLDialogElement>();\n  private readonly _miniRef = createRef<HTMLElement>();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('mini'),\n    onChange: this._handleMiniState,\n  });\n\n  private get _dialog(): HTMLDialogElement | undefined {\n    return this._dialogRef.value;\n  }\n\n  private get _mini(): HTMLElement | undefined {\n    return this._miniRef.value;\n  }\n\n  private get _hasMiniContent(): boolean {\n    return this._slots.hasAssignedElements('mini');\n  }\n\n  private get _isRelative(): boolean {\n    return this.position === 'relative';\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Sets the position of the drawer.\n   *\n   * - `start` — anchored to the inline-start edge (default).\n   * - `end` — anchored to the inline-end edge.\n   * - `top` — anchored to the block-start edge.\n   * - `bottom` — anchored to the block-end edge.\n   * - `relative` — rendered inline within the page flow; no modal backdrop.\n   *\n   * @attr position\n   * @default 'start'\n   */\n  @property({ reflect: true })\n  public position: NavDrawerPosition = 'start';\n\n  /**\n   * Whether the drawer is open.\n   *\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines whether the drawer should remain open when the Escape key is pressed.\n   *\n   * This is only applicable when the drawer is in a non-relative position,\n   * as the Escape key does not trigger the closing of relative drawers.\n   *\n   * @attr keep-open-on-escape\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n  public keepOpenOnEscape = false;\n\n  /**\n   * Sets an accessible label for the drawer.\n   *\n   * In non-relative positions this label is applied to the modal `<dialog>` element.\n   * In `relative` position it labels the `<nav>` landmark.\n   *\n   * When multiple navigation landmarks exist on the page each should receive a\n   * distinct label so screen-reader users can differentiate between them.\n   *\n   * @attr label\n   */\n  @property()\n  public label?: string;\n\n  //#endregion\n\n  //#region Lit Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addCommandController(this)\n      .set('--show', this.show)\n      .set('--hide', this.hide)\n      .set('--toggle', this.toggle);\n  }\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (properties.has('position') && this._isRelative) {\n      this._dialog?.close();\n      if (isPopoverOpen(this._mini)) {\n        this._mini?.hidePopover();\n      }\n    }\n\n    super.update(properties);\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (properties.has('open') || properties.has('position')) {\n      this._handleOpenState();\n      this._handleMiniState();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleOpenState(): void {\n    if (this._isRelative) {\n      return;\n    }\n\n    this.open ? this._dialog?.showModal() : this._dialog?.close();\n  }\n\n  private _handleMiniState(): void {\n    if (this._isRelative) {\n      return;\n    }\n\n    const mini = this._mini;\n    if (!mini) {\n      return;\n    }\n\n    const popOverOpen = isPopoverOpen(mini);\n\n    if (!this._hasMiniContent || this.open) {\n      if (popOverOpen) {\n        mini.hidePopover();\n      }\n    } else if (!popOverOpen) {\n      mini.showPopover();\n    }\n  }\n\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (!this.keepOpenOnEscape) {\n      this._closeWithEvent();\n    }\n  }\n\n  private _handleClose(): void {\n    if (this.open) {\n      this._dialog?.showModal();\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (\n      this._dialog === target &&\n      !isPointInsideElement(this._dialog, clientX, clientY)\n    ) {\n      this._closeWithEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private _emitClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\n\n  private async _closeWithEvent(): Promise<boolean> {\n    if (!(this.open && this._emitClosing())) {\n      return false;\n    }\n\n    this.open = false;\n    await this.updateComplete;\n\n    this.emitEvent('igcClosed');\n    return true;\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Opens the drawer. Returns `true` if the operation was successful, `false` if the drawer was already open. */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    await this.updateComplete;\n\n    return true;\n  }\n\n  /** Closes the drawer. Returns `true` if the operation was successful, `false` if the drawer was already closed. */\n  public async hide(): Promise<boolean> {\n    if (!this.open) {\n      return false;\n    }\n\n    this.open = false;\n    await this.updateComplete;\n\n    return true;\n  }\n\n  /** Toggles the open state of the drawer. Delegates to `show()` or `hide()` depending on the current state. */\n  public toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  //#endregion\n\n  private _renderMiniVariant() {\n    return html`\n      <nav\n        ${ref(this._miniRef)}\n        aria-label=${ifDefined(this.label)}\n        part=${partMap({\n          mini: true,\n          hidden: !this._hasMiniContent,\n        })}\n        .inert=${this.open || !this._hasMiniContent}\n        .popover=${!this._isRelative ? 'manual' : null}\n      >\n        <slot name=\"mini\"></slot>\n      </nav>\n    `;\n  }\n\n  private _renderContent() {\n    return html`\n      <div part=\"main\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private _renderDialog() {\n    return html`\n      <dialog\n        ${ref(this._dialogRef)}\n        part=\"base\"\n        aria-modal=\"true\"\n        aria-label=${ifDefined(this.label)}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\n        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}\n      >\n        ${this._renderContent()}\n      </dialog>\n      ${this._renderMiniVariant()}\n    `;\n  }\n\n  private _renderRelative() {\n    return html`\n      <nav part=\"base\" aria-label=${ifDefined(this.label)} .inert=${!this.open}>\n        ${this._renderContent()}\n      </nav>\n      ${this._renderMiniVariant()}\n    `;\n  }\n\n  protected override render() {\n    return html`${cache(\n      this._isRelative ? this._renderRelative() : this._renderDialog()\n    )}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}
+{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addCommandController } from '#internals/controllers/command.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { addToggleController } from '#internals/controllers/toggle.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isPointInsideElement, isPopoverOpen } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { NavDrawerPosition } from '../types.js';\nimport IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';\nimport IgcNavDrawerItemComponent from './nav-drawer-item.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';\n\nexport interface IgcNavDrawerComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * A side navigation container that provides\n * quick access between views within an application.\n *\n * For non-relative positions (`start`, `end`, `top`, `bottom`) the drawer is\n * rendered as a native `<dialog>` element, providing modal semantics, automatic\n * focus trapping, and a backdrop. For the `relative` position it is rendered\n * inline as a `<nav>` landmark.\n *\n * When content is provided in the `mini` slot, a compact icon-only variant is\n * always displayed alongside the main drawer (hidden only while the full drawer\n * is open).\n *\n * The component integrates with the\n * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\n * an Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` / `\"--toggle\"`\n * and `commandfor` pointing to this element will call the corresponding method\n * declaratively without any JavaScript.\n *\n * @element igc-nav-drawer\n *\n * @fires igcClosing - Emitted just before the drawer is closed by a user interaction. Cancelable -\n *   call `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted just after the drawer is closed by a user interaction.\n *\n * @slot - Renders the main navigation content of the drawer.\n * @slot mini - Renders the compact mini variant of the drawer.\n *\n * @csspart base - The base wrapper of the drawer.\n * @csspart main - The main content container of the drawer.\n * @csspart mini - The mini variant container of the drawer.\n */\nexport default class IgcNavDrawerComponent extends EventEmitterMixin<\n  IgcNavDrawerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcNavDrawerComponent,\n      IgcNavDrawerHeaderItemComponent,\n      IgcNavDrawerItemComponent\n    );\n  }\n\n  //#region Internal state\n\n  private readonly _dialogRef = createRef<HTMLDialogElement>();\n  private readonly _miniRef = createRef<HTMLElement>();\n\n  private readonly _toggleController = addToggleController(this, {\n    transition: async (open) => {\n      this.open = open;\n      await this.updateComplete;\n      return true;\n    },\n  });\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('mini'),\n    onChange: this._handleMiniState,\n  });\n\n  private get _dialog(): HTMLDialogElement | undefined {\n    return this._dialogRef.value;\n  }\n\n  private get _mini(): HTMLElement | undefined {\n    return this._miniRef.value;\n  }\n\n  private get _hasMiniContent(): boolean {\n    return this._slots.hasAssignedElements('mini');\n  }\n\n  private get _isRelative(): boolean {\n    return this.position === 'relative';\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Sets the position of the drawer.\n   *\n   * - `start` - anchored to the inline-start edge (default).\n   * - `end` - anchored to the inline-end edge.\n   * - `top` - anchored to the block-start edge.\n   * - `bottom` - anchored to the block-end edge.\n   * - `relative` - rendered inline within the page flow; no modal backdrop.\n   *\n   * @attr position\n   * @default 'start'\n   */\n  @property({ reflect: true })\n  public position: NavDrawerPosition = 'start';\n\n  /**\n   * Whether the drawer is open.\n   *\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines whether the drawer should remain open when the Escape key is pressed.\n   *\n   * This is only applicable when the drawer is in a non-relative position,\n   * as the Escape key does not trigger the closing of relative drawers.\n   *\n   * @attr keep-open-on-escape\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n  public keepOpenOnEscape = false;\n\n  /**\n   * Sets an accessible label for the drawer.\n   *\n   * In non-relative positions this label is applied to the modal `<dialog>` element.\n   * In `relative` position it labels the `<nav>` landmark.\n   *\n   * When multiple navigation landmarks exist on the page each should receive a\n   * distinct label so screen-reader users can differentiate between them.\n   *\n   * @attr label\n   */\n  @property()\n  public label?: string;\n\n  //#endregion\n\n  //#region Lit Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addCommandController(this)\n      .set('--show', this.show)\n      .set('--hide', this.hide)\n      .set('--toggle', this.toggle);\n  }\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (properties.has('position') && this._isRelative) {\n      this._dialog?.close();\n      if (isPopoverOpen(this._mini)) {\n        this._mini?.hidePopover();\n      }\n    }\n\n    super.update(properties);\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (properties.has('open') || properties.has('position')) {\n      this._handleOpenState();\n      this._handleMiniState();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleOpenState(): void {\n    if (this._isRelative) {\n      return;\n    }\n\n    this.open ? this._dialog?.showModal() : this._dialog?.close();\n  }\n\n  private _handleMiniState(): void {\n    if (this._isRelative) {\n      return;\n    }\n\n    const mini = this._mini;\n    if (!mini) {\n      return;\n    }\n\n    const popOverOpen = isPopoverOpen(mini);\n\n    if (!this._hasMiniContent || this.open) {\n      if (popOverOpen) {\n        mini.hidePopover();\n      }\n    } else if (!popOverOpen) {\n      mini.showPopover();\n    }\n  }\n\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (!this.keepOpenOnEscape) {\n      this._closeWithEvent();\n    }\n  }\n\n  private _handleClose(): void {\n    if (this.open) {\n      this._dialog?.showModal();\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (\n      this._dialog === target &&\n      !isPointInsideElement(this._dialog, clientX, clientY)\n    ) {\n      this._closeWithEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private async _closeWithEvent(): Promise<boolean> {\n    return this._toggleController.hide(true);\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Opens the drawer. Returns `true` if the operation was successful, `false` if the drawer was already open. */\n  public async show(): Promise<boolean> {\n    return this._toggleController.show();\n  }\n\n  /** Closes the drawer. Returns `true` if the operation was successful, `false` if the drawer was already closed. */\n  public async hide(): Promise<boolean> {\n    return this._toggleController.hide();\n  }\n\n  /** Toggles the open state of the drawer. Delegates to `show()` or `hide()` depending on the current state. */\n  public toggle(): Promise<boolean> {\n    return this._toggleController.toggle();\n  }\n\n  //#endregion\n\n  private _renderMiniVariant() {\n    return html`\n      <nav\n        ${ref(this._miniRef)}\n        aria-label=${ifDefined(this.label)}\n        part=${partMap({\n          mini: true,\n          hidden: !this._hasMiniContent,\n        })}\n        .inert=${this.open || !this._hasMiniContent}\n        .popover=${!this._isRelative ? 'manual' : null}\n      >\n        <slot name=\"mini\"></slot>\n      </nav>\n    `;\n  }\n\n  private _renderContent() {\n    return html`\n      <div part=\"main\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private _renderDialog() {\n    return html`\n      <dialog\n        ${ref(this._dialogRef)}\n        part=\"base\"\n        aria-modal=\"true\"\n        aria-label=${ifDefined(this.label)}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\n        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}\n      >\n        ${this._renderContent()}\n      </dialog>\n      ${this._renderMiniVariant()}\n    `;\n  }\n\n  private _renderRelative() {\n    return html`\n      <nav part=\"base\" aria-label=${ifDefined(this.label)} .inert=${!this.open}>\n        ${this._renderContent()}\n      </nav>\n      ${this._renderMiniVariant()}\n    `;\n  }\n\n  protected override render() {\n    return html`${cache(\n      this._isRelative ? this._renderRelative() : this._renderDialog()\n    )}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}

package/components/progress/base.d.ts

@@ -1,9 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import type { SlotController } from '#internals/controllers/slot.js';
 import type { StyleVariant } from '../types.js';
 export declare abstract class IgcProgressBaseComponent extends LitElement {
-    private readonly _internals;
     protected abstract _slots: SlotController<any>;
     protected _base: HTMLElement;
     protected _percentage: number;
@@ -48,11 +47,9 @@ export declare abstract class IgcProgressBaseComponent extends LitElement {
      * @attr label-format
      */
     labelFormat: string;
-    protected _indeterminateChange(): void;
-    protected _maxChange(): void;
-    protected _valueChange(): void;
-    protected updated(): void;
-    private _updateARIA;
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private get _labelText();
     private _updateProgress;
     protected _renderLabel(): import("lit-html").TemplateResult<1>;
     protected _renderLabelFormat(): string;

package/components/progress/base.js

@@ -7,20 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { addInternalsController } from '#internals/controllers/internals.js';
-import { watch } from '#internals/decorators/watch.js';
 import { partMap } from '#internals/part-map.js';
 import { asPercent, clamp } from '#internals/utils/math.js';
 import { formatString } from '#internals/utils/strings.js';
 export class IgcProgressBaseComponent extends LitElement {
     constructor() {
-        super(...arguments);
-        this._internals = addInternalsController(this, {
-            initialARIA: {
-                role: 'progressbar',
-                ariaValueMin: '0',
-                ariaValueNow: '0',
-            },
-        });
+        super();
         this._percentage = 0;
         this._progress = 0;
         this._hasFraction = false;
@@ -36,39 +28,32 @@ export class IgcProgressBaseComponent extends LitElement {
         this.animationDuration = 500;
         this.indeterminate = false;
         this.hideLabel = false;
+        addInternalsController(this, {
+            initialARIA: {
+                role: 'progressbar',
+                ariaValueMin: '0',
+                ariaValueNow: '0',
+            },
+            aria: () => ({
+                ariaValueMax: this.max.toString(),
+                ariaValueNow: this.indeterminate ? null : this.value.toString(),
+                ariaValueText: this.indeterminate ? null : this._labelText,
+            }),
+        });
     }
-    _indeterminateChange() {
-        if (!this.indeterminate) {
-            this._updateProgress();
-        }
-    }
-    _maxChange() {
+    willUpdate(changedProperties) {
+        const progressChanged = changedProperties.has('animationDuration') ||
+            changedProperties.has('indeterminate') ||
+            changedProperties.has('max') ||
+            changedProperties.has('value');
         this.max = Math.max(0, this.max);
-        if (this.value > this.max) {
-            this.value = this.max;
-        }
-        if (!this.indeterminate) {
-            this._updateProgress();
-        }
-    }
-    _valueChange() {
         this.value = clamp(this.value, 0, this.max);
-        if (!this.indeterminate) {
+        if (progressChanged && !this.indeterminate) {
             this._updateProgress();
         }
     }
-    updated() {
-        this._updateARIA();
-    }
-    _updateARIA() {
-        const text = this.labelFormat
-            ? this._renderLabelFormat()
-            : `${this.value}%`;
-        this._internals.setARIA({
-            ariaValueMax: this.max.toString(),
-            ariaValueNow: this.indeterminate ? null : this.value.toString(),
-            ariaValueText: this.indeterminate ? null : text,
-        });
+    get _labelText() {
+        return this.labelFormat ? this._renderLabelFormat() : `${this.value}%`;
     }
     _updateProgress() {
         const percentage = asPercent(this.value, Math.max(1, this.max));
@@ -140,13 +125,4 @@ __decorate([
 __decorate([
     property({ attribute: 'label-format' })
 ], IgcProgressBaseComponent.prototype, "labelFormat", void 0);
-__decorate([
-    watch('indeterminate')
-], IgcProgressBaseComponent.prototype, "_indeterminateChange", null);
-__decorate([
-    watch('max')
-], IgcProgressBaseComponent.prototype, "_maxChange", null);
-__decorate([
-    watch('value')
-], IgcProgressBaseComponent.prototype, "_valueChange", null);
 //# sourceMappingURL=base.js.map

package/components/progress/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport type { SlotController } from '#internals/controllers/slot.js';\nimport { watch } from '#internals/decorators/watch.js';\nimport { partMap } from '#internals/part-map.js';\nimport { asPercent, clamp } from '#internals/utils/math.js';\nimport { formatString } from '#internals/utils/strings.js';\nimport type { StyleVariant } from '../types.js';\n\n/* omitModule */\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'progressbar',\n      ariaValueMin: '0',\n      ariaValueNow: '0',\n    },\n  });\n\n  protected abstract _slots: SlotController<any>;\n\n  @query('[part=\"base\"]', true)\n  protected _base!: HTMLElement;\n\n  @state()\n  protected _percentage = 0;\n\n  @state()\n  protected _progress = 0;\n\n  @state()\n  protected _hasFraction = false;\n\n  @state()\n  protected _styleInfo: StyleInfo = {\n    '--_progress-whole': '0.00',\n    '--_progress-integer': '0',\n    '--_progress-fraction': '0',\n    '--_transition-duration': '0ms',\n  };\n\n  /**\n   * Maximum value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 100;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * The variant of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr animation-duration\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 500;\n\n  /**\n   * The indeterminate state of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: false })\n  public indeterminate = false;\n\n  /**\n   * Shows/hides the label of the control.\n   * @attr hide-label\n   */\n  @property({ type: Boolean, attribute: 'hide-label', reflect: false })\n  public hideLabel = false;\n\n  /**\n   * Format string for the default label of the control.\n   * Placeholders:\n   *  {0} - current value of the control.\n   *  {1} - max value of the control.\n   * @attr label-format\n   */\n  @property({ attribute: 'label-format' })\n  public labelFormat!: string;\n\n  @watch('indeterminate')\n  protected _indeterminateChange(): void {\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  @watch('max')\n  protected _maxChange(): void {\n    this.max = Math.max(0, this.max);\n    if (this.value > this.max) {\n      this.value = this.max;\n    }\n\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  @watch('value')\n  protected _valueChange(): void {\n    this.value = clamp(this.value, 0, this.max);\n\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  protected override updated(): void {\n    this._updateARIA();\n  }\n\n  private _updateARIA(): void {\n    const text = this.labelFormat\n      ? this._renderLabelFormat()\n      : `${this.value}%`;\n\n    this._internals.setARIA({\n      ariaValueMax: this.max.toString(),\n      ariaValueNow: this.indeterminate ? null : this.value.toString(),\n      ariaValueText: this.indeterminate ? null : text,\n    });\n  }\n\n  private _updateProgress(): void {\n    const percentage = asPercent(this.value, Math.max(1, this.max));\n    const fractionValue = Math.round((percentage % 1) * 100);\n    this._hasFraction = fractionValue > 0;\n\n    this._styleInfo = {\n      '--_progress-whole': percentage.toFixed(2),\n      '--_progress-integer': Math.floor(percentage),\n      '--_progress-fraction': fractionValue,\n      '--_transition-duration': `${this.animationDuration}ms`,\n    };\n  }\n\n  protected _renderLabel() {\n    const parts = {\n      label: true,\n      value: true,\n      fraction: this._hasFraction,\n    };\n\n    return this.labelFormat\n      ? html`<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`\n      : html`<span part=${partMap({ ...parts, counter: true })}></span>`;\n  }\n\n  protected _renderLabelFormat(): string {\n    return formatString(this.labelFormat, this.value, this.max);\n  }\n\n  protected _renderDefaultSlot() {\n    const hideDefaultLabel =\n      this.indeterminate ||\n      this.hideLabel ||\n      this._slots.hasAssignedElements('[default]');\n\n    return html`\n      <slot part=\"label\"></slot>\n      ${hideDefaultLabel ? nothing : this._renderLabel()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport type { SlotController } from '#internals/controllers/slot.js';\nimport { partMap } from '#internals/part-map.js';\nimport { asPercent, clamp } from '#internals/utils/math.js';\nimport { formatString } from '#internals/utils/strings.js';\nimport type { StyleVariant } from '../types.js';\n\n/* omitModule */\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  protected abstract _slots: SlotController<any>;\n\n  @query('[part=\"base\"]', true)\n  protected _base!: HTMLElement;\n\n  @state()\n  protected _percentage = 0;\n\n  @state()\n  protected _progress = 0;\n\n  @state()\n  protected _hasFraction = false;\n\n  @state()\n  protected _styleInfo: StyleInfo = {\n    '--_progress-whole': '0.00',\n    '--_progress-integer': '0',\n    '--_progress-fraction': '0',\n    '--_transition-duration': '0ms',\n  };\n\n  /**\n   * Maximum value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 100;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * The variant of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr animation-duration\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 500;\n\n  /**\n   * The indeterminate state of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: false })\n  public indeterminate = false;\n\n  /**\n   * Shows/hides the label of the control.\n   * @attr hide-label\n   */\n  @property({ type: Boolean, attribute: 'hide-label', reflect: false })\n  public hideLabel = false;\n\n  /**\n   * Format string for the default label of the control.\n   * Placeholders:\n   *  {0} - current value of the control.\n   *  {1} - max value of the control.\n   * @attr label-format\n   */\n  @property({ attribute: 'label-format' })\n  public labelFormat!: string;\n\n  constructor() {\n    super();\n\n    addInternalsController(this, {\n      initialARIA: {\n        role: 'progressbar',\n        ariaValueMin: '0',\n        ariaValueNow: '0',\n      },\n      aria: () => ({\n        ariaValueMax: this.max.toString(),\n        ariaValueNow: this.indeterminate ? null : this.value.toString(),\n        ariaValueText: this.indeterminate ? null : this._labelText,\n      }),\n    });\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    const progressChanged =\n      changedProperties.has('animationDuration') ||\n      changedProperties.has('indeterminate') ||\n      changedProperties.has('max') ||\n      changedProperties.has('value');\n\n    // Both writes are idempotent, so they are applied unconditionally. A clamp\n    // that does change a value lands it in `changedProperties` for this pass.\n    this.max = Math.max(0, this.max);\n    this.value = clamp(this.value, 0, this.max);\n\n    if (progressChanged && !this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  private get _labelText(): string {\n    return this.labelFormat ? this._renderLabelFormat() : `${this.value}%`;\n  }\n\n  private _updateProgress(): void {\n    const percentage = asPercent(this.value, Math.max(1, this.max));\n    const fractionValue = Math.round((percentage % 1) * 100);\n    this._hasFraction = fractionValue > 0;\n\n    this._styleInfo = {\n      '--_progress-whole': percentage.toFixed(2),\n      '--_progress-integer': Math.floor(percentage),\n      '--_progress-fraction': fractionValue,\n      '--_transition-duration': `${this.animationDuration}ms`,\n    };\n  }\n\n  protected _renderLabel() {\n    const parts = {\n      label: true,\n      value: true,\n      fraction: this._hasFraction,\n    };\n\n    return this.labelFormat\n      ? html`<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`\n      : html`<span part=${partMap({ ...parts, counter: true })}></span>`;\n  }\n\n  protected _renderLabelFormat(): string {\n    return formatString(this.labelFormat, this.value, this.max);\n  }\n\n  protected _renderDefaultSlot() {\n    const hideDefaultLabel =\n      this.indeterminate ||\n      this.hideLabel ||\n      this._slots.hasAssignedElements('[default]');\n\n    return html`\n      <slot part=\"label\"></slot>\n      ${hideDefaultLabel ? nothing : this._renderLabel()}\n    `;\n  }\n}\n"]}

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

@@ -125,7 +125,7 @@ export default class IgcQrCodeComponent extends LitElement {
     private _pickErrorLevel;
     private _getErrorLevelAndArea;
     private _getMatrix;
-    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -10,7 +10,7 @@ import { createAbortHandle } from '#internals/abort-handler.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { bindIf } from '#internals/utils/lit.js';
 import { clamp } from '#internals/utils/math.js';
-import { nanoid } from '#internals/utils/strings.js';
+import { createIdGenerator } from '#internals/utils/strings.js';
 import { addThemingController } from '#theming/theming-controller.js';
 import { generateQRCodeMatrix } from './model/matrix.js';
 import { DEFAULT_SIZE_RATIO, MAX_SAFE_AREA, SAFE_AREAS, } from './renderer/constants.js';
@@ -20,6 +20,7 @@ import { renderQrMaskAndImage } from './renderer/image.js';
 import { styles } from './themes/qr-code.base.css.js';
 import { styles as shared } from './themes/shared/qr-code.common.css.js';
 import { all } from './themes/themes.js';
+const nextMaskId = createIdGenerator('igc-qr-code-mask');
 export default class IgcQrCodeComponent extends LitElement {
     static { this.tagName = 'igc-qr-code'; }
     static { this.styles = [styles, shared]; }
@@ -29,7 +30,7 @@ export default class IgcQrCodeComponent extends LitElement {
     constructor() {
         super();
         this._abortHandle = createAbortHandle();
-        this._maskId = nanoid(8);
+        this._maskId = nextMaskId();
         this._maskUrl = `url(#${this._maskId})`;
         this._logoAspectRatio = 1;
         this._logoLoadFailed = false;

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

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","sourceRoot":"","sources":["../../../src/components/qr-code/qr-code.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createAbortHandle } from '#internals/abort-handler.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { clamp } from '#internals/utils/math.js';\nimport { nanoid } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { QRCodeMatrixResult } from './model/matrix.js';\nimport { generateQRCodeMatrix } from './model/matrix.js';\nimport {\n  DEFAULT_SIZE_RATIO,\n  MAX_SAFE_AREA,\n  SAFE_AREAS,\n} from './renderer/constants.js';\nimport { renderQrFinders } from './renderer/corner.js';\nimport { renderQrDots } from './renderer/dots.js';\nimport { renderQrMaskAndImage } from './renderer/image.js';\nimport { styles } from './themes/qr-code.base.css.js';\nimport { styles as shared } from './themes/shared/qr-code.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n  QrCornerSquareStyle,\n  QrDotStyle,\n  QrErrorCorrectionLevel,\n} from './types.js';\n\n/**\n *\n * Generates a QR code based on the provided value and options.\n * The component renders an SVG representation of the QR code, which can be customized using various properties.\n *\n * @element igc-qr-code\n *\n * @cssproperty --ig-qr-code-background - The background color of the QR code. Default is `white`.\n * @cssproperty --ig-qr-code-dark-color - The color of the data modules (dots), and the corner square/dot colors unless overridden below. Default is `black`.\n * @cssproperty --ig-qr-code-corner-square-color - The color of the outer finder-pattern corner squares. Defaults to `--ig-qr-code-dark-color`.\n * @cssproperty --ig-qr-code-corner-dot-color - The color of the inner finder-pattern corner dots. Defaults to `--ig-qr-code-dark-color`.\n *\n * @csspart background - The background rect of the QR code.\n * @csspart dots - The data modules (dots) of the QR code.\n * @csspart corner-square - The outer corner (finder-pattern) squares of the QR code.\n * @csspart corner-dot - The inner corner (finder-pattern) dots of the QR code.\n */\nexport default class IgcQrCodeComponent extends LitElement {\n  public static readonly tagName = 'igc-qr-code';\n\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcQrCodeComponent);\n  }\n\n  private readonly _abortHandle = createAbortHandle();\n  private readonly _maskId = nanoid(8);\n  private readonly _maskUrl = `url(#${this._maskId})`;\n  private _matrixCache?: {\n    value: string;\n    errorLevel: QrErrorCorrectionLevel;\n    version?: number;\n    result: QRCodeMatrixResult;\n  };\n\n  @state()\n  private _logoAspectRatio = 1;\n\n  @state()\n  private _logoLoadFailed = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /**\n   * The value to be encoded in the QR code. This can be any string, such as a URL, text, or other data.\n   * When this property is set, the component will generate a QR code representing the provided value.\n   *\n   * @attr value\n   */\n  @property()\n  public value?: string;\n\n  /**\n   * The version of the QR code to generate, which determines the size and data capacity of the QR code.\n   * Valid values are integers from 1 to 40, where each version corresponds to a specific module size and data capacity.\n   *\n   * If not specified, the component will automatically select the smallest version that can accommodate the provided value.\n   *\n   * @attr version\n   */\n  @property({ type: Number })\n  public version?: number;\n\n  /**\n   * The error correction level for the QR code, which determines the QR code's ability to be read if it is partially obscured or damaged.\n   * Valid values are 'L', 'M', 'Q', and 'H', where 'L' provides the lowest level of error correction and 'H' provides the highest level.\n   *\n   * @attr error-level\n   * @default 'M'\n   */\n  @property({ attribute: 'error-level' })\n  public errorLevel?: QrErrorCorrectionLevel = 'M';\n\n  /**\n   * The size of the QR code in pixels. This determines the width and height of the generated QR code. The default value is 128 pixels.\n   *\n   * @attr size\n   * @default 128\n   */\n  @property({ type: Number })\n  public size = 128;\n\n  /**\n   * The margin (quiet zone) around the QR code, expressed as a number of QR code modules rather\n   * than pixels. This is the blank border area surrounding the code, which helps ensure that it\n   * can be properly scanned.\n   *\n   * @attr margin\n   * @default 4\n   */\n  @property({ type: Number })\n  public margin = 4;\n\n  /**\n   * The source URL of an optional logo image to be displayed at the center of the QR code. The logo can help with branding and recognition.\n   * If provided, the component will attempt to render the logo within the QR code while maintaining scannability.\n   *\n   * @attr logo-src\n   */\n  @property({ attribute: 'logo-src' })\n  public logoSrc?: string;\n\n  /**\n   * The size of the logo, as a ratio of the maximum area that can safely be obscured by a logo\n   * while the QR code remains scannable (up to 9% of the code's area, at the highest error\n   * correction level). The value should be a number between 0 and 1, where 0 means no logo and 1\n   * means the logo will cover the full safe area (not the entire QR code).\n   * The default value is 0.4, meaning the logo covers 40% of that safe area (~3.6% of the QR code).\n   *\n   * When `error-level` is not explicitly set, the smallest error correction level that can\n   * accommodate the requested logo size is chosen automatically.\n   *\n   * @attr logo-size\n   * @default 0.4\n   */\n  @property({ type: Number, attribute: 'logo-size' })\n  public logoSize = 0.4;\n\n  /**\n   * The margin around the logo in pixels. This is the whitespace area surrounding the logo within the QR code,\n   * which helps ensure that the logo does not interfere with the QR code's scannability.\n   *\n   * @attr logo-margin\n   */\n  @property({ type: Number, attribute: 'logo-margin' })\n  public logoMargin?: number;\n\n  /**\n   * The style of the data modules (dots) in the QR code, and of the inner dot of each finder-pattern\n   * corner. This can be 'square', 'circle', or 'rounded'.\n   *\n   * @attr dot-style\n   * @default 'square'\n   */\n  @property({ attribute: 'dot-style' })\n  public dotStyle: QrDotStyle = 'square';\n\n  /**\n   * The style of the corner squares in the QR code. This can be 'square', 'circle', or 'rounded'.\n   *\n   * @attr square-style\n   * @default 'square'\n   */\n  @property({ attribute: 'square-style' })\n  public squareStyle: QrCornerSquareStyle = 'square';\n\n  /** @internal */\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('logoSrc')) {\n      this._resolveAspectRatio();\n    }\n\n    super.update(props);\n  }\n\n  private _resolveAspectRatio(): void {\n    this._abortHandle.abort();\n    this._logoLoadFailed = false;\n    this._logoAspectRatio = 1;\n\n    if (!this._hasValidLogoSrc()) {\n      return;\n    }\n\n    const signal = this._abortHandle.signal;\n    const img = new Image();\n    img.src = this.logoSrc!;\n\n    if (img.complete) {\n      if (img.naturalWidth && img.naturalHeight) {\n        this._logoAspectRatio = img.naturalWidth / img.naturalHeight;\n      } else {\n        this._logoLoadFailed = true;\n      }\n      return;\n    }\n\n    img.addEventListener(\n      'load',\n      () => {\n        if (img.naturalWidth && img.naturalHeight) {\n          this._logoAspectRatio = img.naturalWidth / img.naturalHeight;\n        } else {\n          this._logoLoadFailed = true;\n        }\n      },\n      { once: true, signal }\n    );\n\n    img.addEventListener(\n      'error',\n      () => {\n        this._logoLoadFailed = true;\n      },\n      { once: true, signal }\n    );\n  }\n\n  /**\n   * Determines whether a valid logo source is provided.\n   *\n   * The method checks if the `logoSrc` property is set and if it does not start with potentially unsafe schemes like 'javascript:' or 'vbscript:'.\n   * It also ensures that if the source is a data URI, it must be an image type.\n   * This validation helps prevent security risks associated with rendering untrusted content in the QR code.\n   */\n  private _hasValidLogoSrc(): boolean {\n    if (!this.logoSrc) return false;\n    const s = this.logoSrc.trim().toLowerCase();\n    if (s.startsWith('javascript:') || s.startsWith('vbscript:')) return false;\n    if (s.startsWith('data:') && !s.startsWith('data:image/')) return false;\n    return true;\n  }\n\n  private _pickErrorLevel(area: number): QrErrorCorrectionLevel {\n    if (area <= SAFE_AREAS.L) return 'L';\n    if (area <= SAFE_AREAS.M) return 'M';\n    if (area <= SAFE_AREAS.Q) return 'Q';\n    return 'H';\n  }\n\n  private _getErrorLevelAndArea(hasLogo: boolean) {\n    const userErrorLevel = this.errorLevel;\n    const size = this.logoSize;\n    const sizeRatio = hasLogo ? clamp(size ?? DEFAULT_SIZE_RATIO, 0, 1) : 0;\n    const targetArea = sizeRatio * MAX_SAFE_AREA;\n\n    let errorLevel: QrErrorCorrectionLevel;\n    let area: number;\n\n    if (userErrorLevel) {\n      errorLevel = userErrorLevel;\n      area = Math.min(targetArea, SAFE_AREAS[userErrorLevel]);\n    } else if (targetArea > 0) {\n      errorLevel = this._pickErrorLevel(targetArea);\n      area = targetArea;\n    } else {\n      errorLevel = 'M';\n      area = 0;\n    }\n\n    return { errorLevel, area };\n  }\n\n  private _getMatrix(\n    value: string,\n    errorLevel: QrErrorCorrectionLevel\n  ): QRCodeMatrixResult {\n    const cached = this._matrixCache;\n    if (\n      cached &&\n      cached.value === value &&\n      cached.errorLevel === errorLevel &&\n      cached.version === this.version\n    ) {\n      return cached.result;\n    }\n\n    const result = generateQRCodeMatrix(value, errorLevel, this.version);\n    this._matrixCache = { value, errorLevel, version: this.version, result };\n    return result;\n  }\n\n  protected override render() {\n    if (!this.value) return nothing;\n\n    const hasLogo = this._hasValidLogoSrc() && !this._logoLoadFailed;\n    const { errorLevel, area } = this._getErrorLevelAndArea(hasLogo);\n\n    const { matrix, size } = this._getMatrix(this.value, errorLevel);\n\n    const totalModules = size + this.margin * 2;\n    const moduleSize = size / totalModules;\n    const marginPx = this.margin * moduleSize;\n    const svgSize = moduleSize * (size + this.margin * 2);\n\n    const { mask, image, shouldApplyMask } = renderQrMaskAndImage({\n      hasLogo,\n      src: this.logoSrc!,\n      aspectRatio: this._logoAspectRatio,\n      area,\n      size: this.size,\n      margin: this.logoMargin,\n      svgSize,\n      maskId: this._maskId,\n    });\n\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=\"img\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 ${svgSize} ${svgSize}\"\n      >\n        <title>${this.ariaLabel ?? `QR code: ${this.value}`}</title>\n\n        <rect part=\"background\" width=${svgSize} height=${svgSize} />\n        ${mask}\n        <g mask=${bindIf(shouldApplyMask, this._maskUrl)}>\n          ${renderQrDots({\n            matrix,\n            moduleSize,\n            marginPx,\n            dotStyle: this.dotStyle,\n          })}\n          ${renderQrFinders({\n            size,\n            moduleSize,\n            marginPx,\n            dotStyle: this.dotStyle,\n            squareStyle: this.squareStyle,\n          })}\n        </g>\n        ${image}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-qr-code': IgcQrCodeComponent;\n  }\n}\n"]}
+{"version":3,"file":"qr-code.js","sourceRoot":"","sources":["../../../src/components/qr-code/qr-code.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createAbortHandle } from '#internals/abort-handler.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { clamp } from '#internals/utils/math.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { QRCodeMatrixResult } from './model/matrix.js';\nimport { generateQRCodeMatrix } from './model/matrix.js';\nimport {\n  DEFAULT_SIZE_RATIO,\n  MAX_SAFE_AREA,\n  SAFE_AREAS,\n} from './renderer/constants.js';\nimport { renderQrFinders } from './renderer/corner.js';\nimport { renderQrDots } from './renderer/dots.js';\nimport { renderQrMaskAndImage } from './renderer/image.js';\nimport { styles } from './themes/qr-code.base.css.js';\nimport { styles as shared } from './themes/shared/qr-code.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n  QrCornerSquareStyle,\n  QrDotStyle,\n  QrErrorCorrectionLevel,\n} from './types.js';\n\nconst nextMaskId = createIdGenerator('igc-qr-code-mask');\n\n/**\n *\n * Generates a QR code based on the provided value and options.\n * The component renders an SVG representation of the QR code, which can be customized using various properties.\n *\n * @element igc-qr-code\n *\n * @cssproperty --ig-qr-code-background - The background color of the QR code. Default is `white`.\n * @cssproperty --ig-qr-code-dark-color - The color of the data modules (dots), and the corner square/dot colors unless overridden below. Default is `black`.\n * @cssproperty --ig-qr-code-corner-square-color - The color of the outer finder-pattern corner squares. Defaults to `--ig-qr-code-dark-color`.\n * @cssproperty --ig-qr-code-corner-dot-color - The color of the inner finder-pattern corner dots. Defaults to `--ig-qr-code-dark-color`.\n *\n * @csspart background - The background rect of the QR code.\n * @csspart dots - The data modules (dots) of the QR code.\n * @csspart corner-square - The outer corner (finder-pattern) squares of the QR code.\n * @csspart corner-dot - The inner corner (finder-pattern) dots of the QR code.\n */\nexport default class IgcQrCodeComponent extends LitElement {\n  public static readonly tagName = 'igc-qr-code';\n\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcQrCodeComponent);\n  }\n\n  private readonly _abortHandle = createAbortHandle();\n  private readonly _maskId = nextMaskId();\n  private readonly _maskUrl = `url(#${this._maskId})`;\n  private _matrixCache?: {\n    value: string;\n    errorLevel: QrErrorCorrectionLevel;\n    version?: number;\n    result: QRCodeMatrixResult;\n  };\n\n  @state()\n  private _logoAspectRatio = 1;\n\n  @state()\n  private _logoLoadFailed = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /**\n   * The value to be encoded in the QR code. This can be any string, such as a URL, text, or other data.\n   * When this property is set, the component will generate a QR code representing the provided value.\n   *\n   * @attr value\n   */\n  @property()\n  public value?: string;\n\n  /**\n   * The version of the QR code to generate, which determines the size and data capacity of the QR code.\n   * Valid values are integers from 1 to 40, where each version corresponds to a specific module size and data capacity.\n   *\n   * If not specified, the component will automatically select the smallest version that can accommodate the provided value.\n   *\n   * @attr version\n   */\n  @property({ type: Number })\n  public version?: number;\n\n  /**\n   * The error correction level for the QR code, which determines the QR code's ability to be read if it is partially obscured or damaged.\n   * Valid values are 'L', 'M', 'Q', and 'H', where 'L' provides the lowest level of error correction and 'H' provides the highest level.\n   *\n   * @attr error-level\n   * @default 'M'\n   */\n  @property({ attribute: 'error-level' })\n  public errorLevel?: QrErrorCorrectionLevel = 'M';\n\n  /**\n   * The size of the QR code in pixels. This determines the width and height of the generated QR code. The default value is 128 pixels.\n   *\n   * @attr size\n   * @default 128\n   */\n  @property({ type: Number })\n  public size = 128;\n\n  /**\n   * The margin (quiet zone) around the QR code, expressed as a number of QR code modules rather\n   * than pixels. This is the blank border area surrounding the code, which helps ensure that it\n   * can be properly scanned.\n   *\n   * @attr margin\n   * @default 4\n   */\n  @property({ type: Number })\n  public margin = 4;\n\n  /**\n   * The source URL of an optional logo image to be displayed at the center of the QR code. The logo can help with branding and recognition.\n   * If provided, the component will attempt to render the logo within the QR code while maintaining scannability.\n   *\n   * @attr logo-src\n   */\n  @property({ attribute: 'logo-src' })\n  public logoSrc?: string;\n\n  /**\n   * The size of the logo, as a ratio of the maximum area that can safely be obscured by a logo\n   * while the QR code remains scannable (up to 9% of the code's area, at the highest error\n   * correction level). The value should be a number between 0 and 1, where 0 means no logo and 1\n   * means the logo will cover the full safe area (not the entire QR code).\n   * The default value is 0.4, meaning the logo covers 40% of that safe area (~3.6% of the QR code).\n   *\n   * When `error-level` is not explicitly set, the smallest error correction level that can\n   * accommodate the requested logo size is chosen automatically.\n   *\n   * @attr logo-size\n   * @default 0.4\n   */\n  @property({ type: Number, attribute: 'logo-size' })\n  public logoSize = 0.4;\n\n  /**\n   * The margin around the logo in pixels. This is the whitespace area surrounding the logo within the QR code,\n   * which helps ensure that the logo does not interfere with the QR code's scannability.\n   *\n   * @attr logo-margin\n   */\n  @property({ type: Number, attribute: 'logo-margin' })\n  public logoMargin?: number;\n\n  /**\n   * The style of the data modules (dots) in the QR code, and of the inner dot of each finder-pattern\n   * corner. This can be 'square', 'circle', or 'rounded'.\n   *\n   * @attr dot-style\n   * @default 'square'\n   */\n  @property({ attribute: 'dot-style' })\n  public dotStyle: QrDotStyle = 'square';\n\n  /**\n   * The style of the corner squares in the QR code. This can be 'square', 'circle', or 'rounded'.\n   *\n   * @attr square-style\n   * @default 'square'\n   */\n  @property({ attribute: 'square-style' })\n  public squareStyle: QrCornerSquareStyle = 'square';\n\n  /** @internal */\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('logoSrc')) {\n      this._resolveAspectRatio();\n    }\n\n    super.update(props);\n  }\n\n  private _resolveAspectRatio(): void {\n    this._abortHandle.abort();\n    this._logoLoadFailed = false;\n    this._logoAspectRatio = 1;\n\n    if (!this._hasValidLogoSrc()) {\n      return;\n    }\n\n    const signal = this._abortHandle.signal;\n    const img = new Image();\n    img.src = this.logoSrc!;\n\n    if (img.complete) {\n      if (img.naturalWidth && img.naturalHeight) {\n        this._logoAspectRatio = img.naturalWidth / img.naturalHeight;\n      } else {\n        this._logoLoadFailed = true;\n      }\n      return;\n    }\n\n    img.addEventListener(\n      'load',\n      () => {\n        if (img.naturalWidth && img.naturalHeight) {\n          this._logoAspectRatio = img.naturalWidth / img.naturalHeight;\n        } else {\n          this._logoLoadFailed = true;\n        }\n      },\n      { once: true, signal }\n    );\n\n    img.addEventListener(\n      'error',\n      () => {\n        this._logoLoadFailed = true;\n      },\n      { once: true, signal }\n    );\n  }\n\n  /**\n   * Determines whether a valid logo source is provided.\n   *\n   * The method checks if the `logoSrc` property is set and if it does not start with potentially unsafe schemes like 'javascript:' or 'vbscript:'.\n   * It also ensures that if the source is a data URI, it must be an image type.\n   * This validation helps prevent security risks associated with rendering untrusted content in the QR code.\n   */\n  private _hasValidLogoSrc(): boolean {\n    if (!this.logoSrc) return false;\n    const s = this.logoSrc.trim().toLowerCase();\n    if (s.startsWith('javascript:') || s.startsWith('vbscript:')) return false;\n    if (s.startsWith('data:') && !s.startsWith('data:image/')) return false;\n    return true;\n  }\n\n  private _pickErrorLevel(area: number): QrErrorCorrectionLevel {\n    if (area <= SAFE_AREAS.L) return 'L';\n    if (area <= SAFE_AREAS.M) return 'M';\n    if (area <= SAFE_AREAS.Q) return 'Q';\n    return 'H';\n  }\n\n  private _getErrorLevelAndArea(hasLogo: boolean) {\n    const userErrorLevel = this.errorLevel;\n    const size = this.logoSize;\n    const sizeRatio = hasLogo ? clamp(size ?? DEFAULT_SIZE_RATIO, 0, 1) : 0;\n    const targetArea = sizeRatio * MAX_SAFE_AREA;\n\n    let errorLevel: QrErrorCorrectionLevel;\n    let area: number;\n\n    if (userErrorLevel) {\n      errorLevel = userErrorLevel;\n      area = Math.min(targetArea, SAFE_AREAS[userErrorLevel]);\n    } else if (targetArea > 0) {\n      errorLevel = this._pickErrorLevel(targetArea);\n      area = targetArea;\n    } else {\n      errorLevel = 'M';\n      area = 0;\n    }\n\n    return { errorLevel, area };\n  }\n\n  private _getMatrix(\n    value: string,\n    errorLevel: QrErrorCorrectionLevel\n  ): QRCodeMatrixResult {\n    const cached = this._matrixCache;\n    if (\n      cached &&\n      cached.value === value &&\n      cached.errorLevel === errorLevel &&\n      cached.version === this.version\n    ) {\n      return cached.result;\n    }\n\n    const result = generateQRCodeMatrix(value, errorLevel, this.version);\n    this._matrixCache = { value, errorLevel, version: this.version, result };\n    return result;\n  }\n\n  protected override render() {\n    if (!this.value) return nothing;\n\n    const hasLogo = this._hasValidLogoSrc() && !this._logoLoadFailed;\n    const { errorLevel, area } = this._getErrorLevelAndArea(hasLogo);\n\n    const { matrix, size } = this._getMatrix(this.value, errorLevel);\n\n    const totalModules = size + this.margin * 2;\n    const moduleSize = size / totalModules;\n    const marginPx = this.margin * moduleSize;\n    const svgSize = moduleSize * (size + this.margin * 2);\n\n    const { mask, image, shouldApplyMask } = renderQrMaskAndImage({\n      hasLogo,\n      src: this.logoSrc!,\n      aspectRatio: this._logoAspectRatio,\n      area,\n      size: this.size,\n      margin: this.logoMargin,\n      svgSize,\n      maskId: this._maskId,\n    });\n\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=\"img\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 ${svgSize} ${svgSize}\"\n      >\n        <title>${this.ariaLabel ?? `QR code: ${this.value}`}</title>\n\n        <rect part=\"background\" width=${svgSize} height=${svgSize} />\n        ${mask}\n        <g mask=${bindIf(shouldApplyMask, this._maskUrl)}>\n          ${renderQrDots({\n            matrix,\n            moduleSize,\n            marginPx,\n            dotStyle: this.dotStyle,\n          })}\n          ${renderQrFinders({\n            size,\n            moduleSize,\n            marginPx,\n            dotStyle: this.dotStyle,\n            squareStyle: this.squareStyle,\n          })}\n        </g>\n        ${image}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-qr-code': IgcQrCodeComponent;\n  }\n}\n"]}

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

@@ -11,6 +11,6 @@ export type QrCornerSquareStyle = 'square' | 'circle' | 'rounded';
 export type QrErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
 /**
  * QR data encoding mode, selected automatically based on the input string.
- * - `numeric` — digits only; `alphanumeric` — digits + uppercase letters + a few symbols; `byte` — arbitrary UTF-8.
+ * - `numeric` - digits only; `alphanumeric` - digits + uppercase letters + a few symbols; `byte` - arbitrary UTF-8.
  */
 export type QrEncodingMode = 'numeric' | 'alphanumeric' | 'byte';

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/qr-code/types.ts"],"names":[],"mappings":"","sourcesContent":["/** Shape of individual data modules in the QR code body. */\nexport type QrDotStyle = 'square' | 'circle' | 'rounded';\n\n/** Shape of the inner dot inside each finder-pattern corner. */\nexport type QrCornerDotStyle = 'square' | 'circle' | 'rounded';\n\n/** Shape of the outer square of each finder-pattern corner. */\nexport type QrCornerSquareStyle = 'square' | 'circle' | 'rounded';\n\n/**\n * QR error correction level. Higher levels recover more data but reduce capacity.\n * - `L` ~7%, `M` ~15%, `Q` ~25%, `H` ~30%.\n */\nexport type QrErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';\n\n/**\n * QR data encoding mode, selected automatically based on the input string.\n * - `numeric` — digits only; `alphanumeric` — digits + uppercase letters + a few symbols; `byte` — arbitrary UTF-8.\n */\nexport type QrEncodingMode = 'numeric' | 'alphanumeric' | 'byte';\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/qr-code/types.ts"],"names":[],"mappings":"","sourcesContent":["/** Shape of individual data modules in the QR code body. */\nexport type QrDotStyle = 'square' | 'circle' | 'rounded';\n\n/** Shape of the inner dot inside each finder-pattern corner. */\nexport type QrCornerDotStyle = 'square' | 'circle' | 'rounded';\n\n/** Shape of the outer square of each finder-pattern corner. */\nexport type QrCornerSquareStyle = 'square' | 'circle' | 'rounded';\n\n/**\n * QR error correction level. Higher levels recover more data but reduce capacity.\n * - `L` ~7%, `M` ~15%, `Q` ~25%, `H` ~30%.\n */\nexport type QrErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';\n\n/**\n * QR data encoding mode, selected automatically based on the input string.\n * - `numeric` - digits only; `alphanumeric` - digits + uppercase letters + a few symbols; `byte` - arbitrary UTF-8.\n */\nexport type QrEncodingMode = 'numeric' | 'alphanumeric' | 'byte';\n"]}

package/components/radio/controller.d.ts

@@ -1,34 +1,6 @@
-import type { ReactiveController } from 'lit';
+import { type GroupMemberController } from '#internals/controllers/group.js';
 import type IgcRadioComponent from './radio.js';
-/** Keeps a radio in the group of its current root node and name. */
-declare class RadioGroupController implements ReactiveController {
-    /** Gives each radio of the group the state that the group derives. */
-    private static _sync;
-    private readonly _host;
-    private readonly _onSync;
-    /** The root node the host is registered under, or null while it is not registered. */
-    private _root;
-    private _name;
-    /** Whether the host still belongs to the group that holds its entry. */
-    private get _isCurrent();
-    private get _group();
-    /** The radios of the host group, in DOM order. A radio with no group is on its own. */
-    get members(): IgcRadioComponent[];
-    constructor(host: IgcRadioComponent, onSync: (hasCheckedRadio: boolean) => void);
-    /** @internal */
-    hostConnected(): void;
-    /** @internal */
-    hostDisconnected(): void;
-    /**
-     * Moves the host to the group of its current root node and name. Does nothing while
-     * both stay the same. If not, the group that the host joins and the group that it
-     * leaves both update their state.
-     */
-    updateMembership(): void;
-    /** Updates the state of the host group. */
-    sync(): void;
-    private _unregister;
-}
+type RadioGroupController = GroupMemberController<IgcRadioComponent>;
 export type { RadioGroupController };
 export declare function addRadioGroupController(host: IgcRadioComponent, onSync: (hasCheckedRadio: boolean) => void): RadioGroupController;
 /** Returns the radios of the group of `member`, in DOM order. */

package/components/radio/controller.js

@@ -1,100 +1,14 @@
-import { isEmpty } from '#internals/utils/arrays.js';
+import { createGroupRegistry, } from '#internals/controllers/group.js';
 import { getRoot } from '#internals/utils/dom.js';
-const registry = new WeakMap();
-const controllers = new WeakMap();
-function byDocumentOrder(a, b) {
-    if (a === b) {
-        return 0;
-    }
-    return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
-        ? -1
-        : 1;
-}
-function groupOf(root, name) {
-    const names = registry.get(root) ?? new Map();
-    const group = names.get(name) ?? new Set();
-    names.set(name, group);
-    registry.set(root, names);
-    return group;
-}
-class RadioGroupController {
-    static _sync(group) {
-        const members = Array.from(group);
-        const hasCheckedRadio = members.some((member) => member._host.checked && !member._host.disabled);
-        for (const member of members) {
-            member._onSync(hasCheckedRadio);
-        }
-    }
-    get _isCurrent() {
-        return this._host.name === this._name && getRoot(this._host) === this._root;
-    }
-    get _group() {
-        const entries = this._root
-            ? Array.from(registry.get(this._root)?.get(this._name) ?? [])
-            : [];
-        const members = entries.filter((member) => member._isCurrent);
-        return isEmpty(members)
-            ? [this]
-            : members.sort((a, b) => byDocumentOrder(a._host, b._host));
-    }
-    get members() {
-        return this._group.map((member) => member._host);
-    }
-    constructor(host, onSync) {
-        this._root = null;
-        this._name = '';
-        this._host = host;
-        this._onSync = onSync;
-        controllers.set(host, this);
-        host.addController(this);
-    }
-    hostConnected() {
-        this.updateMembership();
-    }
-    hostDisconnected() {
-        this._unregister();
-    }
-    updateMembership() {
-        const host = this._host;
-        const root = host.isConnected ? getRoot(host) : null;
-        const name = host.name || '';
-        if (root === this._root && name === this._name) {
-            return;
-        }
-        this._unregister();
-        if (root && name) {
-            this._root = root;
-            this._name = name;
-            groupOf(root, name).add(this);
-        }
-        this.sync();
-    }
-    sync() {
-        RadioGroupController._sync(this._group);
-    }
-    _unregister() {
-        const { _root: root, _name: name } = this;
-        const names = root ? registry.get(root) : undefined;
-        const group = names?.get(name);
-        this._root = null;
-        this._name = '';
-        if (!group?.delete(this)) {
-            return;
-        }
-        if (isEmpty(group)) {
-            names?.delete(name);
-        }
-        else {
-            RadioGroupController._sync(group);
-        }
-    }
-}
+const radioGroups = createGroupRegistry({
+    keyOf: (radio) => radio.name || '',
+    scopeOf: (radio) => radio.form ?? getRoot(radio),
+    deriveState: (radios) => radios.some((radio) => radio.checked && !radio.disabled),
+});
 export function addRadioGroupController(host, onSync) {
-    return new RadioGroupController(host, onSync);
+    return radioGroups.attach(host, onSync);
 }
 export function getGroupMembers(member) {
-    const controller = controllers.get(member);
-    controller?.updateMembership();
-    return controller?.members ?? [member];
+    return radioGroups.membersOf(member);
 }
 //# sourceMappingURL=controller.js.map