igniteui-webcomponents 4.0.0-alpha → 4.0.0-alpha.3

package/components/dialog/dialog.js

@@ -0,0 +1,168 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var IgcDialogComponent_1;
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../common/decorators/watch.js';
+import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { createCounter } from '../common/util.js';
+import { styles } from './themes/light/dialog.base.css.js';
+import { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';
+import { styles as fluent } from './themes/light/dialog.fluent.css.js';
+import { styles as indigo } from './themes/light/dialog.indigo.css.js';
+import { styles as material } from './themes/light/dialog.material.css.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcButtonComponent from '../button/button.js';
+defineComponents(IgcButtonComponent);
+let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.titleId = `title-${IgcDialogComponent_1.increment()}`;
+        this.closeOnEscape = true;
+        this.closeOnOutsideClick = false;
+        this.hideDefaultAction = false;
+        this.open = false;
+        this.formSubmitHandler = (e) => {
+            var _a;
+            if (e instanceof SubmitEvent && e.submitter) {
+                this.returnValue = ((_a = e.submitter) === null || _a === void 0 ? void 0 : _a.value) || '';
+            }
+            if (!e.defaultPrevented) {
+                this.hideWithEvent();
+            }
+        };
+    }
+    handleOpenState() {
+        this.open ? this.dialog.showModal() : this.dialog.close();
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        if (this.open) {
+            this.dialog.showModal();
+        }
+    }
+    show() {
+        if (this.open) {
+            return;
+        }
+        this.open = true;
+    }
+    hide() {
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+    }
+    toggle() {
+        this.open ? this.hide() : this.show();
+    }
+    async hideWithEvent() {
+        if (!this.open) {
+            return;
+        }
+        if (!this.handleClosing()) {
+            return;
+        }
+        this.open = false;
+        await this.updateComplete;
+        this.emitEvent('igcClosed');
+    }
+    handleCancel(event) {
+        event.preventDefault();
+        if (this.closeOnEscape) {
+            this.hideWithEvent();
+        }
+    }
+    handleClick({ clientX, clientY, target }) {
+        if (this.closeOnOutsideClick && this.dialog.isSameNode(target)) {
+            const { left, top, right, bottom } = this.dialog.getBoundingClientRect();
+            const between = (x, low, high) => x >= low && x <= high;
+            if (!(between(clientX, left, right) && between(clientY, top, bottom))) {
+                this.hideWithEvent();
+            }
+        }
+    }
+    handleClosing() {
+        return this.emitEvent('igcClosing', { cancelable: true });
+    }
+    handleSlotChange() {
+        Array.from(this.querySelectorAll('igc-form, form'))
+            .filter((each) => each.getAttribute('method') === 'dialog')
+            .forEach((form) => {
+            const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';
+            form.removeEventListener(event, this.formSubmitHandler);
+            form.addEventListener(event, this.formSubmitHandler);
+        });
+    }
+    render() {
+        const label = this.ariaLabel ? this.ariaLabel : undefined;
+        const labelledby = label ? undefined : this.titleId;
+        return html `
+      <div part="backdrop" aria-hidden="true" ?hidden=${!this.open}></div>
+      <dialog
+        part="base"
+        role="dialog"
+        @click=${this.handleClick}
+        @cancel=${this.handleCancel}
+        aria-label=${ifDefined(label)}
+        aria-labelledby=${ifDefined(labelledby)}
+      >
+        <header part="title" id=${this.titleId}>
+          <slot name="title"><span>${this.title}</span></slot>
+        </header>
+        <section part="content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </section>
+        <footer part="footer">
+          <slot name="footer">
+            ${this.hideDefaultAction
+            ? nothing
+            : html `<igc-button variant="flat" @click=${this.hideWithEvent}
+                  >OK</igc-button
+                >`}
+          </slot>
+        </footer>
+      </dialog>
+    `;
+    }
+};
+IgcDialogComponent.tagName = 'igc-dialog';
+IgcDialogComponent.styles = [styles];
+IgcDialogComponent.increment = createCounter();
+__decorate([
+    query('dialog', true)
+], IgcDialogComponent.prototype, "dialog", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-escape' })
+], IgcDialogComponent.prototype, "closeOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-outside-click' })
+], IgcDialogComponent.prototype, "closeOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-default-action' })
+], IgcDialogComponent.prototype, "hideDefaultAction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcDialogComponent.prototype, "open", void 0);
+__decorate([
+    property()
+], IgcDialogComponent.prototype, "title", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcDialogComponent.prototype, "returnValue", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], IgcDialogComponent.prototype, "handleOpenState", null);
+IgcDialogComponent = IgcDialogComponent_1 = __decorate([
+    themes({ bootstrap, material, fluent, indigo }),
+    blazorAdditionalDependencies('IgcButtonComponent')
+], IgcDialogComponent);
+export default IgcDialogComponent;
+//# sourceMappingURL=dialog.js.map

package/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/dialog.base.css.js';\nimport { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dialog.fluent.css.js';\nimport { styles as indigo } from './themes/light/dialog.indigo.css.js';\nimport { styles as material } from './themes/light/dialog.material.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcDialogEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\n/**\n * Represents a Dialog component.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitter just before the dialog is closed.\n * @fires igcClosed - Emitted after closing the dialog.\n *\n * @slot - Renders content inside the default slot.\n * @slot title - Renders the title of the dialog header.\n * @slot footer - Renders the dialog footer.\n *\n * @csspart base - The base wrapper of the dialog.\n * @csspart title - The title container.\n * @csspart footer - The footer container.\n * @csspart overlay - The overlay.\n */\n@themes({ bootstrap, material, fluent, indigo })\n@blazorAdditionalDependencies('IgcButtonComponent')\nexport default class IgcDialogComponent extends EventEmitterMixin<\n  IgcDialogEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-dialog';\n  public static styles = [styles];\n\n  private static readonly increment = createCounter();\n  private titleId = `title-${IgcDialogComponent.increment()}`;\n\n  @query('dialog', true)\n  private dialog!: HTMLDialogElement;\n\n  /** Whether the dialog should be closed when pressing the 'ESCAPE' button.  */\n  @property({ type: Boolean, attribute: 'close-on-escape' })\n  public closeOnEscape = true;\n\n  /** Whether the dialog should be closed when clicking outside of it.  */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * Whether to hide the default action button for the dialog.\n   *\n   * When there is projected content in the `footer` slot this property\n   * has no effect.\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /** Whether the dialog is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Sets the title of the dialog.  */\n  @property()\n  public override title!: string;\n\n  /** Sets the return value for the dialog. */\n  @property({ attribute: false })\n  public returnValue!: string;\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  protected handleOpenState() {\n    this.open ? this.dialog.showModal() : this.dialog.close();\n  }\n\n  protected override async firstUpdated() {\n    await this.updateComplete;\n    if (this.open) {\n      this.dialog.showModal();\n    }\n  }\n\n  /** Opens the dialog. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n  }\n\n  /** Closes the dialog. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Toggles the open state of the dialog. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  protected async hideWithEvent() {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this.handleClosing()) {\n      return;\n    }\n\n    this.open = false;\n    await this.updateComplete;\n    this.emitEvent('igcClosed');\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n\n    if (this.closeOnEscape) {\n      this.hideWithEvent();\n    }\n  }\n\n  private handleClick({ clientX, clientY, target }: MouseEvent) {\n    if (this.closeOnOutsideClick && this.dialog.isSameNode(target as Node)) {\n      const { left, top, right, bottom } = this.dialog.getBoundingClientRect();\n      const between = (x: number, low: number, high: number) =>\n        x >= low && x <= high;\n      if (!(between(clientX, left, right) && between(clientY, top, bottom))) {\n        this.hideWithEvent();\n      }\n    }\n  }\n\n  private handleClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\n\n  protected formSubmitHandler = (e: Event) => {\n    if (e instanceof SubmitEvent && e.submitter) {\n      this.returnValue = (e.submitter as any)?.value || '';\n    }\n    if (!e.defaultPrevented) {\n      this.hideWithEvent();\n    }\n  };\n\n  private handleSlotChange() {\n    // Setup submit handling for supported forms\n    Array.from(this.querySelectorAll('igc-form, form'))\n      .filter((each) => each.getAttribute('method') === 'dialog')\n      .forEach((form) => {\n        const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';\n        form.removeEventListener(event, this.formSubmitHandler);\n        form.addEventListener(event, this.formSubmitHandler);\n      });\n  }\n\n  protected override render() {\n    const label = this.ariaLabel ? this.ariaLabel : undefined;\n    const labelledby = label ? undefined : this.titleId;\n\n    return html`\n      <div part=\"backdrop\" aria-hidden=\"true\" ?hidden=${!this.open}></div>\n      <dialog\n        part=\"base\"\n        role=\"dialog\"\n        @click=${this.handleClick}\n        @cancel=${this.handleCancel}\n        aria-label=${ifDefined(label)}\n        aria-labelledby=${ifDefined(labelledby)}\n      >\n        <header part=\"title\" id=${this.titleId}>\n          <slot name=\"title\"><span>${this.title}</span></slot>\n        </header>\n        <section part=\"content\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </section>\n        <footer part=\"footer\">\n          <slot name=\"footer\">\n            ${this.hideDefaultAction\n              ? nothing\n              : html`<igc-button variant=\"flat\" @click=${this.hideWithEvent}\n                  >OK</igc-button\n                >`}\n          </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dialog': IgcDialogComponent;\n  }\n}\n"]}

package/components/dialog/themes/light/dialog.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/dialog/themes/light/dialog.base.css.js

@@ -0,0 +1,127 @@
+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;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* stylelint-disable max-line-length */
+:host {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 2px), 2px);
+  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
+  color: var(--ig-surface-500-contrast);
+  border-style: none;
+  padding: unset;
+}
+
+[part=base] {
+  background: inherit;
+  color: inherit;
+  border-style: inherit;
+  padding: inherit;
+  border: inherit;
+  border-radius: inherit;
+  min-width: inherit;
+  -webkit-box-shadow: var(--igc-elevation-24);
+          box-shadow: var(--igc-elevation-24);
+}
+
+[part=content] {
+  max-width: 40ch;
+  color: var(--content-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  font-family: var(--ig-body-1-font-family);
+  font-size: var(--ig-body-1-font-size);
+  font-weight: var(--ig-body-1-font-weight);
+  font-style: var(--ig-body-1-font-style);
+  line-height: var(--ig-body-1-line-height);
+  letter-spacing: var(--ig-body-1-letter-spacing);
+  text-transform: var(--ig-body-1-text-transform);
+  margin-top: var(--ig-body-1-margin-top);
+  margin-bottom: var(--ig-body-1-margin-bottom);
+  margin: 0;
+}
+
+[part=title],
+[part=footer] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  font-family: var(--ig-h6-font-family);
+  font-size: var(--ig-h6-font-size);
+  font-weight: var(--ig-h6-font-weight);
+  font-style: var(--ig-h6-font-style);
+  line-height: var(--ig-h6-line-height);
+  letter-spacing: var(--ig-h6-letter-spacing);
+  text-transform: var(--ig-h6-text-transform);
+  margin-top: var(--ig-h6-margin-top);
+  margin-bottom: var(--ig-h6-margin-bottom);
+  margin: 0;
+}
+
+[part=footer] {
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+::slotted(*) {
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+slot[name=title]::slotted(:not(:last-child)),
+slot[name=footer]::slotted(:not(:last-child)) {
+  -webkit-margin-end: 0.5rem;
+          margin-inline-end: 0.5rem;
+}
+
+dialog::-webkit-backdrop {
+  background: none;
+}
+
+dialog::backdrop {
+  background: none;
+}
+
+[part=backdrop] {
+  position: fixed;
+  inset: 0;
+  background: hsla(var(--ig-gray-500), 0.54);
+}`;
+//# sourceMappingURL=dialog.base.css.js.map

package/components/dialog/themes/light/dialog.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4HvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */\n:host {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 2px), 2px);\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  border-style: none;\n  padding: unset;\n}\n\n[part=base] {\n  background: inherit;\n  color: inherit;\n  border-style: inherit;\n  padding: inherit;\n  border: inherit;\n  border-radius: inherit;\n  min-width: inherit;\n  -webkit-box-shadow: var(--igc-elevation-24);\n          box-shadow: var(--igc-elevation-24);\n}\n\n[part=content] {\n  max-width: 40ch;\n  color: var(--content-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  font-family: var(--ig-body-1-font-family);\n  font-size: var(--ig-body-1-font-size);\n  font-weight: var(--ig-body-1-font-weight);\n  font-style: var(--ig-body-1-font-style);\n  line-height: var(--ig-body-1-line-height);\n  letter-spacing: var(--ig-body-1-letter-spacing);\n  text-transform: var(--ig-body-1-text-transform);\n  margin-top: var(--ig-body-1-margin-top);\n  margin-bottom: var(--ig-body-1-margin-bottom);\n  margin: 0;\n}\n\n[part=title],\n[part=footer] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  font-family: var(--ig-h6-font-family);\n  font-size: var(--ig-h6-font-size);\n  font-weight: var(--ig-h6-font-weight);\n  font-style: var(--ig-h6-font-style);\n  line-height: var(--ig-h6-line-height);\n  letter-spacing: var(--ig-h6-letter-spacing);\n  text-transform: var(--ig-h6-text-transform);\n  margin-top: var(--ig-h6-margin-top);\n  margin-bottom: var(--ig-h6-margin-bottom);\n  margin: 0;\n}\n\n[part=footer] {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -webkit-box-pack: end;\n      -ms-flex-pack: end;\n          justify-content: flex-end;\n}\n\n::slotted(*) {\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  text-transform: inherit;\n  margin: 0;\n}\n\nslot[name=title]::slotted(:not(:last-child)),\nslot[name=footer]::slotted(:not(:last-child)) {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\ndialog::-webkit-backdrop {\n  background: none;\n}\n\ndialog::backdrop {\n  background: none;\n}\n\n[part=backdrop] {\n  position: fixed;\n  inset: 0;\n  background: hsla(var(--ig-gray-500), 0.54);\n}`;\n"]}

package/components/dialog/themes/light/dialog.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/dialog/themes/light/dialog.bootstrap.css.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+export const styles = css `/* stylelint-disable max-line-length */
+:host {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 4px), 4px);
+}
+
+[part=base] {
+  min-width: 18rem;
+  border: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+[part=title],
+[part=footer] {
+  font-family: var(--ig-h5-font-family);
+  font-size: var(--ig-h5-font-size);
+  font-weight: var(--ig-h5-font-weight);
+  font-style: var(--ig-h5-font-style);
+  line-height: var(--ig-h5-line-height);
+  letter-spacing: var(--ig-h5-letter-spacing);
+  text-transform: var(--ig-h5-text-transform);
+  margin-top: var(--ig-h5-margin-top);
+  margin-bottom: var(--ig-h5-margin-bottom);
+  margin: 0;
+  padding: 1rem;
+}
+
+[part=content] {
+  padding: 1rem;
+}
+
+[part=title] {
+  -webkit-border-after: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+          border-block-end: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+}
+
+[part=footer] {
+  -webkit-border-before: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+          border-block-start: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+}`;
+//# sourceMappingURL=dialog.bootstrap.css.js.map

package/components/dialog/themes/light/dialog.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 4px), 4px);\n}\n\n[part=base] {\n  min-width: 18rem;\n  border: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\n[part=title],\n[part=footer] {\n  font-family: var(--ig-h5-font-family);\n  font-size: var(--ig-h5-font-size);\n  font-weight: var(--ig-h5-font-weight);\n  font-style: var(--ig-h5-font-style);\n  line-height: var(--ig-h5-line-height);\n  letter-spacing: var(--ig-h5-letter-spacing);\n  text-transform: var(--ig-h5-text-transform);\n  margin-top: var(--ig-h5-margin-top);\n  margin-bottom: var(--ig-h5-margin-bottom);\n  margin: 0;\n  padding: 1rem;\n}\n\n[part=content] {\n  padding: 1rem;\n}\n\n[part=title] {\n  -webkit-border-after: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n          border-block-end: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n}\n\n[part=footer] {\n  -webkit-border-before: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n          border-block-start: 1px solid var(--border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n}`;\n"]}

package/components/dialog/themes/light/dialog.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/dialog/themes/light/dialog.fluent.css.js

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+export const styles = css `/* stylelint-disable max-line-length */
+[part=title] {
+  padding: 1.5rem;
+  -webkit-padding-before: 1rem;
+          padding-block-start: 1rem;
+}
+
+[part=content] {
+  padding-inline: 1.5rem;
+  -webkit-padding-after: 1.25rem;
+          padding-block-end: 1.25rem;
+}
+
+[part=footer] {
+  padding: 1.5rem;
+  -webkit-padding-before: 0;
+          padding-block-start: 0;
+}
+
+[part=backdrop] {
+  background: rgba(255, 255, 255, 0.4);
+}`;
+//# sourceMappingURL=dialog.fluent.css.js.map

package/components/dialog/themes/light/dialog.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;EAqBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part=title] {\n  padding: 1.5rem;\n  -webkit-padding-before: 1rem;\n          padding-block-start: 1rem;\n}\n\n[part=content] {\n  padding-inline: 1.5rem;\n  -webkit-padding-after: 1.25rem;\n          padding-block-end: 1.25rem;\n}\n\n[part=footer] {\n  padding: 1.5rem;\n  -webkit-padding-before: 0;\n          padding-block-start: 0;\n}\n\n[part=backdrop] {\n  background: rgba(255, 255, 255, 0.4);\n}`;\n"]}

package/components/dialog/themes/light/dialog.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/dialog/themes/light/dialog.indigo.css.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export const styles = css `/* stylelint-disable max-line-length */
+[part=title] {
+  padding: 1rem 1.5rem;
+}
+
+[part=content] {
+  padding-inline: 1.5rem;
+  -webkit-padding-after: 0.5rem;
+          padding-block-end: 0.5rem;
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+
+[part=footer] {
+  padding: 0.5rem;
+}`;
+//# sourceMappingURL=dialog.indigo.css.js.map

package/components/dialog/themes/light/dialog.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;EAcvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part=title] {\n  padding: 1rem 1.5rem;\n}\n\n[part=content] {\n  padding-inline: 1.5rem;\n  -webkit-padding-after: 0.5rem;\n          padding-block-end: 0.5rem;\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part=footer] {\n  padding: 0.5rem;\n}`;\n"]}

package/components/dialog/themes/light/dialog.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/dialog/themes/light/dialog.material.css.js

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+export const styles = css `/* stylelint-disable max-line-length */
+[part=title] {
+  padding-inline: 1.5rem;
+  -webkit-padding-before: 1rem;
+          padding-block-start: 1rem;
+}
+
+[part=content] {
+  padding: 0.875rem 1.5rem;
+}
+
+[part=footer] {
+  padding: 0.5rem;
+  -webkit-padding-before: 0;
+          padding-block-start: 0;
+}`;
+//# sourceMappingURL=dialog.material.css.js.map

package/components/dialog/themes/light/dialog.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.material.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;EAevB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part=title] {\n  padding-inline: 1.5rem;\n  -webkit-padding-before: 1rem;\n          padding-block-start: 1rem;\n}\n\n[part=content] {\n  padding: 0.875rem 1.5rem;\n}\n\n[part=footer] {\n  padding: 0.5rem;\n  -webkit-padding-before: 0;\n          padding-block-start: 0;\n}`;\n"]}

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import type IgcDropdownItemComponent from './dropdown-item';
 import { SizableInterface } from '../common/mixins/sizable.js';
+import type IgcDropdownItemComponent from './dropdown-item';
 /**
  * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.
  *
@@ -10,7 +10,7 @@ import { SizableInterface } from '../common/mixins/sizable.js';
  * @csspart label - The native label element.
  */
 export default class IgcDropdownGroupComponent extends LitElement {
-    static readonly tagName = "igc-dropdown-group";
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
     protected parent: SizableInterface;
     /** All child `igc-dropdown-item`s. */

package/components/dropdown/dropdown-group.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 import { styles } from './themes/light/dropdown-group.base.css.js';
 import { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';
-import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 let IgcDropdownGroupComponent = class IgcDropdownGroupComponent extends LitElement {
     connectedCallback() {
         super.connectedCallback();

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;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAE/E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAYxE,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAW/C,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC;IAES,SAAS;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,CAAE,CAAC;IACvC,CAAC;IAEkB,MAAM;;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,mCAAI,OAAO,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF,CAAA;AA7BwB,iCAAO,GAAG,oBAAqB,CAAA;AAE/B,gCAAM,GAAG,MAAO,CAAA;AAMvC;IAFC,cAAc,EAAE;IAChB,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;wDACzB;AAT5B,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,yBAAyB,CA8B7C;eA9BoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-group.base.css.js';\nimport { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';\nimport type IgcDropdownItemComponent from './dropdown-item';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { SizableInterface } from '../common/mixins/sizable.js';\n\n/**\n * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.\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 */\n@themes({ fluent })\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n\n  public static override styles = styles;\n  protected parent!: SizableInterface;\n\n  /** All child `igc-dropdown-item`s. */\n  @blazorSuppress()\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'group');\n    this.parent = this.getParent();\n  }\n\n  protected getParent() {\n    return this.closest('igc-dropdown')!;\n  }\n\n  protected override render() {\n    this.setAttribute('size', this.parent?.size ?? 'large');\n\n    return html`\n      <label part=\"label\"><slot name=\"label\"></slot></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,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGxE,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAW/E,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAW/C,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC;IAES,SAAS;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,CAAE,CAAC;IACvC,CAAC;IAEkB,MAAM;;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,mCAAI,OAAO,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF,CAAA;AA7BwB,iCAAO,GAAW,oBAAqB,CAAA;AAEvC,gCAAM,GAAG,MAAO,CAAA;AAMvC;IAFC,cAAc,EAAE;IAChB,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;wDACzB;AAT5B,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,yBAAyB,CA8B7C;eA9BoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { SizableInterface } from '../common/mixins/sizable.js';\nimport type IgcDropdownItemComponent from './dropdown-item';\nimport { styles } from './themes/light/dropdown-group.base.css.js';\nimport { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';\n\n/**\n * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.\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 */\n@themes({ fluent })\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-group';\n\n  public static override styles = styles;\n  protected parent!: SizableInterface;\n\n  /** All child `igc-dropdown-item`s. */\n  @blazorSuppress()\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'group');\n    this.parent = this.getParent();\n  }\n\n  protected getParent() {\n    return this.closest('igc-dropdown')!;\n  }\n\n  protected override render() {\n    this.setAttribute('size', this.parent?.size ?? 'large');\n\n    return html`\n      <label part=\"label\"><slot name=\"label\"></slot></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

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * @slot - Renders the header.
  */
 export default class IgcDropdownHeaderComponent extends LitElement {
-    static readonly tagName = "igc-dropdown-header";
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/dropdown/dropdown-header.js

@@ -8,6 +8,7 @@ import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { styles } from './themes/light/dropdown-header.base.css.js';
 import { styles as bootstrap } from './themes/light/dropdown-header.bootstrap.css.js';
+import { styles as fluent } from './themes/light/dropdown-header.fluent.css.js';
 let IgcDropdownHeaderComponent = class IgcDropdownHeaderComponent extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -16,7 +17,7 @@ let IgcDropdownHeaderComponent = class IgcDropdownHeaderComponent extends LitEle
 IgcDropdownHeaderComponent.tagName = 'igc-dropdown-header';
 IgcDropdownHeaderComponent.styles = styles;
 IgcDropdownHeaderComponent = __decorate([
-    themes({ bootstrap })
+    themes({ bootstrap, fluent })
 ], IgcDropdownHeaderComponent);
 export default IgcDropdownHeaderComponent;
 //# sourceMappingURL=dropdown-header.js.map

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;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAQtF,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,UAAU;IAK7C,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAPwB,kCAAO,GAAG,qBAAsB,CAAA;AAEhC,iCAAM,GAAG,MAAO,CAAA;AAHpB,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,0BAA0B,CAQ9C;eARoB,0BAA0B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-header.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-header.bootstrap.css.js';\n\n/**\n * @element igc-dropdown-header - Represents a header item in a dropdown list.\n *\n * @slot - Renders the header.\n */\n@themes({ bootstrap })\nexport default class IgcDropdownHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-header';\n\n  public static override styles = styles;\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,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8CAA8C,CAAC;AAQhF,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,UAAU;IAK7C,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAPwB,kCAAO,GAAW,qBAAsB,CAAA;AAExC,iCAAM,GAAG,MAAO,CAAA;AAHpB,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;GACT,0BAA0B,CAQ9C;eARoB,0BAA0B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-header.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-header.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown-header.fluent.css.js';\n\n/**\n * @element igc-dropdown-header - Represents a header item in a dropdown list.\n *\n * @slot - Renders the header.\n */\n@themes({ bootstrap, fluent })\nexport default class IgcDropdownHeaderComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-header';\n\n  public static override styles = styles;\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"]}

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

@@ -13,7 +13,7 @@ import { LitElement } from 'lit';
  * @csspart suffix - The suffix wrapper.
  */
 export default class IgcDropdownItemComponent extends LitElement {
-    static readonly tagName = "igc-dropdown-item";
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
     private _value;
     /**

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,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAgB9E,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QA0BS,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;QAMf,aAAQ,GAAG,KAAK,CAAC;IA6B1B,CAAC;IAvDC,IAAW,KAAK;;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5D,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAqBS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAlEwB,gCAAO,GAAG,mBAAoB,CAAA;AAE9B,+BAAM,GAAG,MAAO,CAAA;AASvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAG1B;AAYD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACrB;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAGxB;IADC,KAAK,CAAC,UAAU,CAAC;8DAMjB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;8DAKjB;AArDkB,wBAAwB;IAD5C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,wBAAwB,CAmE5C;eAnEoB,wBAAwB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { styles } from './themes/light/dropdown-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/dropdown-item.indigo.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.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcDropdownItemComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-item';\n\n  public static override styles = styles;\n\n  private _value!: string;\n\n  /**\n   * Тhe current value of the item.\n   * If not specified, the element's text content is used.\n   */\n  @property({ type: String })\n  public get value() {\n    return this._value ? this._value : this.textContent ?? '';\n  }\n\n  public set value(value: string) {\n    const oldVal = this._value;\n    this._value = value;\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * Determines whether the item is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.selected\n      ? this.setAttribute('aria-selected', 'true')\n      : this.removeAttribute('aria-selected');\n    this.active = this.selected;\n  }\n\n  @watch('disabled')\n  protected disabledChange() {\n    this.disabled\n      ? this.setAttribute('aria-disabled', 'true')\n      : this.removeAttribute('aria-disabled');\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\"><slot name=\"prefix\"></slot></section>\n      <section part=\"content\"><slot></slot></section>\n      <section part=\"suffix\"><slot name=\"suffix\"></slot></section>\n    `;\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,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAgB9E,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QA0BS,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;QAMf,aAAQ,GAAG,KAAK,CAAC;IA6B1B,CAAC;IAvDC,IAAW,KAAK;;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5D,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAqBS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAlEwB,gCAAO,GAAW,mBAAoB,CAAA;AAEtC,+BAAM,GAAG,MAAO,CAAA;AASvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAG1B;AAYD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACrB;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAGxB;IADC,KAAK,CAAC,UAAU,CAAC;8DAMjB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;8DAKjB;AArDkB,wBAAwB;IAD5C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,wBAAwB,CAmE5C;eAnEoB,wBAAwB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { styles } from './themes/light/dropdown-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/dropdown-item.indigo.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.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcDropdownItemComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-item';\n\n  public static override styles = styles;\n\n  private _value!: string;\n\n  /**\n   * Тhe current value of the item.\n   * If not specified, the element's text content is used.\n   */\n  @property({ type: String })\n  public get value() {\n    return this._value ? this._value : this.textContent ?? '';\n  }\n\n  public set value(value: string) {\n    const oldVal = this._value;\n    this._value = value;\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * Determines whether the item is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.selected\n      ? this.setAttribute('aria-selected', 'true')\n      : this.removeAttribute('aria-selected');\n    this.active = this.selected;\n  }\n\n  @watch('disabled')\n  protected disabledChange() {\n    this.disabled\n      ? this.setAttribute('aria-disabled', 'true')\n      : this.removeAttribute('aria-disabled');\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\"><slot name=\"prefix\"></slot></section>\n      <section part=\"content\"><slot></slot></section>\n      <section part=\"suffix\"><slot name=\"suffix\"></slot></section>\n    `;\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 { LitElement } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
+import { IgcToggleController } from '../toggle/toggle.controller.js';
 import type { IgcPlacement, IgcToggleComponent, IgcToggleEventMap } from '../toggle/types';
 import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
@@ -25,12 +26,13 @@ declare const IgcDropdownComponent_base: Constructor<import("../common/mixins/si
  * @csspart list - The dropdown list.
  */
 export default class IgcDropdownComponent extends IgcDropdownComponent_base implements IgcToggleComponent {
-    static readonly tagName = "igc-dropdown";
+    /** @private */
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
-    private toggleController;
-    private selectedItem;
-    private activeItem;
-    private target;
+    protected toggleController: IgcToggleController;
+    protected selectedItem: IgcDropdownItemComponent | null;
+    protected activeItem: IgcDropdownItemComponent;
+    protected target: HTMLElement;
     private readonly keyDownHandlers;
     protected get allItems(): IgcDropdownItemComponent[];
     private targetNodes;
@@ -89,11 +91,11 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base impl
     protected navigate(direction: -1 | 1, currentIndex?: number): void;
     private navigateItem;
     private scrollToHiddenItem;
-    private getNearestSiblingFocusableItemIndex;
+    protected getNearestSiblingFocusableItemIndex(startIndex: number, direction: -1 | 1): number;
     private navigateNext;
     private navigatePrev;
-    private onArrowDownKeyDown;
-    private onArrowUpKeyDown;
+    protected onArrowDownKeyDown(): void;
+    protected onArrowUpKeyDown(): void;
     private _hide;
     /** Shows the dropdown. */
     show(target?: HTMLElement): void;