igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.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 { bindIf, numberInRangeInclusive } from '../common/util.js';\nimport { styles } from './themes/dialog.base.css.js';\nimport { styles as shared } from './themes/shared/dialog.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcDialogComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\nlet nextId = 1;\n\n/* blazorAdditionalDependency: IgcButtonComponent */\n/**\n * A modal dialog component built on the native `<dialog>` element.\n *\n * The dialog traps focus while open and blocks interaction with the rest\n * of the page (modal semantics). It supports animated open/close\n * transitions, an optional backdrop overlay, and multiple content areas\n * through named slots.\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-dialog\n *\n * @fires igcClosing - Emitted just before the dialog closes. Cancelable —\n *   call `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted after the dialog has fully closed and its\n *   exit animation has completed.\n *\n * @slot - General-purpose content area. Also the target for any\n *   `<form method=\"dialog\">` placed inside the dialog.\n * @slot title - Content rendered in the dialog header. Falls back to the\n *   `title` attribute when empty.\n * @slot message - A dedicated message/body area rendered above the default\n *   slot. Hidden when no content is assigned.\n * @slot footer - Content rendered in the dialog footer. When empty, a\n *   default \"OK\" close button is shown (unless `hide-default-action` is set).\n *\n * @csspart base - The native `<dialog>` element.\n * @csspart title - The `<header>` element wrapping the title slot.\n * @csspart content - The `<section>` element wrapping the message and default slots.\n * @csspart footer - The `<footer>` element wrapping the footer slot.\n * @csspart backdrop - The decorative backdrop overlay element.\n * @csspart animating - Applied to the backdrop while an animation is running.\n */\nexport default class IgcDialogComponent extends EventEmitterMixin<\n  IgcDialogComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-dialog';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDialogComponent, IgcButtonComponent);\n  }\n\n  //#region Private state and properties\n\n  private readonly _titleId = `title-${nextId++}`;\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('title', 'message', 'footer'),\n  });\n\n  private readonly _dialogRef = createRef<HTMLDialogElement>();\n  private readonly _player = addAnimationController(this, this._dialogRef);\n\n  /**\n   * Backdrop animation helper.\n   */\n  @state()\n  private _animating = false;\n\n  private get _dialog(): HTMLDialogElement | undefined {\n    return this._dialogRef.value;\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * When set, pressing the `Escape` key will not close the dialog.\n   *\n   * By default the browser closes a modal dialog on `Escape`. Enable this\n   * option when the dialog guards unsaved work and should require an explicit\n   * user action to dismiss.\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   * When set, clicking on the backdrop area outside the dialog surface\n   * will close it (emitting close events).\n   *\n   * Has no effect when the dialog is not yet open.\n   * @attr close-on-outside-click\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * When set, the built-in \"OK\" close button in the footer is not rendered.\n   *\n   * Has no effect when content is projected into the `footer` slot, since\n   * the slot content replaces the default button entirely.\n   * @attr hide-default-action\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /**\n   * Whether the dialog is open.\n   *\n   * Setting this property programmatically will open or close the dialog\n   * without animation and without emitting close events.\n   * Prefer the `show()`, `hide()`, and `toggle()` methods for animated\n   * transitions.\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * The title displayed in the dialog header.\n   *\n   * Overridden by any content projected into the `title` slot.\n   * @attr title\n   */\n  @property()\n  public override title!: string;\n\n  /**\n   * The return value of the dialog.\n   *\n   * Automatically set to the `value` of the submitter element when a\n   * `<form method=\"dialog\">` inside the dialog is submitted. Can also\n   * be set programmatically before calling `hide()`.\n   */\n  @property({ attribute: false })\n  public returnValue?: string;\n\n  //#endregion\n\n  //#region 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 updated(properties: PropertyValues<this>): void {\n    if (properties.has('open')) {\n      this.open ? this._dialog?.showModal() : this._dialog?.close();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleFormSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement;\n\n    if (form.method === 'dialog') {\n      if (hasSubmitter(event.submitter)) {\n        this.returnValue = event.submitter.value ?? '';\n      }\n\n      if (!event.defaultPrevented) {\n        this._closeWithEvent();\n      }\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    // When a non-cancelable close event is fired (e.g., from repeated Escape presses),\n    // reopen the dialog to prevent the broken state with visible backdrop.\n    // Note that this handler is invoked only when `keepOpenOnEscape` is true.\n    if (this.open) {\n      this._dialog?.showModal();\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (this.closeOnOutsideClick && 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 async _hide(emitEvent = false): Promise<boolean> {\n    if (!this.open || (emitEvent && !this._emitClosing())) {\n      return false;\n    }\n\n    this._animating = true;\n    await this._player.playExclusive(fadeOut());\n    this.open = false;\n    this._animating = false;\n\n    if (emitEvent) {\n      await this.updateComplete;\n      this.emitEvent('igcClosed');\n    }\n\n    return true;\n  }\n\n  private _emitClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\n\n  private _closeWithEvent(): void {\n    this._hide(true);\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /**\n   * Opens the dialog with an animated fade-in transition.\n   *\n   * Returns `true` when the dialog was successfully opened, or `false` if\n   * it was already open.\n   */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    await this._player.playExclusive(fadeIn());\n    return true;\n  }\n\n  /**\n   * Closes the dialog with an animated fade-out transition.\n   *\n   * Returns `true` when the dialog was successfully closed, or `false` if\n   * it was already closed.\n   */\n  public async hide(): Promise<boolean> {\n    return this._hide();\n  }\n\n  /**\n   * Toggles the dialog open or closed depending on its current state.\n   *\n   * Equivalent to calling `show()` when closed and `hide()` when open.\n   * Returns `true` when the transition completed successfully.\n   */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  //#endregion\n\n  //#region Render methods\n\n  protected _renderBackdrop() {\n    return html`\n      <div\n        aria-hidden=${!this.open}\n        part=${partMap({ backdrop: true, animating: this._animating })}\n      ></div>\n    `;\n  }\n\n  protected _renderHeader() {\n    return html`\n      <header part=\"title\" id=${this._titleId}>\n        <slot name=\"title\">\n          <span>${this.title}</span>\n        </slot>\n      </header>\n    `;\n  }\n\n  protected _renderContent() {\n    const hasMessage = this._slots.hasAssignedElements('message');\n    return html`\n      <section part=\"content\">\n        <slot name=\"message\" ?hidden=${!hasMessage}></slot>\n        <slot @submit=${this._handleFormSubmit}></slot>\n      </section>\n    `;\n  }\n\n  protected _renderFooter() {\n    return html`\n      <footer part=\"footer\">\n        <slot name=\"footer\">\n          ${\n            this.hideDefaultAction\n              ? nothing\n              : html`\n                  <igc-button variant=\"flat\" @click=${this._closeWithEvent}>\n                    OK\n                  </igc-button>\n                `\n          }\n        </slot>\n      </footer>\n    `;\n  }\n\n  protected override render() {\n    const hasTitle = this._slots.hasAssignedElements('title') || !!this.title;\n    const hasFooter =\n      this._slots.hasAssignedElements('footer') || !this.hideDefaultAction;\n    const labelledBy = this.ariaLabel ?? this._titleId;\n\n    return html`\n      ${this._renderBackdrop()}\n      <dialog\n        ${ref(this._dialogRef)}\n        part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}\n        role=\"dialog\"\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        aria-labelledby=${bindIf(labelledBy, labelledBy)}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\n        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}\n      >\n        ${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}\n      </dialog>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dialog': IgcDialogComponent;\n  }\n}\n\nfunction hasSubmitter(\n  submitter: SubmitEvent['submitter']\n): submitter is HTMLButtonElement | HTMLInputElement {\n  return submitter != null;\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '#animations/player.js';\nimport { fadeIn, fadeOut } from '#animations/presets/fade/index.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 } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { styles } from './themes/dialog.base.css.js';\nimport { styles as shared } from './themes/shared/dialog.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcDialogComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\nconst nextId = createIdGenerator('title');\n\n/* blazorAdditionalDependency: IgcButtonComponent */\n/**\n * A modal dialog component built on the native `<dialog>` element.\n *\n * The dialog traps focus while open and blocks interaction with the rest\n * of the page (modal semantics). It supports animated open/close\n * transitions, an optional backdrop overlay, and multiple content areas\n * through named slots.\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-dialog\n *\n * @fires igcClosing - Emitted just before the dialog closes. Cancelable -\n *   call `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted after the dialog has fully closed and its\n *   exit animation has completed.\n *\n * @slot - General-purpose content area. Also the target for any\n *   `<form method=\"dialog\">` placed inside the dialog.\n * @slot title - Content rendered in the dialog header. Falls back to the\n *   `title` attribute when empty.\n * @slot message - A dedicated message/body area rendered above the default\n *   slot. Hidden when no content is assigned.\n * @slot footer - Content rendered in the dialog footer. When empty, a\n *   default \"OK\" close button is shown (unless `hide-default-action` is set).\n *\n * @csspart base - The native `<dialog>` element.\n * @csspart title - The `<header>` element wrapping the title slot.\n * @csspart content - The `<section>` element wrapping the message and default slots.\n * @csspart footer - The `<footer>` element wrapping the footer slot.\n * @csspart backdrop - The decorative backdrop overlay element.\n * @csspart animating - Applied to the backdrop while an animation is running.\n */\nexport default class IgcDialogComponent extends EventEmitterMixin<\n  IgcDialogComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-dialog';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDialogComponent, IgcButtonComponent);\n  }\n\n  //#region Private state and properties\n\n  private readonly _titleId = nextId();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('title', 'message', 'footer'),\n  });\n\n  private readonly _dialogRef = createRef<HTMLDialogElement>();\n  private readonly _player = addAnimationController(this, this._dialogRef);\n\n  private readonly _toggleController = addToggleController(this, {\n    transition: async (open) => {\n      if (open) {\n        this.open = true;\n        // A superseded exit clears this too, but only once its animation\n        // reports the cancellation - too late for this render.\n        this._animating = false;\n        return this._player.playExclusive(fadeIn());\n      }\n\n      this._animating = true;\n      const completed = await this._player.playExclusive(fadeOut());\n      this._animating = false;\n\n      // An interrupted exit animation means a newer `show()` took over.\n      if (completed) {\n        this.open = false;\n      }\n\n      return completed;\n    },\n  });\n\n  /**\n   * Backdrop animation helper.\n   */\n  @state()\n  private _animating = false;\n\n  private get _dialog(): HTMLDialogElement | undefined {\n    return this._dialogRef.value;\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * When set, pressing the `Escape` key will not close the dialog.\n   *\n   * By default the browser closes a modal dialog on `Escape`. Enable this\n   * option when the dialog guards unsaved work and should require an explicit\n   * user action to dismiss.\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   * When set, clicking on the backdrop area outside the dialog surface\n   * will close it (emitting close events).\n   *\n   * Has no effect when the dialog is not yet open.\n   * @attr close-on-outside-click\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * When set, the built-in \"OK\" close button in the footer is not rendered.\n   *\n   * Has no effect when content is projected into the `footer` slot, since\n   * the slot content replaces the default button entirely.\n   * @attr hide-default-action\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /**\n   * Whether the dialog is open.\n   *\n   * Setting this property programmatically will open or close the dialog\n   * without animation and without emitting close events.\n   * Prefer the `show()`, `hide()`, and `toggle()` methods for animated\n   * transitions.\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * The title displayed in the dialog header.\n   *\n   * Overridden by any content projected into the `title` slot.\n   * @attr title\n   */\n  @property()\n  public override title!: string;\n\n  /**\n   * The return value of the dialog.\n   *\n   * Automatically set to the `value` of the submitter element when a\n   * `<form method=\"dialog\">` inside the dialog is submitted. Can also\n   * be set programmatically before calling `hide()`.\n   */\n  @property({ attribute: false })\n  public returnValue?: string;\n\n  //#endregion\n\n  //#region 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 updated(properties: PropertyValues<this>): void {\n    if (properties.has('open')) {\n      this.open ? this._dialog?.showModal() : this._dialog?.close();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleFormSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement;\n\n    if (form.method === 'dialog') {\n      if (hasSubmitter(event.submitter)) {\n        this.returnValue = event.submitter.value ?? '';\n      }\n\n      if (!event.defaultPrevented) {\n        this._closeWithEvent();\n      }\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    // When a non-cancelable close event is fired (e.g., from repeated Escape presses),\n    // reopen the dialog to prevent the broken state with visible backdrop.\n    // Note that this handler is invoked only when `keepOpenOnEscape` is true.\n    if (this.open) {\n      this._dialog?.showModal();\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (\n      this.closeOnOutsideClick &&\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 _closeWithEvent(): void {\n    this._toggleController.hide(true);\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /**\n   * Opens the dialog with an animated fade-in transition.\n   *\n   * Returns `true` when the dialog was successfully opened, or `false` if it\n   * was already open or the transition was superseded by a newer one.\n   */\n  public async show(): Promise<boolean> {\n    return this._toggleController.show();\n  }\n\n  /**\n   * Closes the dialog with an animated fade-out transition.\n   *\n   * Returns `true` when the dialog was successfully closed, or `false` if it\n   * was already closed or the transition was superseded by a newer one.\n   */\n  public async hide(): Promise<boolean> {\n    return this._toggleController.hide();\n  }\n\n  /**\n   * Toggles the dialog open or closed depending on its current state.\n   *\n   * Equivalent to calling `show()` when closed and `hide()` when open.\n   * Returns `true` when the transition completed successfully.\n   */\n  public async toggle(): Promise<boolean> {\n    return this._toggleController.toggle();\n  }\n\n  //#endregion\n\n  //#region Render methods\n\n  protected _renderBackdrop() {\n    return html`\n      <div\n        aria-hidden=${!this.open}\n        part=${partMap({ backdrop: true, animating: this._animating })}\n      ></div>\n    `;\n  }\n\n  protected _renderHeader() {\n    return html`\n      <header part=\"title\" id=${this._titleId}>\n        <slot name=\"title\">\n          <span>${this.title}</span>\n        </slot>\n      </header>\n    `;\n  }\n\n  protected _renderContent() {\n    const hasMessage = this._slots.hasAssignedElements('message');\n    return html`\n      <section part=\"content\">\n        <slot name=\"message\" ?hidden=${!hasMessage}></slot>\n        <slot @submit=${this._handleFormSubmit}></slot>\n      </section>\n    `;\n  }\n\n  protected _renderFooter() {\n    return html`\n      <footer part=\"footer\">\n        <slot name=\"footer\">\n          ${\n            this.hideDefaultAction\n              ? nothing\n              : html`\n                  <igc-button variant=\"flat\" @click=${this._closeWithEvent}>\n                    OK\n                  </igc-button>\n                `\n          }\n        </slot>\n      </footer>\n    `;\n  }\n\n  protected override render() {\n    const hasTitle = this._slots.hasAssignedElements('title') || !!this.title;\n    const hasFooter =\n      this._slots.hasAssignedElements('footer') || !this.hideDefaultAction;\n    const labelledBy = this.ariaLabel ?? this._titleId;\n\n    return html`\n      ${this._renderBackdrop()}\n      <dialog\n        ${ref(this._dialogRef)}\n        part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}\n        role=\"dialog\"\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        aria-labelledby=${bindIf(labelledBy, labelledBy)}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\n        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}\n      >\n        ${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}\n      </dialog>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dialog': IgcDialogComponent;\n  }\n}\n\nfunction hasSubmitter(\n  submitter: SubmitEvent['submitter']\n): submitter is HTMLButtonElement | HTMLInputElement {\n  return submitter != null;\n}\n"]}

package/components/dialog/themes/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/dialog/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/dialog/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/dialog.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/dialog.fluent.css.js';\nimport { styles as indigoDark } from './dark/dialog.indigo.css.js';\nimport { styles as materialDark } from './dark/dialog.material.css.js';\nimport { styles as sharedDark } from './dark/dialog.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/dialog.bootstrap.css.js';\nimport { styles as fluentLight } from './light/dialog.fluent.css.js';\nimport { styles as indigoLight } from './light/dialog.indigo.css.js';\nimport { styles as materialLight } from './light/dialog.material.css.js';\nimport { styles as sharedLight } from './light/dialog.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/dialog.bootstrap.css.js';\nimport { styles as fluent } from './shared/dialog.fluent.css.js';\nimport { styles as indigo } from './shared/dialog.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/dialog/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/dialog.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/dialog.fluent.css.js';\nimport { styles as indigoDark } from './dark/dialog.indigo.css.js';\nimport { styles as materialDark } from './dark/dialog.material.css.js';\nimport { styles as sharedDark } from './dark/dialog.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/dialog.bootstrap.css.js';\nimport { styles as fluentLight } from './light/dialog.fluent.css.js';\nimport { styles as indigoLight } from './light/dialog.indigo.css.js';\nimport { styles as materialLight } from './light/dialog.material.css.js';\nimport { styles as sharedLight } from './light/dialog.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/dialog.bootstrap.css.js';\nimport { styles as fluent } from './shared/dialog.fluent.css.js';\nimport { styles as indigo } from './shared/dialog.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/divider/divider.d.ts

@@ -1,7 +1,8 @@
 import { LitElement } from 'lit';
 import type { DividerType } from '../types.js';
 /**
- * The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.
+ * The divider allows the content author to easily create a horizontal/vertical
+ * rule as a break between content, to better organize information on a page.
  *
  * @element igc-divider
  *
@@ -13,15 +14,12 @@ export default class IgcDividerComponent extends LitElement {
     static readonly tagName = "igc-divider";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private readonly _internals;
-    private _vertical;
     /**
      * Whether to render a vertical divider line.
      * @attr
      * @default false
      */
-    set vertical(value: boolean);
-    get vertical(): boolean;
+    vertical: boolean;
     /**
      * When set and inset is provided, it will shrink the divider line from both sides.
      * @attr

package/components/divider/divider.js

@@ -6,9 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/divider.base.css.js';
 import { styles as shared } from './themes/shared/divider.common.css.js';
 import { all } from './themes/themes.js';
@@ -18,27 +18,18 @@ export default class IgcDividerComponent extends LitElement {
     static register() {
         registerComponent(IgcDividerComponent);
     }
-    set vertical(value) {
-        this._vertical = Boolean(value);
-        this._internals.setARIA({
-            ariaOrientation: this._vertical ? 'vertical' : 'horizontal',
-        });
-    }
-    get vertical() {
-        return this._vertical;
-    }
     constructor() {
         super();
-        this._internals = addInternalsController(this, {
-            initialARIA: {
-                role: 'separator',
-                ariaOrientation: 'vertical',
-            },
-        });
-        this._vertical = false;
+        this.vertical = false;
         this.middle = false;
         this.type = 'solid';
         addThemingController(this, all);
+        addInternalsController(this, {
+            initialARIA: { role: 'separator' },
+            aria: () => ({
+                ariaOrientation: this.vertical ? 'vertical' : 'horizontal',
+            }),
+        });
     }
     render() {
         return html ``;
@@ -46,7 +37,7 @@ export default class IgcDividerComponent extends LitElement {
 }
 __decorate([
     property({ type: Boolean, reflect: true })
-], IgcDividerComponent.prototype, "vertical", null);
+], IgcDividerComponent.prototype, "vertical", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcDividerComponent.prototype, "middle", void 0);

package/components/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.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,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAWzC,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,UAAU;aAClC,YAAO,GAAG,aAAa,AAAhB,CAAiB;aACxB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACzC,CAAC;IAiBD,IAAW,QAAQ,CAAC,KAAc;QAChC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;SAC5D,CAAC,CAAC;IACL,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAmBD;QACE,KAAK,EAAE,CAAC;QA5CO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,WAAW;gBACjB,eAAe,EAAE,UAAU;aAC5B;SACF,CAAC,CAAC;QAEK,cAAS,GAAG,KAAK,CAAC;QAyBnB,WAAM,GAAG,KAAK,CAAC;QASf,SAAI,GAAgB,OAAO,CAAC;QAIjC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;;AAnCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAM1C;AAYM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACrB;AASf;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACO","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { DividerType } from '../types.js';\nimport { styles } from './themes/divider.base.css.js';\nimport { styles as shared } from './themes/shared/divider.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.\n *\n * @element igc-divider\n *\n * @cssproperty --color - Sets the color of the divider.\n * @cssproperty --inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides.\n *\n */\nexport default class IgcDividerComponent extends LitElement {\n  public static readonly tagName = 'igc-divider';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDividerComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'separator',\n      ariaOrientation: 'vertical',\n    },\n  });\n\n  private _vertical = false;\n\n  /**\n   * Whether to render a vertical divider line.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public set vertical(value: boolean) {\n    this._vertical = Boolean(value);\n    this._internals.setARIA({\n      ariaOrientation: this._vertical ? 'vertical' : 'horizontal',\n    });\n  }\n\n  public get vertical(): boolean {\n    return this._vertical;\n  }\n\n  /**\n   * When set and inset is provided, it will shrink the divider line from both sides.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public middle = false;\n\n  /* alternateName: lineType */\n  /**\n   * Whether to render a solid or a dashed divider line.\n   * @attr type\n   * @default 'solid'\n   */\n  @property({ reflect: true })\n  public type: DividerType = 'solid';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-divider': IgcDividerComponent;\n  }\n}\n"]}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAYzC,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,UAAU;aAClC,YAAO,GAAG,aAAa,AAAhB,CAAiB;aACxB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACzC,CAAC;IA2BD;QACE,KAAK,EAAE,CAAC;QApBH,aAAQ,GAAG,KAAK,CAAC;QAQjB,WAAM,GAAG,KAAK,CAAC;QASf,SAAI,GAAgB,OAAO,CAAC;QAIjC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEhC,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;YAClC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;gBACX,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;aAC3D,CAAC;SACH,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;;AAjCM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACnB;AAQjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACrB;AASf;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACO","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { DividerType } from '../types.js';\nimport { styles } from './themes/divider.base.css.js';\nimport { styles as shared } from './themes/shared/divider.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The divider allows the content author to easily create a horizontal/vertical\n * rule as a break between content, to better organize information on a page.\n *\n * @element igc-divider\n *\n * @cssproperty --color - Sets the color of the divider.\n * @cssproperty --inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides.\n *\n */\nexport default class IgcDividerComponent extends LitElement {\n  public static readonly tagName = 'igc-divider';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDividerComponent);\n  }\n\n  /**\n   * Whether to render a vertical divider line.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public vertical = false;\n\n  /**\n   * When set and inset is provided, it will shrink the divider line from both sides.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public middle = false;\n\n  /* alternateName: lineType */\n  /**\n   * Whether to render a solid or a dashed divider line.\n   * @attr type\n   * @default 'solid'\n   */\n  @property({ reflect: true })\n  public type: DividerType = 'solid';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'separator' },\n      aria: () => ({\n        ariaOrientation: this.vertical ? 'vertical' : 'horizontal',\n      }),\n    });\n  }\n\n  protected override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-divider': IgcDividerComponent;\n  }\n}\n"]}

package/components/divider/themes/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/divider/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/divider/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/divider.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/divider.fluent.css.js';\nimport { styles as indigoDark } from './dark/divider.indigo.css.js';\nimport { styles as materialDark } from './dark/divider.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/divider.bootstrap.css.js';\nimport { styles as fluentLight } from './light/divider.fluent.css.js';\nimport { styles as indigoLight } from './light/divider.indigo.css.js';\nimport { styles as materialLight } from './light/divider.material.css.js';\nimport { styles as shared } from './light/divider.shared.css.js';\n// Shared Styles\nimport { styles as indigo } from './shared/divider.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/divider/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/divider.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/divider.fluent.css.js';\nimport { styles as indigoDark } from './dark/divider.indigo.css.js';\nimport { styles as materialDark } from './dark/divider.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/divider.bootstrap.css.js';\nimport { styles as fluentLight } from './light/divider.fluent.css.js';\nimport { styles as indigoLight } from './light/divider.indigo.css.js';\nimport { styles as materialLight } from './light/divider.material.css.js';\nimport { styles as shared } from './light/divider.shared.css.js';\n// Shared Styles\nimport { styles as indigo } from './shared/divider.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/dropdown/dropdown-group.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import IgcDropdownItemComponent from './dropdown-item.js';
 /**
- * A container for a group of `igc-dropdown-item` components.
+ * A container for a group of dropdown items.
  *
  * @element igc-dropdown-group
  *
@@ -11,12 +11,19 @@ import IgcDropdownItemComponent from './dropdown-item.js';
  * @csspart label - The native label element.
  */
 export default class IgcDropdownGroupComponent extends LitElement {
-    static readonly tagName: string;
+    static readonly tagName = "igc-dropdown-group";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    /** All child `igc-dropdown-item`s. */
+    private readonly _internals;
+    private readonly _slots;
+    /** All child dropdown items. */
     items: Array<IgcDropdownItemComponent>;
     constructor();
+    /**
+     * The label is rendered into this shadow root, out of reach of an
+     * `aria-labelledby` on the host, so its text names the `group` directly.
+     */
+    private _labelChange;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/dropdown/dropdown-group.js

@@ -6,13 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
 import { styles } from './themes/dropdown-group.base.css.js';
 import { all } from './themes/group.js';
 import { styles as shared } from './themes/shared/group/dropdown-group.common.css.js';
+const Slots = setSlots('label');
 export default class IgcDropdownGroupComponent extends LitElement {
     static { this.tagName = 'igc-dropdown-group'; }
     static { this.styles = [styles, shared]; }
@@ -21,12 +23,21 @@ export default class IgcDropdownGroupComponent extends LitElement {
     }
     constructor() {
         super();
-        addThemingController(this, all);
-        addInternalsController(this, {
+        this._internals = addInternalsController(this, {
             initialARIA: {
                 role: 'group',
             },
         });
+        this._slots = addSlotController(this, {
+            slots: Slots,
+            initial: true,
+            onChange: this._labelChange,
+        });
+        addThemingController(this, all);
+    }
+    _labelChange() {
+        const label = this._slots.getAssignedText('label', true);
+        this._internals.setARIA({ ariaLabel: label || null });
     }
     render() {
         return html `

package/components/dropdown/dropdown-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,wBAAwB,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAYtF,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,UAAU;aACxC,YAAO,GAAW,oBAAoB,CAAC;aACvC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;IAC/C,CAAC;IAUD;QACE,KAAK,EAAE,CAAC;QAER,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEhC,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;aACd;SACF,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;;AArBM;IAJN,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,wBAAwB,CAAC,OAAO;KAC3C,CAAC;wDAC6C","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcDropdownItemComponent from './dropdown-item.js';\nimport { styles } from './themes/dropdown-group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/dropdown-group.common.css.js';\n\n/**\n * A container for a group of `igc-dropdown-item` components.\n *\n * @element igc-dropdown-group\n *\n * @slot label - Contains the group's label.\n * @slot - Intended to contain the items belonging to this group.\n *\n * @csspart label - The native label element.\n */\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-group';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownGroupComponent);\n  }\n\n  /* blazorSuppress */\n  /** All child `igc-dropdown-item`s. */\n  @queryAssignedElements({\n    flatten: true,\n    selector: IgcDropdownItemComponent.tagName,\n  })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: {\n        role: 'group',\n      },\n    });\n  }\n\n  protected override render() {\n    return html`\n      <label part=\"label\">\n        <slot name=\"label\"></slot>\n      </label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-group.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,wBAAwB,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAEtF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;AAYhC,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,UAAU;aACxC,YAAO,GAAG,oBAAoB,AAAvB,CAAwB;aAC/B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;IAC/C,CAAC;IAsBD;QACE,KAAK,EAAE,CAAC;QArBO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;aACd;SACF,CAAC,CAAC;QAEc,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;QAaD,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAMO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC;IACxD,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;;AAxBM;IAJN,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,wBAAwB,CAAC,OAAO;KAC3C,CAAC;wDAC6C","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcDropdownItemComponent from './dropdown-item.js';\nimport { styles } from './themes/dropdown-group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/dropdown-group.common.css.js';\n\nconst Slots = setSlots('label');\n\n/**\n * A container for a group of dropdown items.\n *\n * @element igc-dropdown-group\n *\n * @slot label - Contains the group's label.\n * @slot - Intended to contain the items belonging to this group.\n *\n * @csspart label - The native label element.\n */\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownGroupComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'group',\n    },\n  });\n\n  private readonly _slots = addSlotController(this, {\n    slots: Slots,\n    initial: true,\n    onChange: this._labelChange,\n  });\n\n  /* blazorSuppress */\n  /** All child dropdown items. */\n  @queryAssignedElements({\n    flatten: true,\n    selector: IgcDropdownItemComponent.tagName,\n  })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n  }\n\n  /**\n   * The label is rendered into this shadow root, out of reach of an\n   * `aria-labelledby` on the host, so its text names the `group` directly.\n   */\n  private _labelChange(): void {\n    const label = this._slots.getAssignedText('label', true);\n    this._internals.setARIA({ ariaLabel: label || null });\n  }\n\n  protected override render() {\n    return html`\n      <label part=\"label\">\n        <slot name=\"label\"></slot>\n      </label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown-header.d.ts

@@ -1,13 +1,13 @@
 import { LitElement } from 'lit';
 /**
- * Represents a header item in a igc-dropdown list.
+ * Represents a header item in a dropdown list.
  *
  * @element igc-dropdown-header
  *
  * @slot - Renders the header.
  */
 export default class IgcDropdownHeaderComponent extends LitElement {
-    static readonly tagName: string;
+    static readonly tagName = "igc-dropdown-header";
     static styles: import("lit").CSSResult[];
     static register(): void;
     constructor();

package/components/dropdown/dropdown-header.js

@@ -1,6 +1,7 @@
 import { html, LitElement } from 'lit';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/dropdown-header.base.css.js';
 import { all } from './themes/header.js';
 import { styles as shared } from './themes/shared/header/dropdown-header.common.css.js';
@@ -12,6 +13,10 @@ export default class IgcDropdownHeaderComponent extends LitElement {
     }
     constructor() {
         super();
+        addInternalsController(this, {
+            initialARIA: { role: 'presentation' },
+            reflectRole: true,
+        });
         addThemingController(this, all);
     }
     render() {

package/components/dropdown/dropdown-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AASxF,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,UAAU;aACzC,YAAO,GAAW,qBAAqB,CAAC;aACxC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IAChD,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/dropdown-header.base.css.js';\nimport { all } from './themes/header.js';\nimport { styles as shared } from './themes/shared/header/dropdown-header.common.css.js';\n\n/**\n * Represents a header item in a igc-dropdown list.\n *\n * @element igc-dropdown-header\n *\n * @slot - Renders the header.\n */\nexport default class IgcDropdownHeaderComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-header';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownHeaderComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-header': IgcDropdownHeaderComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AASxF,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,UAAU;aACzC,YAAO,GAAG,qBAAqB,CAAC;aAChC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IAChD,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAER,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACrC,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;QACH,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { styles } from './themes/dropdown-header.base.css.js';\nimport { all } from './themes/header.js';\nimport { styles as shared } from './themes/shared/header/dropdown-header.common.css.js';\n\n/**\n * Represents a header item in a dropdown list.\n *\n * @element igc-dropdown-header\n *\n * @slot - Renders the header.\n */\nexport default class IgcDropdownHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-header';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownHeaderComponent);\n  }\n\n  constructor() {\n    super();\n\n    addInternalsController(this, {\n      initialARIA: { role: 'presentation' },\n      reflectRole: true,\n    });\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-header': IgcDropdownHeaderComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown-item.d.ts

@@ -1,4 +1,4 @@
-import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
+import { IgcBaseOptionLikeComponent } from '#internals/mixins/option.js';
 /**
  * Represents an item in a dropdown list.
  *
@@ -8,9 +8,9 @@ import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
  * @slot - Renders the item's main content.
  * @slot suffix - Renders content after the item's main content.
  *
- * @csspart prefix - The prefix wrapper of the igc-dropdown-item.
- * @csspart content - The main content wrapper of the igc-dropdown-item.
- * @csspart suffix - The suffix wrapper of the igc-dropdown-item.
+ * @csspart prefix - The prefix wrapper of the dropdown item.
+ * @csspart content - The main content wrapper of the dropdown item.
+ * @csspart suffix - The suffix wrapper of the dropdown item.
  */
 export default class IgcDropdownItemComponent extends IgcBaseOptionLikeComponent {
     static readonly tagName = "igc-dropdown-item";

package/components/dropdown/dropdown-item.js

@@ -1,6 +1,6 @@
-import { addThemingController } from '../../theming/theming-controller.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { IgcBaseOptionLikeComponent } from '#internals/mixins/option.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/dropdown-item.base.css.js';
 import { all } from './themes/item.js';
 import { styles as shared } from './themes/shared/item/dropdown-item.common.css.js';

package/components/dropdown/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kDAAkD,CAAC;AAepF,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,0BAA0B;aACvD,YAAO,GAAG,mBAAmB,CAAC;aAC9B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;IAC9C,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC","sourcesContent":["import { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';\nimport { styles } from './themes/dropdown-item.base.css.js';\nimport { all } from './themes/item.js';\nimport { styles as shared } from './themes/shared/item/dropdown-item.common.css.js';\n\n/**\n * Represents an item in a dropdown list.\n *\n * @element igc-dropdown-item\n *\n * @slot prefix - Renders content before the item's main content.\n * @slot - Renders the item's main content.\n * @slot suffix - Renders content after the item's main content.\n *\n * @csspart prefix - The prefix wrapper of the igc-dropdown-item.\n * @csspart content - The main content wrapper of the igc-dropdown-item.\n * @csspart suffix - The suffix wrapper of the igc-dropdown-item.\n */\nexport default class IgcDropdownItemComponent extends IgcBaseOptionLikeComponent {\n  public static readonly tagName = 'igc-dropdown-item';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownItemComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-item': IgcDropdownItemComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kDAAkD,CAAC;AAepF,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,0BAA0B;aACvD,YAAO,GAAG,mBAAmB,CAAC;aAC9B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;IAC9C,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC","sourcesContent":["import { registerComponent } from '#internals/definitions/register.js';\nimport { IgcBaseOptionLikeComponent } from '#internals/mixins/option.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { styles } from './themes/dropdown-item.base.css.js';\nimport { all } from './themes/item.js';\nimport { styles as shared } from './themes/shared/item/dropdown-item.common.css.js';\n\n/**\n * Represents an item in a dropdown list.\n *\n * @element igc-dropdown-item\n *\n * @slot prefix - Renders content before the item's main content.\n * @slot - Renders the item's main content.\n * @slot suffix - Renders content after the item's main content.\n *\n * @csspart prefix - The prefix wrapper of the dropdown item.\n * @csspart content - The main content wrapper of the dropdown item.\n * @csspart suffix - The suffix wrapper of the dropdown item.\n */\nexport default class IgcDropdownItemComponent extends IgcBaseOptionLikeComponent {\n  public static readonly tagName = 'igc-dropdown-item';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownItemComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-item': IgcDropdownItemComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown.d.ts

@@ -1,5 +1,6 @@
-import { IgcComboBoxBaseLikeComponent } from '../common/mixins/combo-box.js';
-import type { AbstractConstructor } from '../common/mixins/constructor.js';
+import { type PropertyValues } from 'lit';
+import { IgcComboBoxBaseLikeComponent } from '#internals/mixins/combo-box.js';
+import type { AbstractConstructor } from '#internals/mixins/constructor.js';
 import { type PopoverPlacement } from '../popover/popover.js';
 import type { PopoverScrollStrategy } from '../types.js';
 import IgcDropdownGroupComponent from './dropdown-group.js';
@@ -11,15 +12,15 @@ export interface IgcDropdownComponentEventMap {
     igcClosed: CustomEvent<void>;
     igcChange: CustomEvent<IgcDropdownItemComponent>;
 }
-declare const IgcDropdownComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDropdownComponentEventMap>> & AbstractConstructor<IgcComboBoxBaseLikeComponent>;
+declare const IgcDropdownComponent_base: import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcDropdownComponentEventMap>> & AbstractConstructor<IgcComboBoxBaseLikeComponent>;
 /**
- * Represents a DropDown component.
+ * Represents a Dropdown component.
  *
  * @element igc-dropdown
  *
  * @fires igcChange - Emitted when the selected item changes.
- * @fires igcOpening - Emitted just before the dropdown is open.
- * @fires igcOpened - Emitted after the dropdown is open.
+ * @fires igcOpening - Emitted just before the dropdown is opened.
+ * @fires igcOpened - Emitted after the dropdown is opened.
  * @fires igcClosing - Emitter just before the dropdown is closed.
  * @fires igcClosed - Emitted after closing the dropdown.
  *
@@ -34,14 +35,20 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base {
     static styles: import("lit").CSSResult[];
     static register(): void;
     private readonly _keyBindings;
-    private _rootScrollController;
-    protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
-    protected _selectedItem: IgcDropdownItemComponent | null;
-    protected _activeItem: IgcDropdownItemComponent;
-    private get _activeItems();
-    private _targetListeners;
+    private readonly _rootScrollController;
+    protected readonly _rootClickController: import("#internals/controllers/root-click.js").RootClickController;
+    private _selectedItem;
+    /** The item keyboard navigation moves from. Only {@link _activateItem} assigns it. */
+    private _activeItem;
+    /** The anchor passed to `show()` / `toggle()`, if any. */
+    private _explicitTarget?;
+    /** The anchor in use - the popover is positioned against it. */
     private _target?;
-    protected trigger: HTMLSlotElement;
+    private _targetListeners?;
+    private readonly _targetSlot;
+    /** The element currently assigned to the `target` slot, if any. */
+    private get _slottedTarget();
+    private get _activeItems();
     /** The preferred placement of the component around the target element.
      * @attr
      */
@@ -73,28 +80,64 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base {
     get groups(): IgcDropdownGroupComponent[];
     /** Returns the selected item from the dropdown or null. */
     get selectedItem(): IgcDropdownItemComponent | null;
-    protected scrollStrategyChanged(): void;
-    protected openStateChange(): void;
     constructor();
-    protected firstUpdated(): Promise<void>;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
     disconnectedCallback(): void;
-    private handleListBoxClick;
-    private handleChange;
-    private handleSlotChange;
-    private onArrowUp;
-    private onArrowDown;
-    protected onHomeKey(): void;
-    protected onEndKey(): void;
-    protected onTabKey(): void;
-    protected onEscapeKey(): void;
-    protected onEnterKey(): void;
-    protected handleClosing(): void;
-    private activateItem;
-    private _navigateToActiveItem;
+    protected willUpdate(properties: PropertyValues<this>): void;
+    protected firstUpdated(): Promise<void>;
+    protected updated(): void;
+    /**
+     * Re-resolves the selection whenever items enter or leave the light DOM -
+     * frameworks routinely render them after the initial paint, and a selected or
+     * navigated item may be taken out from under us.
+     */
+    private _handleItemsChange;
+    private _handleListBoxClick;
+    protected _handleAnchorClick(): void;
+    private _handleClosing;
+    private _handleArrowUp;
+    private _handleArrowDown;
+    private _handleHome;
+    private _handleEnd;
+    private _handleTab;
+    /** Selects the item navigation is on, if there is one. */
+    private _commitActiveItem;
+    private _activateItem;
+    private _setSelectedItem;
     private _selectItem;
-    private _updateAnchorAccessibility;
-    private getItem;
-    private _setTarget;
+    private _clearSelectedItem;
+    /** Highlights `item` and, while the list is open, brings it into view. */
+    private _navigateToActiveItem;
+    /** Resolves an item by its `value`, or by its index in {@link items}. */
+    private _resolveItem;
+    /**
+     * Moves everything bound to the anchor - key event listeners, outside click
+     * exemption and ARIA - over to the one currently in effect.
+     */
+    private _updateTarget;
+    /**
+     * Only an anchor outside of our own DOM needs listeners of its own - keyboard
+     * events on a slotted one already reach the host.
+     */
+    private _observeTarget;
+    private _setExplicitTarget;
+    /**
+     * Publishes the popup state and the navigation position on the current anchor.
+     *
+     * `aria-activedescendant` goes on the anchor because that is what holds DOM
+     * focus - the list is never focused, since the key bindings are observed on
+     * the anchor itself. There is no `aria-controls` to go with it: the list it
+     * would name lives in this shadow root, which an IDREF cannot cross and ARIA
+     * element reflection only ever resolves out of, never into.
+     */
+    private _syncAnchorARIA;
+    /**
+     * Stops driving the current anchor: its key event listeners go, along with
+     * everything {@link _syncAnchorARIA} wrote onto it.
+     */
+    private _releaseTarget;
     /** Shows the component. */
     show(target?: HTMLElement | string): Promise<boolean>;
     /** Toggles the open state of the component. */