igniteui-webcomponents 7.1.2 → 7.2.0

package/components/nav-drawer/nav-drawer.d.ts

@@ -1,41 +1,116 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
 import type { NavDrawerPosition } from '../types.js';
+export interface IgcNavDrawerComponentEventMap {
+    igcClosing: CustomEvent<void>;
+    igcClosed: CustomEvent<void>;
+}
+declare const IgcNavDrawerComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcNavDrawerComponentEventMap>> & Constructor<LitElement>;
 /**
- * Represents a side navigation container that provides
- * quick access between views.
+ * A side navigation container that provides
+ * quick access between views within an application.
+ *
+ * For non-relative positions (`start`, `end`, `top`, `bottom`) the drawer is
+ * rendered as a native `<dialog>` element, providing modal semantics, automatic
+ * focus trapping, and a backdrop. For the `relative` position it is rendered
+ * inline as a `<nav>` landmark.
+ *
+ * When content is provided in the `mini` slot, a compact icon-only variant is
+ * always displayed alongside the main drawer (hidden only while the full drawer
+ * is open).
+ *
+ * The component integrates with the
+ * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):
+ * an Ignite button or a native `<button>` with `command="--show"` / `"--hide"` / `"--toggle"`
+ * and `commandfor` pointing to this element will call the corresponding method
+ * declaratively without any JavaScript.
  *
  * @element igc-nav-drawer
  *
- * @slot - The default slot for the igc-navigation-drawer.
- * @slot mini - The slot for the mini variant of the igc-navigation-drawer.
+ * @fires igcClosing - Emitted just before the drawer is closed by a user interaction. Cancelable —
+ *   call `event.preventDefault()` to abort the closing sequence.
+ * @fires igcClosed - Emitted just after the drawer is closed by a user interaction.
+ *
+ * @slot - Renders the main navigation content of the drawer.
+ * @slot mini - Renders the compact mini variant of the drawer.
  *
- * @csspart base - The base wrapper of the igc-navigation-drawer.
- * @csspart main - The main container of the igc-navigation-drawer.
- * @csspart mini - The mini container of the igc-navigation-drawer.
+ * @csspart base - The base wrapper of the drawer.
+ * @csspart main - The main content container of the drawer.
+ * @csspart mini - The mini variant container of the drawer.
  */
-export default class IgcNavDrawerComponent extends LitElement {
+export default class IgcNavDrawerComponent extends IgcNavDrawerComponent_base {
     static readonly tagName = "igc-nav-drawer";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    private readonly _dialogRef;
+    private readonly _miniRef;
     private readonly _slots;
+    private get _dialog();
+    private get _mini();
+    private get _hasMiniContent();
+    private get _isRelative();
     /**
-     * The position of the drawer.
-     * @attr
+     * Sets the position of the drawer.
+     *
+     * - `start` — anchored to the inline-start edge (default).
+     * - `end` — anchored to the inline-end edge.
+     * - `top` — anchored to the block-start edge.
+     * - `bottom` — anchored to the block-end edge.
+     * - `relative` — rendered inline within the page flow; no modal backdrop.
+     *
+     * @attr position
+     * @default 'start'
      */
     position: NavDrawerPosition;
     /**
-     * Determines whether the drawer is opened.
-     * @attr
+     * Whether the drawer is open.
+     *
+     * @attr open
+     * @default false
      */
     open: boolean;
+    /**
+     * Determines whether the drawer should remain open when the Escape key is pressed.
+     *
+     * This attribute is only applicable when the drawer is in a non-relative position,
+     * as the Escape key does not trigger the closing of relative drawers.
+     *
+     * @attr keep-open-on-escape
+     * @default false
+     */
+    keepOpenOnEscape: boolean;
+    /**
+     * Sets an accessible label for the drawer.
+     *
+     * In non-relative positions this label is applied to the modal `<dialog>` element.
+     * In `relative` position it labels the `<nav>` landmark.
+     *
+     * When multiple navigation landmarks exist on the page each should receive a
+     * distinct label so screen-reader users can differentiate between them.
+     *
+     * @attr label
+     */
+    label?: string;
     constructor();
-    private _waitTransitions;
-    /** Opens the drawer. */
+    protected update(properties: PropertyValues<this>): void;
+    protected updated(properties: PropertyValues<this>): void;
+    private _handleOpenState;
+    private _handleMiniState;
+    private _handleCancel;
+    private _handleClose;
+    private _handleClick;
+    private _emitClosing;
+    private _closeWithEvent;
+    /** Opens the drawer. Returns `true` if the operation was successful, `false` if the drawer was already open. */
     show(): Promise<boolean>;
-    /** Closes the drawer. */
+    /** Closes the drawer. Returns `true` if the operation was successful, `false` if the drawer was already closed. */
     hide(): Promise<boolean>;
-    /** Toggles the open state of the drawer. */
+    /** Toggles the open state of the drawer. Delegates to `show()` or `hide()` depending on the current state. */
     toggle(): Promise<boolean>;
+    private _renderMiniVariant;
+    private _renderContent;
+    private _renderDialog;
+    private _renderRelative;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -43,3 +118,4 @@ declare global {
         'igc-nav-drawer': IgcNavDrawerComponent;
     }
 }
+export {};

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

@@ -6,43 +6,134 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addCommandController } from '../common/controllers/command.js';
 import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
+import { bindIf, isPopoverOpen, numberInRangeInclusive, } from '../common/util.js';
 import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
 import IgcNavDrawerItemComponent from './nav-drawer-item.js';
 import { styles } from './themes/container.base.css.js';
 import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';
-export default class IgcNavDrawerComponent extends LitElement {
+export default class IgcNavDrawerComponent extends EventEmitterMixin(LitElement) {
     static { this.tagName = 'igc-nav-drawer'; }
     static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcNavDrawerComponent, IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent);
     }
+    get _dialog() {
+        return this._dialogRef.value;
+    }
+    get _mini() {
+        return this._miniRef.value;
+    }
+    get _hasMiniContent() {
+        return this._slots.hasAssignedElements('mini');
+    }
+    get _isRelative() {
+        return this.position === 'relative';
+    }
     constructor() {
         super();
+        this._dialogRef = createRef();
+        this._miniRef = createRef();
         this._slots = addSlotController(this, {
             slots: setSlots('mini'),
+            onChange: this._handleMiniState,
         });
         this.position = 'start';
         this.open = false;
+        this.keepOpenOnEscape = false;
         addThemingController(this, all);
+        addCommandController(this)
+            .set('--show', this.show)
+            .set('--hide', this.hide)
+            .set('--toggle', this.toggle);
     }
-    _waitTransitions() {
-        return new Promise((resolve) => {
-            this.renderRoot.addEventListener('transitionend', resolve, {
-                once: true,
-            });
-        });
+    update(properties) {
+        if (properties.has('position') && this._isRelative) {
+            this._dialog?.close();
+            if (isPopoverOpen(this._mini)) {
+                this._mini?.hidePopover();
+            }
+        }
+        super.update(properties);
+    }
+    updated(properties) {
+        if (properties.has('open') || properties.has('position')) {
+            this._handleOpenState();
+            this._handleMiniState();
+        }
+    }
+    _handleOpenState() {
+        if (this._isRelative) {
+            return;
+        }
+        this.open ? this._dialog?.showModal() : this._dialog?.close();
+    }
+    _handleMiniState() {
+        if (this._isRelative) {
+            return;
+        }
+        const mini = this._mini;
+        if (!mini) {
+            return;
+        }
+        const popOverOpen = isPopoverOpen(mini);
+        if (!this._hasMiniContent || this.open) {
+            if (popOverOpen) {
+                mini.hidePopover();
+            }
+        }
+        else if (!popOverOpen) {
+            mini.showPopover();
+        }
+    }
+    _handleCancel(event) {
+        event.preventDefault();
+        if (!this.keepOpenOnEscape) {
+            this._closeWithEvent();
+        }
+    }
+    _handleClose() {
+        if (this.open) {
+            this._dialog?.showModal();
+        }
+    }
+    _handleClick({ clientX, clientY, target }) {
+        if (this._dialog === target) {
+            const rect = this._dialog.getBoundingClientRect();
+            const inX = numberInRangeInclusive(clientX, rect.left, rect.right);
+            const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
+            if (!(inX && inY)) {
+                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;
     }
     async show() {
         if (this.open) {
             return false;
         }
         this.open = true;
-        await this._waitTransitions();
+        await this.updateComplete;
         return true;
     }
     async hide() {
@@ -50,32 +141,62 @@ export default class IgcNavDrawerComponent extends LitElement {
             return false;
         }
         this.open = false;
-        await this._waitTransitions();
+        await this.updateComplete;
         return true;
     }
-    async toggle() {
+    toggle() {
         return this.open ? this.hide() : this.show();
     }
-    render() {
+    _renderMiniVariant() {
         return html `
-      <div part="overlay" @click=${this.hide}></div>
-
-      <div part="base" .inert=${!this.open}>
-        <div part="main">
-          <slot></slot>
-        </div>
-      </div>
-
-      <div
+      <nav
+        ${ref(this._miniRef)}
+        aria-label=${ifDefined(this.label)}
         part=${partMap({
             mini: true,
-            hidden: !this._slots.hasAssignedElements('mini'),
+            hidden: !this._hasMiniContent,
         })}
+        .inert=${this.open || !this._hasMiniContent}
+        .popover=${!this._isRelative ? 'manual' : null}
       >
         <slot name="mini"></slot>
+      </nav>
+    `;
+    }
+    _renderContent() {
+        return html `
+      <div part="main">
+        <slot></slot>
       </div>
     `;
     }
+    _renderDialog() {
+        return html `
+      <dialog
+        ${ref(this._dialogRef)}
+        part="base"
+        aria-modal="true"
+        aria-label=${ifDefined(this.label)}
+        @click=${this._handleClick}
+        @cancel=${this._handleCancel}
+        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}
+      >
+        ${this._renderContent()}
+      </dialog>
+      ${this._renderMiniVariant()}
+    `;
+    }
+    _renderRelative() {
+        return html `
+      <nav part="base" aria-label=${ifDefined(this.label)} .inert=${!this.open}>
+        ${this._renderContent()}
+      </nav>
+      ${this._renderMiniVariant()}
+    `;
+    }
+    render() {
+        return html `${cache(this._isRelative ? this._renderRelative() : this._renderDialog())}`;
+    }
 }
 __decorate([
     property({ reflect: true })
@@ -83,4 +204,10 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcNavDrawerComponent.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'keep-open-on-escape' })
+], IgcNavDrawerComponent.prototype, "keepOpenOnEscape", void 0);
+__decorate([
+    property()
+], IgcNavDrawerComponent.prototype, "label", void 0);
 //# sourceMappingURL=nav-drawer.js.map

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,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,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;AAetF,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,gBAAgB,AAAnB,CAAoB;aAC3B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,qBAAqB,EACrB,+BAA+B,EAC/B,yBAAyB,CAC1B,CAAC;IACJ,CAAC;IAoBD;QACE,KAAK,EAAE,CAAC;QAnBO,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;SACxB,CAAC,CAAC;QAOI,aAAQ,GAAsB,OAAO,CAAC;QAOtC,SAAI,GAAG,KAAK,CAAC;QAIlB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,OAAO,CAAQ,CAAC,OAAO,EAAE,EAAE;YACpC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,EAAE;gBACzD,IAAI,EAAE,IAAI;aACX,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAGM,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,gBAAgB,EAAE,CAAC;QAE9B,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,gBAAgB,EAAE,CAAC;QAE9B,OAAO,IAAI,CAAC;IACd,CAAC;IAGM,KAAK,CAAC,MAAM;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,IAAI;;gCAEZ,CAAC,IAAI,CAAC,IAAI;;;;;;;eAO3B,OAAO,CAAC;YACb,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,CAAC;SACjD,CAAC;;;;KAIL,CAAC;IACJ,CAAC;;AAtEM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACiB;AAOtC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.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\n/**\n * Represents a side navigation container that provides\n * quick access between views.\n *\n * @element igc-nav-drawer\n *\n * @slot - The default slot for the igc-navigation-drawer.\n * @slot mini - The slot for the mini variant of the igc-navigation-drawer.\n *\n * @csspart base - The base wrapper of the igc-navigation-drawer.\n * @csspart main - The main container of the igc-navigation-drawer.\n * @csspart mini - The mini container of the igc-navigation-drawer.\n */\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcNavDrawerComponent,\n      IgcNavDrawerHeaderItemComponent,\n      IgcNavDrawerItemComponent\n    );\n  }\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('mini'),\n  });\n\n  /**\n   * The position of the drawer.\n   * @attr\n   */\n  @property({ reflect: true })\n  public position: NavDrawerPosition = 'start';\n\n  /**\n   * Determines whether the drawer is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  private _waitTransitions() {\n    return new Promise<Event>((resolve) => {\n      this.renderRoot.addEventListener('transitionend', resolve, {\n        once: true,\n      });\n    });\n  }\n\n  /** Opens the drawer. */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    await this._waitTransitions();\n\n    return true;\n  }\n\n  /** Closes the drawer. */\n  public async hide(): Promise<boolean> {\n    if (!this.open) {\n      return false;\n    }\n\n    this.open = false;\n    await this._waitTransitions();\n\n    return true;\n  }\n\n  /** Toggles the open state of the drawer. */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"overlay\" @click=${this.hide}></div>\n\n      <div part=\"base\" .inert=${!this.open}>\n        <div part=\"main\">\n          <slot></slot>\n        </div>\n      </div>\n\n      <div\n        part=${partMap({\n          mini: true,\n          hidden: !this._slots.hasAssignedElements('mini'),\n        })}\n      >\n        <slot name=\"mini\"></slot>\n      </div>\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 { addThemingController } from '../../theming/theming-controller.js';\nimport { addCommandController } from '../common/controllers/command.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport {\n  bindIf,\n  isPopoverOpen,\n  numberInRangeInclusive,\n} from '../common/util.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 attribute 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 (this._dialog === target) {\n      const rect = this._dialog.getBoundingClientRect();\n      const inX = numberInRangeInclusive(clientX, rect.left, rect.right);\n      const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);\n\n      if (!(inX && inY)) {\n        this._closeWithEvent();\n      }\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"]}

package/components/nav-drawer/themes/container.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;transition:translate ease-out .3s,.3s,opacity ease-out .3s,.3s}:host [part~=mini]{min-width:var(--menu-mini-width)}:host [part=base]{width:var(--menu-full-width)}:host [part=main]{width:100%}:host [part=overlay]{position:fixed;inset:0;z-index:2;opacity:1;transition:opacity ease-out .3s,.3s}:host([position=relative]) [part=base]{position:relative;width:var(--menu-full-width);box-shadow:none;z-index:initial;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;bottom:auto}:host([position=bottom]) [part=base]{top:auto;bottom:0}:host([position=start]) [part=base],:host([position=start]) [part~=mini]{inset-inline-start:0;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host(:not([open])[position=start]),:host([dir=rtl]:not([open])[position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([open])[position=end]),:host([dir=rtl]:not([open])[position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1);opacity:1;overflow:hidden}:host(:not([open])[position=relative]) [part=main]{opacity:0}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{translate:0 -60vh}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{translate:0 60vh}:host([open][position=end]) [part=base]{border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part="mini hidden"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:not([open])) [part=base]{translate:calc(100%*var(--dir)) 0;opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;--menu-height: 50vh;--transition-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);--transition-duration: 0.35s;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part=mini]{--ig-scrollbar-size: rem(8px);margin:unset;border:unset;outline-style:none;height:100%;min-height:100%;overflow-x:hidden}:host [part=mini]{width:var(--menu-mini-width);transition-behavior:allow-discrete;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:display,translate,overlay}:host [part=mini]::backdrop{display:none}:host [part=base]{box-sizing:border-box;width:var(--menu-full-width);padding:unset;transition-behavior:allow-discrete;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:translate,opacity,overlay,display}:host [part=base]::backdrop{transition-behavior:allow-discrete;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:opacity,display;opacity:0}:host [part=base]:open::backdrop{opacity:1}@starting-style{:host [part=base]:open::backdrop{opacity:0}}:host [part=main]{width:100%}:host([position=start]) [part=base],:host([position=start]) [part=mini]{border:none;border-inline-end-style:solid;border-inline-end-width:.0625rem;margin-inline-end:auto}:host([position=end]) [part=base],:host([position=end]) [part=mini]{border:none;border-inline-start-style:solid;border-inline-start-width:.0625rem;margin-inline-start:auto}:host([position=start]),:host([dir=rtl][position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host([position=end]),:host([dir=rtl][position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:var(--menu-height);min-height:initial;min-width:100vw;margin:revert}:host([position=top]) [part=mini],:host([position=bottom]) [part=mini]{display:none;transition:none}:host([position=top]) [part=base]{top:0;bottom:auto;border:none;border-block-end-style:solid;border-block-end-width:.0625rem}:host([position=top]) [part=base]:not(:open){translate:0 calc(var(--menu-height)*-1)}:host([position=top]) [part=base]:open{translate:0}@starting-style{:host([position=top]) [part=base]:open{translate:0 calc(var(--menu-height)*-1)}}:host([position=bottom]) [part=base]{top:auto;bottom:0;border:none;border-block-start-style:solid;border-block-start-width:.0625rem}:host([position=bottom]) [part=base]:not(:open){translate:0 var(--menu-height)}:host([position=bottom]) [part=base]:open{translate:0}@starting-style{:host([position=bottom]) [part=base]:open{translate:0 var(--menu-height)}}:host(:where([position=start],[position=end])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:where([position=start],[position=end])) [part=base]:not(:open){translate:calc(200%*var(--dir)) 0}:host(:where([position=start],[position=end])) [part=base]:not(:open)+[part~=mini]{translate:0}@starting-style{:host(:where([position=start],[position=end])) [part=base]:not(:open)+[part~=mini]{translate:calc(200%*var(--dir)) 0}}:host(:where([position=start],[position=end])) [part=base]:open+[part~=mini]{translate:calc(200%*var(--dir)) 0}@starting-style{:host(:where([position=start],[position=end])) [part=base]:open{translate:calc(200%*var(--dir)) 0}}@supports not selector(:open){:host [part=base]{transition-property:translate,opacity}:host [part=base]::backdrop{transition-property:opacity}:host([open]) [part=base]::backdrop{opacity:1}@starting-style{:host([open]) [part=base]::backdrop{opacity:0}}:host([open][position=top]) [part=base]{translate:0}@starting-style{:host([open][position=top]) [part=base]{translate:0 calc(var(--menu-height)*-1)}}:host(:not([open])[position=top]) [part=base]{translate:0 calc(var(--menu-height)*-1)}:host([open][position=bottom]) [part=base]{translate:0}@starting-style{:host([open][position=bottom]) [part=base]{translate:0 var(--menu-height)}}:host(:not([open])[position=bottom]) [part=base]{translate:0 var(--menu-height)}@starting-style{:host([open]:where([position=start],[position=end])) [part=base]{translate:calc(200%*var(--dir)) 0}}:host(:not([open]):where([position=start],[position=end])) [part=base]{translate:calc(200%*var(--dir)) 0}}:host([position=relative]):has([part=mini]){--transition-duration: 0.2s}:host([position=relative]) [part=base]{position:relative;box-shadow:none;border-inline-end-style:solid;border-inline-end-width:.0625rem;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:margin,border}:host([position=relative]) [part=mini]{position:relative;border-inline-end-width:.0625rem;border-inline-end-style:solid;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:width,min-width,padding,border;order:-1;z-index:1}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1);border-color:rgba(0,0,0,0);overflow:hidden}:host(:not([open])[position=relative]) [part=mini]{transition-delay:var(--transition-duration)}:host([open][position=relative]) [part=base]:has(+[part=mini]){transition-delay:var(--transition-duration)}:host([open][position=relative]) [part=mini]{width:0;min-width:0;padding-inline:0;border-color:rgba(0,0,0,0)}`;
 //# sourceMappingURL=container.base.css.js.map

package/components/nav-drawer/themes/container.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,okHAAokH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;transition:translate ease-out .3s,.3s,opacity ease-out .3s,.3s}:host [part~=mini]{min-width:var(--menu-mini-width)}:host [part=base]{width:var(--menu-full-width)}:host [part=main]{width:100%}:host [part=overlay]{position:fixed;inset:0;z-index:2;opacity:1;transition:opacity ease-out .3s,.3s}:host([position=relative]) [part=base]{position:relative;width:var(--menu-full-width);box-shadow:none;z-index:initial;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;bottom:auto}:host([position=bottom]) [part=base]{top:auto;bottom:0}:host([position=start]) [part=base],:host([position=start]) [part~=mini]{inset-inline-start:0;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host(:not([open])[position=start]),:host([dir=rtl]:not([open])[position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([open])[position=end]),:host([dir=rtl]:not([open])[position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1);opacity:1;overflow:hidden}:host(:not([open])[position=relative]) [part=main]{opacity:0}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{translate:0 -60vh}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{translate:0 60vh}:host([open][position=end]) [part=base]{border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part=\"mini hidden\"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:not([open])) [part=base]{translate:calc(100%*var(--dir)) 0;opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;\n  "]}
+{"version":3,"file":"container.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+vMAA+vM,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;--menu-height: 50vh;--transition-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);--transition-duration: 0.35s;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part=mini]{--ig-scrollbar-size: rem(8px);margin:unset;border:unset;outline-style:none;height:100%;min-height:100%;overflow-x:hidden}:host [part=mini]{width:var(--menu-mini-width);transition-behavior:allow-discrete;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:display,translate,overlay}:host [part=mini]::backdrop{display:none}:host [part=base]{box-sizing:border-box;width:var(--menu-full-width);padding:unset;transition-behavior:allow-discrete;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:translate,opacity,overlay,display}:host [part=base]::backdrop{transition-behavior:allow-discrete;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:opacity,display;opacity:0}:host [part=base]:open::backdrop{opacity:1}@starting-style{:host [part=base]:open::backdrop{opacity:0}}:host [part=main]{width:100%}:host([position=start]) [part=base],:host([position=start]) [part=mini]{border:none;border-inline-end-style:solid;border-inline-end-width:.0625rem;margin-inline-end:auto}:host([position=end]) [part=base],:host([position=end]) [part=mini]{border:none;border-inline-start-style:solid;border-inline-start-width:.0625rem;margin-inline-start:auto}:host([position=start]),:host([dir=rtl][position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host([position=end]),:host([dir=rtl][position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:var(--menu-height);min-height:initial;min-width:100vw;margin:revert}:host([position=top]) [part=mini],:host([position=bottom]) [part=mini]{display:none;transition:none}:host([position=top]) [part=base]{top:0;bottom:auto;border:none;border-block-end-style:solid;border-block-end-width:.0625rem}:host([position=top]) [part=base]:not(:open){translate:0 calc(var(--menu-height)*-1)}:host([position=top]) [part=base]:open{translate:0}@starting-style{:host([position=top]) [part=base]:open{translate:0 calc(var(--menu-height)*-1)}}:host([position=bottom]) [part=base]{top:auto;bottom:0;border:none;border-block-start-style:solid;border-block-start-width:.0625rem}:host([position=bottom]) [part=base]:not(:open){translate:0 var(--menu-height)}:host([position=bottom]) [part=base]:open{translate:0}@starting-style{:host([position=bottom]) [part=base]:open{translate:0 var(--menu-height)}}:host(:where([position=start],[position=end])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:where([position=start],[position=end])) [part=base]:not(:open){translate:calc(200%*var(--dir)) 0}:host(:where([position=start],[position=end])) [part=base]:not(:open)+[part~=mini]{translate:0}@starting-style{:host(:where([position=start],[position=end])) [part=base]:not(:open)+[part~=mini]{translate:calc(200%*var(--dir)) 0}}:host(:where([position=start],[position=end])) [part=base]:open+[part~=mini]{translate:calc(200%*var(--dir)) 0}@starting-style{:host(:where([position=start],[position=end])) [part=base]:open{translate:calc(200%*var(--dir)) 0}}@supports not selector(:open){:host [part=base]{transition-property:translate,opacity}:host [part=base]::backdrop{transition-property:opacity}:host([open]) [part=base]::backdrop{opacity:1}@starting-style{:host([open]) [part=base]::backdrop{opacity:0}}:host([open][position=top]) [part=base]{translate:0}@starting-style{:host([open][position=top]) [part=base]{translate:0 calc(var(--menu-height)*-1)}}:host(:not([open])[position=top]) [part=base]{translate:0 calc(var(--menu-height)*-1)}:host([open][position=bottom]) [part=base]{translate:0}@starting-style{:host([open][position=bottom]) [part=base]{translate:0 var(--menu-height)}}:host(:not([open])[position=bottom]) [part=base]{translate:0 var(--menu-height)}@starting-style{:host([open]:where([position=start],[position=end])) [part=base]{translate:calc(200%*var(--dir)) 0}}:host(:not([open]):where([position=start],[position=end])) [part=base]{translate:calc(200%*var(--dir)) 0}}:host([position=relative]):has([part=mini]){--transition-duration: 0.2s}:host([position=relative]) [part=base]{position:relative;box-shadow:none;border-inline-end-style:solid;border-inline-end-width:.0625rem;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:margin,border}:host([position=relative]) [part=mini]{position:relative;border-inline-end-width:.0625rem;border-inline-end-style:solid;transition-duration:var(--transition-duration);transition-timing-function:var(--transition-function);transition-property:width,min-width,padding,border;order:-1;z-index:1}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1);border-color:rgba(0,0,0,0);overflow:hidden}:host(:not([open])[position=relative]) [part=mini]{transition-delay:var(--transition-duration)}:host([open][position=relative]) [part=base]:has(+[part=mini]){transition-delay:var(--transition-duration)}:host([open][position=relative]) [part=mini]{width:0;min-width:0;padding-inline:0;border-color:rgba(0,0,0,0)}`;\n  "]}

package/components/nav-drawer/themes/shared/container/nav-drawer.common.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `[part=overlay]{background:var(--background-color)}[part=base]{border-radius:var(--border-radius);background:var(--background)}[part=mini]{background:var(--background)}:host([position=start]) [part=mini],:host([position=end]) [part=mini]{box-shadow:var(--elevation)}:host([position=start]) [part~=base],:host([position=start]) [part~=mini]{border-inline-end-color:var(--border-color)}:host([position=end]) [part~=base],:host([position=end]) [part~=mini]{border-inline-start-color:var(--border-color)}:host([position=relative]) [part~=base],:host([position=relative]) [part~=mini]{border-inline-end-color:var(--border-color)}:host([open]:not([position=relative])) [part=base]{box-shadow:var(--elevation)}`;
+export const styles = css `:host [part=base]{background:var(--background);border-color:var(--border-color)}:host [part=base]::backdrop{background:var(--background-color)}:host [part=mini]{background:var(--background);border-color:var(--border-color)}:host(:is([position=start],[position=end])) [part=base],:host(:is([position=start],[position=end])) [part=mini]{border-inline-color:var(--border-color)}:host(:is([position=start],[position=end])) [part=mini]{box-shadow:var(--elevation)}:host(:is([position=top],[position=bottom])) [part=base]{border-block-color:var(--border-color)}:host(:not([position=relative])) [part=base]:open{box-shadow:var(--elevation)}`;
 //# sourceMappingURL=nav-drawer.common.css.js.map

package/components/nav-drawer/themes/shared/container/nav-drawer.common.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/shared/container/nav-drawer.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gsBAAgsB,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part=overlay]{background:var(--background-color)}[part=base]{border-radius:var(--border-radius);background:var(--background)}[part=mini]{background:var(--background)}:host([position=start]) [part=mini],:host([position=end]) [part=mini]{box-shadow:var(--elevation)}:host([position=start]) [part~=base],:host([position=start]) [part~=mini]{border-inline-end-color:var(--border-color)}:host([position=end]) [part~=base],:host([position=end]) [part~=mini]{border-inline-start-color:var(--border-color)}:host([position=relative]) [part~=base],:host([position=relative]) [part~=mini]{border-inline-end-color:var(--border-color)}:host([open]:not([position=relative])) [part=base]{box-shadow:var(--elevation)}`;\n  "]}
+{"version":3,"file":"nav-drawer.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/shared/container/nav-drawer.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2nBAA2nB,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host [part=base]{background:var(--background);border-color:var(--border-color)}:host [part=base]::backdrop{background:var(--background-color)}:host [part=mini]{background:var(--background);border-color:var(--border-color)}:host(:is([position=start],[position=end])) [part=base],:host(:is([position=start],[position=end])) [part=mini]{border-inline-color:var(--border-color)}:host(:is([position=start],[position=end])) [part=mini]{box-shadow:var(--elevation)}:host(:is([position=top],[position=bottom])) [part=base]{border-block-color:var(--border-color)}:host(:not([position=relative])) [part=base]:open{box-shadow:var(--elevation)}`;\n  "]}

package/components/nav-drawer/themes/shared/container/nav-drawer.fluent.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--menu-mini-width: 2.5rem}[part=base],[part~=mini]{border:.0625rem solid var(--border-color)}`;
+export const styles = css `:host{--menu-mini-width: 2.5rem}`;
 //# sourceMappingURL=nav-drawer.fluent.css.js.map

package/components/nav-drawer/themes/shared/container/nav-drawer.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qGAAqG,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--menu-mini-width: 2.5rem}[part=base],[part~=mini]{border:.0625rem solid var(--border-color)}`;\n  "]}
+{"version":3,"file":"nav-drawer.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kCAAkC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--menu-mini-width: 2.5rem}`;\n  "]}

package/components/nav-drawer/themes/shared/container/nav-drawer.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--menu-mini-width: 3rem}:host [part=overlay]{background:var(--background-color)}:host [part=mini],:host [part=main]{padding:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}`;
+export const styles = css `:host{--menu-mini-width: 3rem}:host [part=base]::backdrop{background:var(--background-color)}:host [part=mini],:host [part=main]{padding:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}`;
 //# sourceMappingURL=nav-drawer.indigo.css.js.map

package/components/nav-drawer/themes/shared/container/nav-drawer.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ycAAyc,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--menu-mini-width: 3rem}:host [part=overlay]{background:var(--background-color)}:host [part=mini],:host [part=main]{padding:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}`;\n  "]}
+{"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gdAAgd,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--menu-mini-width: 3rem}:host [part=base]::backdrop{background:var(--background-color)}:host [part=mini],:host [part=main]{padding:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}`;\n  "]}

package/components/radio/radio.js

@@ -235,6 +235,7 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
           aria-describedby=${describedBy}
           @click=${this._handleClick}
+          @keydown=${this._handleEnterKeydown}
         />
         <span part=${partMap({ control: true, checked })}>
           <span