From 676fff98aa6dda3c9a074c397f1841572e92fe66 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Fri, 27 Jun 2025 18:32:52 +0300
Subject: [PATCH 01/19] feat: SlotController implementation and tests

---
 .../common/controllers/slot.spec.ts           | 233 ++++++++++++++++++
 src/components/common/controllers/slot.ts     | 196 +++++++++++++++
 2 files changed, 429 insertions(+)
 create mode 100644 src/components/common/controllers/slot.spec.ts
 create mode 100644 src/components/common/controllers/slot.ts

diff --git a/src/components/common/controllers/slot.spec.ts b/src/components/common/controllers/slot.spec.ts
new file mode 100644
index 000000000..263258f24
--- /dev/null
+++ b/src/components/common/controllers/slot.spec.ts
@@ -0,0 +1,233 @@
+import {
+  defineCE,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  unsafeStatic,
+} from '@open-wc/testing';
+import { LitElement } from 'lit';
+import { first, last } from '../util.js';
+import {
+  addSlotController,
+  type SlotChangeCallbackParameters,
+  type SlotController,
+  setSlots,
+} from './slot.js';
+
+type TestSlotController = SlotController<'[default]' | 'start' | 'end'>;
+
+describe('Slots controller', () => {
+  let tag: string;
+  let instance: LitElement & {
+    slotController: TestSlotController;
+    slotsCallbackResults: SlotChangeCallbackParameters<
+      '[default]' | 'start' | 'end'
+    >[];
+  };
+  let slots: TestSlotController;
+
+  before(() => {
+    tag = defineCE(
+      class extends LitElement {
+        public readonly slotsCallbackResults: SlotChangeCallbackParameters<
+          '[default]' | 'start' | 'end'
+        >[] = [];
+
+        public readonly slotController = addSlotController(this, {
+          slots: setSlots('start', 'end'),
+          onChange: (params) => this.slotsCallbackResults.push(params),
+          initial: true,
+        });
+
+        protected override render() {
+          return html`
+            <slot name="start"></slot>
+            <slot>Default node content</slot>
+            <slot name="end">
+              <span>Default element content</span>
+            </slot>
+          `;
+        }
+      }
+    );
+  });
+
+  describe('Assigned nodes API', () => {
+    beforeEach(async () => {
+      const tagName = unsafeStatic(tag);
+      instance = await fixture(html`<${tagName}></${tagName}`);
+      slots = instance.slotController;
+    });
+
+    it('should return false for default assigned nodes with `flatten` = false', () => {
+      expect(slots.hasAssignedNodes('[default]')).to.be.false;
+    });
+
+    it('should return true for default assigned nodes with `flatten` = true', () => {
+      expect(slots.hasAssignedNodes('[default]', true)).to.be.true;
+    });
+
+    it('should return false for slots lacking default nodes with `flatten` = false', () => {
+      expect(slots.hasAssignedNodes('start')).to.be.false;
+    });
+
+    it('should return false for slots lacking default nodes with `flatten` = true', () => {
+      expect(slots.hasAssignedNodes('start', true)).to.be.false;
+    });
+
+    it('should return an empty array for default assigned nodes with `flatten` = false', () => {
+      expect(slots.getAssignedNodes('[default]')).to.be.empty;
+    });
+
+    it('should return an array of one text node for default assigned nodes with `flatten` = true', () => {
+      expect(slots.getAssignedNodes('[default]', true)).lengthOf(1);
+    });
+
+    it('should return an empty array for slots lacking default nodes with `flatten` = false', () => {
+      expect(slots.getAssignedNodes('start')).to.be.empty;
+    });
+
+    it('should return an empty array for slots lacking default nodes with `flatten` = true', () => {
+      expect(slots.getAssignedNodes('start')).to.be.empty;
+    });
+
+    it('correctly reflects nodes projected in the default slot', () => {
+      const text = document.createTextNode('Slotted content');
+      instance.append(text);
+
+      expect(first(slots.getAssignedNodes('[default]')).textContent).to.equal(
+        'Slotted content'
+      );
+    });
+  });
+
+  describe('Assigned elements API', () => {
+    beforeEach(async () => {
+      const tagName = unsafeStatic(tag);
+      instance = await fixture(html`<${tagName}></${tagName}`);
+      slots = instance.slotController;
+    });
+
+    it('should return false for default assigned elements with `flatten` = false', () => {
+      expect(slots.hasAssignedElements('[default]')).to.be.false;
+    });
+
+    it('should return false for slots lacking default elements with `flatten` = true', () => {
+      expect(slots.hasAssignedElements('[default]', { flatten: true })).to.be
+        .false;
+    });
+
+    it('should return false for slots lacking default elements with `flatten` = false', () => {
+      expect(slots.hasAssignedElements('end')).to.be.false;
+    });
+
+    it('should return true for slots with default elements with `flatten` = true', () => {
+      expect(slots.hasAssignedElements('end', { flatten: true })).to.be.true;
+    });
+
+    it('should return an empty array for default assigned elements with `flatten` = false', () => {
+      expect(slots.getAssignedElements('end')).to.be.empty;
+    });
+
+    it('should return an array of one element for default assigned elements with `flatten` = true', () => {
+      expect(slots.getAssignedElements('end', { flatten: true })).lengthOf(1);
+    });
+
+    it('should correctly reflects element projected in a slot', () => {
+      const elements = Array.from({ length: 5 }, () =>
+        document.createElement('span')
+      );
+      instance.append(...elements);
+
+      expect(slots.getAssignedElements('[default]')).lengthOf(5);
+    });
+
+    it('should correctly filter assigned elements based on a CSS selector', () => {
+      const elements = Array.from({ length: 6 }, (_, i) => {
+        const element = document.createElement('span');
+        if (i % 2) {
+          element.hidden = true;
+        }
+
+        return element;
+      });
+      instance.append(...elements);
+
+      expect(
+        slots.getAssignedElements('[default]', { selector: ':not([hidden])' })
+      ).lengthOf(3);
+    });
+  });
+
+  describe('Slot onChange callback', () => {
+    beforeEach(async () => {
+      beforeEach(async () => {
+        const tagName = unsafeStatic(tag);
+        instance = await fixture(html`<${tagName}></${tagName}`);
+        slots = instance.slotController;
+      });
+    });
+
+    it('should have an initial callback state invoked on first update', () => {
+      const state = first(instance.slotsCallbackResults);
+      expect(state.isInitial).to.be.true;
+      expect(state.isDefault).to.be.false;
+      expect(state.slot).to.equal('<initial>');
+    });
+
+    it('should not invoke the onChange callback with initial state after the first update', async () => {
+      instance.requestUpdate();
+      await elementUpdated(instance);
+
+      expect(instance.slotsCallbackResults).lengthOf(1);
+    });
+
+    it('should return the correct callback parameters for default slot changes', async () => {
+      instance.append(document.createElement('span'));
+      await elementUpdated(instance);
+
+      const state = last(instance.slotsCallbackResults);
+      expect(state.isDefault).to.be.true;
+      expect(state.isInitial).to.be.false;
+      expect(state.slot).to.be.empty;
+    });
+
+    it('should return the correct callback parameters for named slots', async () => {
+      const element = document.createElement('span');
+      element.slot = 'start';
+      instance.append(element);
+
+      await elementUpdated(instance);
+
+      const state = last(instance.slotsCallbackResults);
+      expect(state.isDefault).to.be.false;
+      expect(state.isInitial).to.be.false;
+      expect(state.slot).to.equal('start');
+    });
+
+    it('should correctly handle multiple slot change events', async () => {
+      const startElement = document.createElement('span');
+      startElement.slot = 'start';
+
+      instance.append(
+        document.createElement('span'),
+        startElement,
+        document.createElement('div')
+      );
+      await elementUpdated(instance);
+
+      expect(slots.getAssignedElements('start')).lengthOf(1);
+      expect(slots.getAssignedElements('[default]')).lengthOf(2);
+      expect(instance.slotsCallbackResults).lengthOf(3);
+
+      const [_, defaultSlot, startSlot] = instance.slotsCallbackResults;
+
+      expect(defaultSlot.isDefault).to.be.true;
+      expect(defaultSlot.slot).to.be.empty;
+
+      expect(startSlot.isDefault).to.be.false;
+      expect(startSlot.slot).to.equal('start');
+    });
+  });
+});
diff --git a/src/components/common/controllers/slot.ts b/src/components/common/controllers/slot.ts
new file mode 100644
index 000000000..0f20cde05
--- /dev/null
+++ b/src/components/common/controllers/slot.ts
@@ -0,0 +1,196 @@
+import type {
+  LitElement,
+  ReactiveController,
+  ReactiveControllerHost,
+} from 'lit';
+import { isEmpty } from '../util.js';
+
+type InferSlotNames<T> = T extends readonly (infer U)[] ? U : never;
+
+/**
+ * Additional query options for the slot controller methods.
+ */
+type SlotQueryOptions = {
+  /**
+   * If set to `true`, it returns a sequence of both the elements assigned to the queried slot,
+   * as well as elements assigned to any other slots that are descendants of this slot. If no
+   * assigned elements are found, it returns the slot's fallback content.
+   *
+   * Defaults to `false`.
+   */
+  flatten?: boolean;
+  /**
+   * CSS selector used to filter the elements returned.
+   */
+  selector?: string;
+};
+
+type SlotChangeCallback<T> = (
+  parameters: SlotChangeCallbackParameters<T>
+) => void;
+
+type SlotChangeCallbackParameters<T> = {
+  /** The slot name that has its assigned nodes changed. */
+  slot: T;
+  /** `true` if the slot is the default slot. */
+  isDefault: boolean;
+  /** `true` if the callback handler is called for the initial host update. */
+  isInitial: boolean;
+};
+
+type SlotControllerOptions<T> = {
+  /** An iterable collection of slot names to observe. */
+  slots?: Iterable<T>;
+  /** Callback function which is invoked a slot's assigned nodes change. */
+  onChange?: SlotChangeCallback<T>;
+  /** If set to `true`, the `onChange` callback is invoked once after the host is updated for the first time. */
+  initial?: boolean;
+};
+
+const DefaultSlot = '[default]';
+
+class SlotController<T> implements ReactiveController {
+  private readonly _host: ReactiveControllerHost & LitElement;
+  private readonly _options: SlotControllerOptions<T>;
+  private readonly _slots?: Set<T>;
+  private _initialized = false;
+
+  constructor(
+    host: ReactiveControllerHost & LitElement,
+    options?: SlotControllerOptions<T>
+  ) {
+    this._host = host;
+    this._host.addController(this);
+
+    this._options = { ...options };
+    this._slots = options?.slots ? new Set(options.slots) : undefined;
+  }
+
+  private _getSlot(slotName?: T): HTMLSlotElement | null {
+    if (slotName === DefaultSlot) {
+      return this._host.renderRoot.querySelector<HTMLSlotElement>(
+        'slot:not([name])'
+      );
+    }
+
+    return this._host.renderRoot.querySelector<HTMLSlotElement>(
+      `slot[name=${slotName}]`
+    );
+  }
+
+  /**
+   * Returns an array of the assigned nodes for `slot`.
+   *
+   * If `flatten` is set to `true`, it returns a sequence of both the nodes assigned to the queried slot,
+   * as well as nodes assigned to any other slots that are descendants of this slot. If no
+   * assigned nodes are found, it returns the slot's fallback content.
+   */
+  public getAssignedNodes(slot: T, flatten = false): Node[] {
+    return this._getSlot(slot)?.assignedNodes({ flatten }) ?? [];
+  }
+
+  /**
+   * Returns an array of the assigned elements for `slot` with additional `options`.
+   *
+   * See {@link SlotQueryOptions.flatten} and {@link SlotQueryOptions.selector} for more information.
+   */
+  public getAssignedElements<U extends Element>(
+    slot: T,
+    options?: SlotQueryOptions
+  ): U[] {
+    const elements =
+      (this._getSlot(slot)?.assignedElements({
+        flatten: options?.flatten,
+      }) as U[]) ?? [];
+
+    return options?.selector
+      ? elements.filter((e) => e.matches(options.selector!))
+      : elements;
+  }
+
+  /**
+   * Return whether `slot` has assigned nodes.
+   *
+   * If `flatten` is set to `true`, it returns a sequence of both the nodes assigned to the queried slot,
+   * as well as nodes assigned to any other slots that are descendants of this slot. If no
+   * assigned nodes are found, it returns the slot's fallback content.
+   */
+  public hasAssignedNodes(slot: T, flatten = false): boolean {
+    return !isEmpty(this.getAssignedNodes(slot, flatten));
+  }
+
+  /**
+   * Return whether `slot` has assigned elements accepting additional `options`.
+   *
+   * See {@link SlotQueryOptions.flatten} and {@link SlotQueryOptions.selector} for more information.
+   */
+  public hasAssignedElements(slot: T, options?: SlotQueryOptions): boolean {
+    return !isEmpty(this.getAssignedElements(slot, options));
+  }
+
+  /** @internal */
+  public handleEvent(event: Event): void {
+    const slot = event.target as HTMLSlotElement;
+    const name = slot.name as T;
+    const isDefault = name === '';
+
+    if (
+      !this._slots ||
+      this._slots.has(isDefault ? (DefaultSlot as T) : (slot.name as T))
+    ) {
+      this._options.onChange?.call(this._host, {
+        slot: name,
+        isDefault,
+        isInitial: false,
+      });
+      this._host.requestUpdate();
+    }
+  }
+
+  /** @internal */
+  public hostConnected(): void {
+    this._host.renderRoot.addEventListener('slotchange', this);
+  }
+
+  /** @internal */
+  public hostDisconnected(): void {
+    this._host.renderRoot.removeEventListener('slotchange', this);
+  }
+
+  /** @internal */
+  public hostUpdated(): void {
+    if (!this._initialized && this._options.initial) {
+      this._initialized = true;
+      this._options.onChange?.call(this._host, {
+        slot: '<initial>' as T,
+        isDefault: false,
+        isInitial: true,
+      });
+    }
+  }
+}
+
+function addSlotController<K extends readonly string[]>(
+  host: ReactiveControllerHost,
+  options?: SlotControllerOptions<InferSlotNames<K>> & {
+    slots?: K;
+  }
+): SlotController<InferSlotNames<K>> {
+  return new SlotController(host as ReactiveControllerHost & LitElement, {
+    ...options,
+    slots: options?.slots as Iterable<InferSlotNames<K>>,
+  });
+}
+
+function setSlots<const T extends readonly string[]>(...slots: T) {
+  return [DefaultSlot, ...slots] as const;
+}
+
+export { addSlotController, DefaultSlot, setSlots };
+export type {
+  SlotController,
+  SlotQueryOptions,
+  SlotChangeCallback,
+  SlotChangeCallbackParameters,
+  SlotControllerOptions,
+};

From 020ce669eed3d026c656dffdcd6c4e098953002b Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Fri, 27 Jun 2025 18:33:13 +0300
Subject: [PATCH 02/19] refactor(chip): Use SlotController and ARIA fixes

---
 src/components/chip/chip.ts | 144 ++++++++++++++++++------------------
 1 file changed, 74 insertions(+), 70 deletions(-)

diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
index 5f4ba4113..a393714eb 100644
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -1,13 +1,12 @@
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeybindings } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import type { StyleVariant } from '../types.js';
 import { styles } from './themes/chip.base.css.js';
@@ -42,11 +41,15 @@ export default class IgcChipComponent extends EventEmitterMixin<
   public static styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcChipComponent, IgcIconComponent);
   }
 
-  private _removePartRef: Ref<HTMLSlotElement> = createRef();
+  private readonly _removePartRef = createRef<HTMLSlotElement>();
+
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('prefix', 'suffix', 'start', 'end', 'select', 'remove'),
+  });
 
   /**
    * Sets the disabled state for the chip.
@@ -84,18 +87,6 @@ export default class IgcChipComponent extends EventEmitterMixin<
   @property({ reflect: true })
   public variant!: StyleVariant;
 
-  @queryAssignedElements({ slot: 'prefix' })
-  protected prefixes!: Array<HTMLElement>;
-
-  @queryAssignedElements({ slot: 'start' })
-  protected contentStart!: Array<HTMLElement>;
-
-  @queryAssignedElements({ slot: 'suffix' })
-  protected suffixes!: Array<HTMLElement>;
-
-  @queryAssignedElements({ slot: 'end' })
-  protected contentEnd!: Array<HTMLElement>;
-
   constructor() {
     super();
 
@@ -104,75 +95,88 @@ export default class IgcChipComponent extends EventEmitterMixin<
     addKeybindings(this, {
       ref: this._removePartRef,
       bindingDefaults: { triggers: ['keyup'] },
-    }).setActivateHandler(this.handleRemove);
+    }).setActivateHandler(this._handleRemove);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
-  protected handleSelect() {
+  protected _handleSelect(): void {
     if (this.selectable) {
       this.selected = !this.selected;
       this.emitEvent('igcSelect', { detail: this.selected });
     }
   }
 
-  protected handleRemove(e: Event) {
+  protected _handleRemove(event: Event): void {
+    event.stopPropagation();
     this.emitEvent('igcRemove');
-    e.stopPropagation();
+  }
+
+  protected _renderPrefix() {
+    const isVisible =
+      this._slots.hasAssignedElements('prefix') ||
+      this._slots.hasAssignedElements('start');
+
+    const selectSlot =
+      this.selectable && this.selected
+        ? html`
+            <slot name="select">
+              <igc-icon name="selected" collection="default"></igc-icon>
+            </slot>
+          `
+        : nothing;
+
+    return html`
+      <span part="prefix" ?hidden=${!isVisible && !this.selected}>
+        ${selectSlot}
+        <slot name="start"></slot>
+        <slot name="prefix"></slot>
+      </span>
+    `;
+  }
+
+  protected _renderSuffix() {
+    const isVisible =
+      this._slots.hasAssignedElements('suffix') ||
+      this._slots.hasAssignedElements('end');
+
+    const removeSlot =
+      this.removable && !this.disabled
+        ? html`
+            <slot
+              ${ref(this._removePartRef)}
+              name="remove"
+              @click=${this._handleRemove}
+            >
+              <igc-icon
+                name="remove"
+                collection="default"
+                tabindex="0"
+                role="button"
+                aria-label="Remove"
+              ></igc-icon>
+            </slot>
+          `
+        : nothing;
+
+    return html`
+      <span part="suffix" ?hidden=${!isVisible && !this.removable}>
+        <slot name="end"></slot>
+        <slot name="suffix"></slot>
+        ${removeSlot}
+      </span>
+    `;
   }
 
   protected override render() {
     return html`
       <button
         part="base"
-        .disabled=${this.disabled}
-        aria-selected=${this.selected}
-        aria-disabled=${this.disabled}
-        @click=${this.handleSelect}
+        .ariaPressed=${this.selectable ? this.selected.toString() : null}
+        ?disabled=${this.disabled}
+        @click=${this._handleSelect}
       >
-        <span
-          part="prefix"
-          .hidden=${isEmpty(this.prefixes) &&
-          isEmpty(this.contentStart) &&
-          !this.selected}
-        >
-          ${this.selectable && this.selected
-            ? html`<slot name="select">
-                <igc-icon name="selected" collection="default"></igc-icon>
-              </slot>`
-            : nothing}
-          <slot name="start"></slot>
-          <slot name="prefix"></slot>
-        </span>
+        ${this._renderPrefix()}
         <slot></slot>
-        <span
-          part="suffix"
-          .hidden=${isEmpty(this.suffixes) &&
-          isEmpty(this.contentEnd) &&
-          !this.removable}
-        >
-          <slot name="end"></slot>
-          <slot name="suffix"></slot>
-          ${this.removable && !this.disabled
-            ? html`<slot
-                ${ref(this._removePartRef)}
-                @click=${this.handleRemove}
-                name="remove"
-              >
-                <igc-icon
-                  name="remove"
-                  collection="default"
-                  tabindex="0"
-                  role="button"
-                  aria-label="remove"
-                ></igc-icon>
-              </slot>`
-            : nothing}
-        </span>
+        ${this._renderSuffix()}
       </button>
     `;
   }

From caedbd47c5c0da772939cb52db48fa157d85af77 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Fri, 27 Jun 2025 18:56:00 +0300
Subject: [PATCH 03/19] docs(chip): Added missing slots JSDoc documentation

---
 src/components/chip/chip.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
index a393714eb..6cff4fbb8 100644
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -17,14 +17,17 @@ export interface IgcChipComponentEventMap {
   igcRemove: CustomEvent<boolean>;
   igcSelect: CustomEvent<boolean>;
 }
+
 /**
  * Chips help people enter information, make selections, filter content, or trigger actions.
  *
  * @element igc-chip
  *
- * @slot - Renders the chip data.
- * @slot prefix - Renders content before the data of the chip.
- * @slot suffix - Renders content after the data of the chip.
+ * @slot - Renders content in the default slot of the chip.
+ * @slot prefix - Renders content at the start of the chip, before the default content.
+ * @slot suffix - Renders content at the end of the chip after the default content.
+ * @slot select - Content to render when the chip in selected state.
+ * @slot remove - Content to override the default remove chip icon.
  *
  * @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.
  * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.
@@ -167,10 +170,12 @@ export default class IgcChipComponent extends EventEmitterMixin<
   }
 
   protected override render() {
+    const ariaPressed = this.selectable ? this.selected.toString() : null;
+
     return html`
       <button
         part="base"
-        .ariaPressed=${this.selectable ? this.selected.toString() : null}
+        .ariaPressed=${ariaPressed}
         ?disabled=${this.disabled}
         @click=${this._handleSelect}
       >

From e0822cea8245d3553ef8c0fef4f26db578c7becd Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Fri, 27 Jun 2025 20:22:45 +0300
Subject: [PATCH 04/19] refactor(checkbox): Migrated to SlotController

Removed redundant ARIA attributes and DOM tests.
---
 src/components/checkbox/checkbox-base.ts | 27 +++----
 src/components/checkbox/checkbox.spec.ts | 93 ------------------------
 src/components/checkbox/checkbox.ts      | 34 ++++-----
 3 files changed, 27 insertions(+), 127 deletions(-)

diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
index d8dcfd295..17c561648 100644
--- a/src/components/checkbox/checkbox-base.ts
+++ b/src/components/checkbox/checkbox-base.ts
@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
-import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';
-
+import { property, query, state } from 'lit/decorators.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -11,7 +11,6 @@ import {
   defaultBooleanTransformers,
   type FormValueOf,
 } from '../common/mixins/forms/form-value.js';
-import { isEmpty } from '../common/util.js';
 import type { ToggleLabelPosition } from '../types.js';
 import { checkBoxValidators } from './validators.js';
 
@@ -39,6 +38,14 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
     return checkBoxValidators;
   }
 
+  protected readonly _slots = addSlotController(this, {
+    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
+    onChange: () => {
+      this._hideLabel = !this._slots.hasAssignedNodes('[default]');
+    },
+    initial: true,
+  });
+
   protected readonly _focusRingManager = addKeyboardFocusRing(this);
   protected override readonly _formValue: FormValueOf<boolean> =
     createFormValueState(this, {
@@ -50,9 +57,6 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   @query('input', true)
   protected readonly _input!: HTMLInputElement;
 
-  @queryAssignedNodes({ flatten: true })
-  protected readonly _label!: Array<Node>;
-
   @state()
   protected _hideLabel = false;
 
@@ -94,17 +98,6 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   @property({ reflect: true, attribute: 'label-position' })
   public labelPosition: ToggleLabelPosition = 'after';
 
-  protected override createRenderRoot(): HTMLElement | DocumentFragment {
-    const root = super.createRenderRoot();
-    this._hideLabel = isEmpty(this._label);
-
-    root.addEventListener('slotchange', () => {
-      this._hideLabel = isEmpty(this._label);
-    });
-
-    return root;
-  }
-
   /** Simulates a click on the control. */
   public override click(): void {
     this._input.click();
diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts
index b2e7506dd..596bbcf2c 100644
--- a/src/components/checkbox/checkbox.spec.ts
+++ b/src/components/checkbox/checkbox.spec.ts
@@ -127,99 +127,6 @@ describe('Checkbox', () => {
       expect(element.reportValidity()).to.equals(true);
     });
 
-    it('should set the checkbox checked property correctly', async () => {
-      const DIFF_OPTIONS = {
-        ignoreAttributes: [
-          'id',
-          'part',
-          'aria-disabled',
-          'aria-labelledby',
-          'tabindex',
-          'type',
-        ],
-      };
-
-      element.checked = true;
-      expect(element.checked).to.be.true;
-      await elementUpdated(element);
-      expect(input).dom.to.equal(`<input aria-checked="true" />`, DIFF_OPTIONS);
-
-      element.checked = false;
-      expect(element.checked).to.be.false;
-      await elementUpdated(element);
-
-      expect(input).dom.to.equal(
-        `<input aria-checked="false" />`,
-        DIFF_OPTIONS
-      );
-    });
-
-    it('should set the checkbox indeterminate property correctly', async () => {
-      const DIFF_OPTIONS = {
-        ignoreAttributes: [
-          'id',
-          'part',
-          'aria-disabled',
-          'aria-labelledby',
-          'tabindex',
-          'type',
-        ],
-      };
-
-      element.indeterminate = true;
-      expect(element.indeterminate).to.be.true;
-      await elementUpdated(element);
-      expect(input).dom.to.equal(
-        `<input aria-checked="mixed" />`,
-        DIFF_OPTIONS
-      );
-
-      element.indeterminate = false;
-      expect(element.indeterminate).to.be.false;
-      await elementUpdated(element);
-      expect(input).dom.to.equal(
-        `<input aria-checked="false" />`,
-        DIFF_OPTIONS
-      );
-
-      element.indeterminate = true;
-      expect(element.indeterminate).to.be.true;
-      element.checked = true;
-      expect(element.checked).to.be.true;
-      await elementUpdated(element);
-      expect(input).dom.to.equal(`<input aria-checked="true" />`, DIFF_OPTIONS);
-    });
-
-    it('should set the checkbox disabled property correctly', async () => {
-      const DIFF_OPTIONS = {
-        ignoreAttributes: [
-          'id',
-          'part',
-          'aria-checked',
-          'aria-labelledby',
-          'tabindex',
-          'type',
-        ],
-      };
-
-      element.disabled = true;
-      expect(element.disabled).to.be.true;
-      await elementUpdated(element);
-      expect(input).dom.to.equal(
-        `<input disabled aria-disabled="true" />`,
-        DIFF_OPTIONS
-      );
-
-      element.disabled = false;
-      expect(element.disabled).to.be.false;
-      await elementUpdated(element);
-
-      expect(input).dom.to.equal(
-        `<input aria-disabled="false" />`,
-        DIFF_OPTIONS
-      );
-    });
-
     it('should have correct focus states between Light/Shadow DOM', () => {
       element.focus();
       expect(isFocused(element)).to.be.true;
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 0d58441a4..03d010753 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -1,18 +1,18 @@
-import { html, type TemplateResult } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter } from '../common/util.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcCheckboxBaseComponent } from './checkbox-base.js';
 import { styles } from './themes/checkbox.base.css.js';
 import { all } from './themes/checkbox-themes.js';
 import { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';
 
+let nextId = 1;
+
 /**
  * A check box allowing single values to be selected/deselected.
  *
@@ -40,11 +40,9 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     registerComponent(IgcCheckboxComponent, IgcValidationContainerComponent);
   }
 
-  private static readonly increment = createCounter();
-
   private readonly _themes = addThemingController(this, all);
 
-  private readonly _inputId = `checkbox-${IgcCheckboxComponent.increment()}`;
+  private readonly _inputId = `checkbox-${nextId++}`;
   private readonly _labelId = `checkbox-label-${this._inputId}`;
 
   /**
@@ -59,11 +57,11 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     super._handleClick(event);
   }
 
-  protected renderValidatorContainer(): TemplateResult {
+  protected _renderValidatorContainer(): TemplateResult {
     return IgcValidationContainerComponent.create(this);
   }
 
-  protected renderStandard() {
+  protected _renderStandard() {
     return html`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path d="M4.1,12.7 9,17.6 20.3,6.3" />
@@ -71,7 +69,7 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     `;
   }
 
-  protected renderIndigo() {
+  protected _renderIndigo() {
     return html`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <rect width="18" height="4" x="3" y="10" rx="1.85" />
@@ -84,6 +82,9 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
 
   protected override render() {
     const labelledBy = this.getAttribute('aria-labelledby');
+    const describedBy = this._slots.hasAssignedElements('helper-text')
+      ? 'helper-text'
+      : nothing;
     const checked = this.checked;
 
     return html`
@@ -100,31 +101,30 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           type="checkbox"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
-          .required=${this.required}
-          .disabled=${this.disabled}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
           .checked=${live(checked)}
           .indeterminate=${live(this.indeterminate)}
-          aria-checked=${this.indeterminate && !checked ? 'mixed' : checked}
-          aria-disabled=${this.disabled ? 'true' : 'false'}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
+          aria-describedby=${describedBy}
           @click=${this._handleClick}
           @focus=${this._handleFocus}
         />
         <span part=${partMap({ control: true, checked })}>
           <span part=${partMap({ indicator: true, checked })}>
             ${this._themes.theme === 'indigo'
-              ? this.renderIndigo()
-              : this.renderStandard()}
+              ? this._renderIndigo()
+              : this._renderStandard()}
           </span>
         </span>
         <span
-          .hidden=${this._hideLabel}
+          ?hidden=${this._hideLabel}
           part=${partMap({ label: true, checked })}
           id=${this._labelId}
           ><slot></slot>
         </span>
       </label>
-      ${this.renderValidatorContainer()}
+      ${this._renderValidatorContainer()}
     `;
   }
 }

From 36b06069f843c94b4eb0cb635bc7ee34aecc6688 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Fri, 27 Jun 2025 20:24:04 +0300
Subject: [PATCH 05/19] refactor(switch): Migrated to SlotController

Removed redundant ARIA attributes and DOM tests.
---
 src/components/checkbox/switch.spec.ts | 57 --------------------------
 src/components/checkbox/switch.ts      | 18 ++++----
 2 files changed, 7 insertions(+), 68 deletions(-)

diff --git a/src/components/checkbox/switch.spec.ts b/src/components/checkbox/switch.spec.ts
index 75ca0e6dd..23b1bf84a 100644
--- a/src/components/checkbox/switch.spec.ts
+++ b/src/components/checkbox/switch.spec.ts
@@ -121,63 +121,6 @@ describe('Switch', () => {
       expect(el.reportValidity()).to.equals(true);
     });
 
-    it('should set the switch checked property correctly', async () => {
-      const DIFF_OPTIONS = {
-        ignoreAttributes: [
-          'id',
-          'part',
-          'aria-disabled',
-          'aria-labelledby',
-          'tabindex',
-          'type',
-        ],
-      };
-
-      el.checked = true;
-      expect(el.checked).to.be.true;
-      await elementUpdated(el);
-      expect(input).dom.to.equal(`<input aria-checked="true" />`, DIFF_OPTIONS);
-
-      el.checked = false;
-      expect(el.checked).to.be.false;
-      await elementUpdated(el);
-
-      expect(input).dom.to.equal(
-        `<input aria-checked="false" />`,
-        DIFF_OPTIONS
-      );
-    });
-
-    it('should set the switch disabled property correctly', async () => {
-      const DIFF_OPTIONS = {
-        ignoreAttributes: [
-          'id',
-          'part',
-          'aria-checked',
-          'aria-labelledby',
-          'tabindex',
-          'type',
-        ],
-      };
-
-      el.disabled = true;
-      expect(el.disabled).to.be.true;
-      await elementUpdated(el);
-      expect(input).dom.to.equal(
-        `<input disabled aria-disabled="true" />`,
-        DIFF_OPTIONS
-      );
-
-      el.disabled = false;
-      expect(el.disabled).to.be.false;
-      await elementUpdated(el);
-
-      expect(input).dom.to.equal(
-        `<input aria-disabled="false" />`,
-        DIFF_OPTIONS
-      );
-    });
-
     it('should have correct focus states between Light/Shadow DOM', () => {
       el.focus();
       expect(isFocused(el)).to.be.true;
diff --git a/src/components/checkbox/switch.ts b/src/components/checkbox/switch.ts
index e05f7ed9c..e9089473f 100644
--- a/src/components/checkbox/switch.ts
+++ b/src/components/checkbox/switch.ts
@@ -1,16 +1,16 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter } from '../common/util.js';
 import { IgcCheckboxBaseComponent } from './checkbox-base.js';
 import { styles as shared } from './themes/shared/switch/switch.common.css.js';
 import { styles } from './themes/switch.base.css.js';
 import { all } from './themes/switch-themes.js';
 
+let nextId = 1;
+
 /**
  * Similar to a checkbox, a switch controls the state of a single setting on or off.
  *
@@ -34,9 +34,7 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
     registerComponent(IgcSwitchComponent);
   }
 
-  private static readonly increment = createCounter();
-
-  private readonly _inputId = `switch-${IgcSwitchComponent.increment()}`;
+  private readonly _inputId = `switch-${nextId++}`;
   private readonly _labelId = `switch-label-${this._inputId}`;
 
   constructor() {
@@ -55,11 +53,9 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
           type="checkbox"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
-          .required=${this.required}
-          .disabled=${this.disabled}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
           .checked=${live(checked)}
-          aria-checked=${checked ? 'true' : 'false'}
-          aria-disabled=${this.disabled ? 'true' : 'false'}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
           @click=${this._handleClick}
           @focus=${this._handleFocus}
@@ -74,9 +70,9 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
           <span part=${partMap({ thumb: true, checked })}></span>
         </span>
         <span
-          .hidden=${this._hideLabel}
-          part=${partMap({ label: true, checked })}
           id=${this._labelId}
+          part=${partMap({ label: true, checked })}
+          ?hidden=${this._hideLabel}
         >
           <slot></slot>
         </span>

From 4fff6726e6c363cc16b6cbd04adcf1c1ae6fde37 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 30 Jun 2025 12:21:56 +0300
Subject: [PATCH 06/19] refactor(checkbox,switch): Final batch of code
 clean-ups

---
 src/components/checkbox/checkbox-base.ts |   2 +-
 src/components/checkbox/checkbox.spec.ts | 153 ++++++++++++++---------
 src/components/checkbox/checkbox.ts      |   4 +-
 src/components/checkbox/switch.spec.ts   | 143 +++++++++++----------
 4 files changed, 172 insertions(+), 130 deletions(-)

diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
index 17c561648..0c3321259 100644
--- a/src/components/checkbox/checkbox-base.ts
+++ b/src/components/checkbox/checkbox-base.ts
@@ -68,7 +68,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   public set value(value: string) {
     this._value = value;
     if (this.checked) {
-      this._setFormValue(this._value || 'on');
+      this._setFormValue(this._value);
     }
   }
 
diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts
index 596bbcf2c..c554583ca 100644
--- a/src/components/checkbox/checkbox.spec.ts
+++ b/src/components/checkbox/checkbox.spec.ts
@@ -1,11 +1,6 @@
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  unsafeStatic,
-} from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { spy } from 'sinon';
+import { configureTheme } from '../../theming/config.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   createFormAssociatedTestBed,
@@ -38,49 +33,82 @@ describe('Checkbox', () => {
 
   describe('', () => {
     beforeEach(async () => {
-      element = await createCheckboxComponent();
-      input = element.renderRoot.querySelector('input') as HTMLInputElement;
+      element = await fixture(html`<igc-checkbox>${label}</igc-checkbox>`);
+      input = element.renderRoot.querySelector('input')!;
     });
 
     it('should initialize checkbox component with default values', async () => {
       expect(input.id).to.equal('checkbox-1');
       expect(element.name).to.be.undefined;
-      expect(input.name).to.equal('');
+      expect(input.name).to.be.empty;
       expect(element.value).to.be.undefined;
       expect(input.value).to.equal('on');
-      expect(element.checked).to.equal(false);
-      expect(input.checked).to.equal(false);
-      expect(element.indeterminate).to.equal(false);
-      expect(input.indeterminate).to.equal(false);
-      expect(element.invalid).to.equal(false);
-      expect(element.disabled).to.equal(false);
-      expect(input.disabled).to.equal(false);
+      expect(element.checked).to.be.false;
+      expect(input.checked).to.be.false;
+      expect(element.indeterminate).to.be.false;
+      expect(input.indeterminate).to.be.false;
+      expect(element.invalid).to.be.false;
+      expect(element.disabled).to.be.false;
+      expect(input.disabled).to.be.false;
       expect(element.labelPosition).to.equal('after');
     });
 
     it('should render a checkbox component successfully', async () => {
       await expect(element).shadowDom.to.be.accessible();
+      await expect(element).to.be.accessible();
+    });
+
+    it('should render the correct SVG in indigo theme', async () => {
+      /**
+       * In Indigo theme the svg structure goes like this:
+       *
+       * <svg>
+       *  <rect></rect>
+       *  <path></path>
+       * </svg>
+       *
+       * while in the other themes it is:
+       *
+       * <svg>
+       *  <path></path>
+       * </svg>
+       */
+
+      const root = element.renderRoot;
+
+      // Bootstrap, Fluent, Material
+      expect(root.querySelector('svg > rect')).to.be.null;
+
+      configureTheme('indigo');
+      await elementUpdated(element);
+
+      // Indigo
+      expect(root.querySelector('svg > rect')).to.be.not.null;
+
+      // Reset back to Bootstrap
+      configureTheme('bootstrap');
     });
 
     it('should set the checkbox name property correctly', async () => {
       const name = 'fruit';
 
       element.name = name;
-      expect(element.name).to.equal(name);
-
       await elementUpdated(element);
+
       expect(input).dom.to.equal(`<input name="${name}"/>`, DIFF_OPTIONS);
     });
 
     it('should set the checkbox label position correctly', async () => {
       element.labelPosition = 'before';
       await elementUpdated(element);
+
       expect(element).dom.to.equal(
         `<igc-checkbox label-position="before">${label}</igc-checkbox>`
       );
 
       element.labelPosition = 'after';
       await elementUpdated(element);
+
       expect(element).dom.to.equal(
         `<igc-checkbox label-position="after">${label}</igc-checkbox>`
       );
@@ -90,41 +118,56 @@ describe('Checkbox', () => {
       const value = 'apple';
 
       element.value = value;
-      expect(element.value).to.equal(value);
-
       await elementUpdated(element);
+
       expect(input).dom.to.equal(`<input value="${value}"/>`, DIFF_OPTIONS);
     });
 
-    it('should set the checkbox invalid property correctly', async () => {
+    it('should set the checkbox invalid property correctly', () => {
       element.invalid = true;
-      await elementUpdated(element);
       expect(element).dom.to.equal(
         `<igc-checkbox invalid label-position="after">${label}</igc-checkbox>`
       );
 
       element.invalid = false;
-      await elementUpdated(element);
       expect(element).dom.to.equal(
         `<igc-checkbox label-position="after">${label}</igc-checkbox>`
       );
     });
 
-    it('should correctly report validity status', async () => {
-      element = await fixture<IgcCheckboxComponent>(
-        html`<igc-checkbox required></igc-checkbox>`
-      );
-      expect(element.reportValidity()).to.equals(false);
+    it('should correctly report validity status', () => {
+      element.required = true;
+      expect(element.reportValidity()).to.be.false;
 
-      element = await fixture<IgcCheckboxComponent>(
-        html`<igc-checkbox required checked></igc-checkbox>`
-      );
-      expect(element.reportValidity()).to.equals(true);
+      element.checked = true;
+      expect(element.reportValidity()).to.be.true;
 
-      element = await fixture<IgcCheckboxComponent>(
-        html`<igc-checkbox></igc-checkbox>`
-      );
-      expect(element.reportValidity()).to.equals(true);
+      element.checked = false;
+      element.required = false;
+      expect(element.reportValidity()).to.be.true;
+    });
+
+    it('should set the checkbox disabled property correctly', async () => {
+      const DIFF_OPTIONS = {
+        ignoreAttributes: [
+          'id',
+          'part',
+          'aria-checked',
+          'aria-labelledby',
+          'tabindex',
+          'type',
+        ],
+      };
+
+      element.disabled = true;
+      await elementUpdated(element);
+
+      expect(input).dom.to.equal('<input disabled />', DIFF_OPTIONS);
+
+      element.disabled = false;
+      await elementUpdated(element);
+
+      expect(input).dom.to.equal('<input />', DIFF_OPTIONS);
     });
 
     it('should have correct focus states between Light/Shadow DOM', () => {
@@ -156,20 +199,14 @@ describe('Checkbox', () => {
         detail: { checked: true, value: undefined },
       });
     });
-
-    const createCheckboxComponent = (
-      template = `<igc-checkbox>${label}</igc-checkbox>`
-    ) => {
-      return fixture<IgcCheckboxComponent>(html`${unsafeStatic(template)}`);
-    };
   });
 
   describe('Form integration', () => {
-    const spec = createFormAssociatedTestBed<IgcCheckboxComponent>(
-      html`<igc-checkbox name="checkbox"
-        >I have reviewed ToC and I agree</igc-checkbox
-      >`
-    );
+    const spec = createFormAssociatedTestBed<IgcCheckboxComponent>(html`
+      <igc-checkbox name="checkbox">
+        I have reviewed ToC and I agree
+      </igc-checkbox>
+    `);
 
     beforeEach(async () => {
       await spec.setup(IgcCheckboxComponent.tagName);
@@ -256,11 +293,11 @@ describe('Checkbox', () => {
   });
 
   describe('Synchronous validation', () => {
-    const spec = createFormAssociatedTestBed<IgcCheckboxComponent>(
-      html`<igc-checkbox required name="checkbox"
-        >I have reviewed ToC and I agree</igc-checkbox
-      >`
-    );
+    const spec = createFormAssociatedTestBed<IgcCheckboxComponent>(html`
+      <igc-checkbox required name="checkbox">
+        I have reviewed ToC and I agree
+      </igc-checkbox>
+    `);
 
     beforeEach(async () => {
       await spec.setup(IgcCheckboxComponent.tagName);
@@ -279,13 +316,9 @@ describe('Checkbox', () => {
   });
 
   describe('Initial checked state is submitted', () => {
-    const spec = createFormAssociatedTestBed<IgcCheckboxComponent>(
-      html`<igc-checkbox
-        name="checkbox"
-        value="checked"
-        checked
-      ></igc-checkbox>`
-    );
+    const spec = createFormAssociatedTestBed<IgcCheckboxComponent>(html`
+      <igc-checkbox name="checkbox" value="checked" checked></igc-checkbox>
+    `);
 
     beforeEach(async () => await spec.setup(IgcCheckboxComponent.tagName));
 
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 03d010753..9ba487862 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -118,9 +118,9 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           </span>
         </span>
         <span
-          ?hidden=${this._hideLabel}
-          part=${partMap({ label: true, checked })}
           id=${this._labelId}
+          part=${partMap({ label: true, checked })}
+          ?hidden=${this._hideLabel}
           ><slot></slot>
         </span>
       </label>
diff --git a/src/components/checkbox/switch.spec.ts b/src/components/checkbox/switch.spec.ts
index 23b1bf84a..c86a3837f 100644
--- a/src/components/checkbox/switch.spec.ts
+++ b/src/components/checkbox/switch.spec.ts
@@ -1,10 +1,4 @@
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  unsafeStatic,
-} from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { spy } from 'sinon';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
@@ -19,7 +13,7 @@ describe('Switch', () => {
   });
 
   const label = 'Label';
-  let el: IgcSwitchComponent;
+  let element: IgcSwitchComponent;
   let input: HTMLInputElement;
 
   const DIFF_OPTIONS = {
@@ -36,48 +30,50 @@ describe('Switch', () => {
 
   describe('', () => {
     beforeEach(async () => {
-      el = await createSwitchComponent();
-      input = el.renderRoot.querySelector('input') as HTMLInputElement;
+      element = await fixture(html`<igc-switch>${label}</igc-switch>`);
+      input = element.renderRoot.querySelector('input') as HTMLInputElement;
     });
 
     it('should initialize switch component with default values', async () => {
       expect(input.id).to.equal('switch-1');
-      expect(el.name).to.be.undefined;
-      expect(input.name).to.equal('');
-      expect(el.value).to.be.undefined;
+      expect(element.name).to.be.undefined;
+      expect(input.name).to.be.empty;
+      expect(element.value).to.be.undefined;
       expect(input.value).to.equal('on');
-      expect(el.checked).to.equal(false);
-      expect(input.checked).to.equal(false);
-      expect(el.invalid).to.equal(false);
-      expect(el.disabled).to.equal(false);
-      expect(input.disabled).to.equal(false);
-      expect(el.labelPosition).to.equal('after');
+      expect(element.checked).to.be.false;
+      expect(input.checked).to.be.false;
+      expect(element.invalid).to.be.false;
+      expect(element.disabled).to.be.false;
+      expect(input.disabled).to.be.false;
+      expect(element.labelPosition).to.equal('after');
     });
 
     it('should render a switch component successfully', async () => {
-      await expect(el).shadowDom.to.be.accessible();
+      await expect(element).shadowDom.to.be.accessible();
+      await expect(element).to.be.accessible();
     });
 
     it('should set the switch name property correctly', async () => {
       const name = 'fruit';
 
-      el.name = name;
-      expect(el.name).to.equal(name);
+      element.name = name;
+      await elementUpdated(element);
 
-      await elementUpdated(el);
       expect(input).dom.to.equal(`<input name="${name}"/>`, DIFF_OPTIONS);
     });
 
     it('should set the switch label position correctly', async () => {
-      el.labelPosition = 'before';
-      await elementUpdated(el);
-      expect(el).dom.to.equal(
+      element.labelPosition = 'before';
+      await elementUpdated(element);
+
+      expect(element).dom.to.equal(
         `<igc-switch label-position="before">${label}</igc-switch>`
       );
 
-      el.labelPosition = 'after';
-      await elementUpdated(el);
-      expect(el).dom.to.equal(
+      element.labelPosition = 'after';
+      await elementUpdated(element);
+
+      expect(element).dom.to.equal(
         `<igc-switch label-position="after">${label}</igc-switch>`
       );
     });
@@ -85,75 +81,88 @@ describe('Switch', () => {
     it('should set the switch value property correctly', async () => {
       const value = 'apple';
 
-      el.value = value;
-      expect(el.value).to.equal(value);
+      element.value = value;
+      await elementUpdated(element);
 
-      await elementUpdated(el);
       expect(input).dom.to.equal(`<input value="${value}"/>`, DIFF_OPTIONS);
     });
 
     it('should set the switch invalid property correctly', async () => {
-      el.invalid = true;
-      await elementUpdated(el);
-      expect(el).dom.to.equal(
+      element.invalid = true;
+      await elementUpdated(element);
+
+      expect(element).dom.to.equal(
         `<igc-switch invalid label-position="after">${label}</igc-switch>`
       );
 
-      el.invalid = false;
-      await elementUpdated(el);
-      expect(el).dom.to.equal(
+      element.invalid = false;
+      await elementUpdated(element);
+
+      expect(element).dom.to.equal(
         `<igc-switch label-position="after">${label}</igc-switch>`
       );
     });
 
-    it('should correctly report validity status', async () => {
-      el = await fixture<IgcSwitchComponent>(
-        html`<igc-switch required></igc-switch>`
-      );
-      expect(el.reportValidity()).to.equals(false);
+    it('should correctly report validity status', () => {
+      element.required = true;
+      expect(element.reportValidity()).to.be.false;
 
-      el = await fixture<IgcSwitchComponent>(
-        html`<igc-switch required checked></igc-switch>`
-      );
-      expect(el.reportValidity()).to.equals(true);
+      element.checked = true;
+      expect(element.reportValidity()).to.be.true;
 
-      el = await fixture<IgcSwitchComponent>(html`<igc-switch></igc-switch>`);
-      expect(el.reportValidity()).to.equals(true);
+      element.checked = false;
+      element.required = false;
+      expect(element.reportValidity()).to.be.true;
+    });
+
+    it('should set the switch disabled property correctly', async () => {
+      const DIFF_OPTIONS = {
+        ignoreAttributes: [
+          'id',
+          'part',
+          'aria-checked',
+          'aria-labelledby',
+          'tabindex',
+          'type',
+        ],
+      };
+
+      element.disabled = true;
+      await elementUpdated(element);
+
+      expect(input).dom.to.equal('<input disabled />', DIFF_OPTIONS);
+
+      element.disabled = false;
+      await elementUpdated(element);
+
+      expect(input).dom.to.equal('<input />', DIFF_OPTIONS);
     });
 
     it('should have correct focus states between Light/Shadow DOM', () => {
-      el.focus();
-      expect(isFocused(el)).to.be.true;
+      element.focus();
+      expect(isFocused(element)).to.be.true;
       expect(isFocused(input)).to.be.true;
 
-      el.blur();
-      expect(isFocused(el)).to.be.false;
+      element.blur();
+      expect(isFocused(element)).to.be.false;
       expect(isFocused(input)).to.be.false;
     });
 
     it('should emit igcChange event when the switch checked state changes', async () => {
-      const eventSpy = spy(el, 'emitEvent');
-      el.click();
+      const eventSpy = spy(element, 'emitEvent');
+      element.click();
 
-      await elementUpdated(el);
+      await elementUpdated(element);
       expect(eventSpy).calledWithExactly('igcChange', {
         detail: { checked: true, value: undefined },
       });
     });
-
-    const createSwitchComponent = (
-      template = `<igc-switch>${label}</igc-switch>`
-    ) => {
-      return fixture<IgcSwitchComponent>(html`${unsafeStatic(template)}`);
-    };
   });
 
   describe('Form integration', () => {
-    const spec = createFormAssociatedTestBed<IgcSwitchComponent>(
-      html`<igc-switch name="checkbox"
-        >I have reviewed ToC and I agree</igc-switch
-      >`
-    );
+    const spec = createFormAssociatedTestBed<IgcSwitchComponent>(html`
+      <igc-switch name="checkbox"> I have reviewed ToC and I agree </igc-switch>
+    `);
 
     beforeEach(async () => {
       await spec.setup(IgcSwitchComponent.tagName);

From 65385dce154388581cb76409740bb6835c805a1c Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 30 Jun 2025 12:53:53 +0300
Subject: [PATCH 07/19] refactor(dialog): Use SlotController and code clean-ups

---
 src/components/dialog/dialog.ts | 276 +++++++++++++++++---------------
 stories/dialog.stories.ts       | 134 ++++++++--------
 2 files changed, 214 insertions(+), 196 deletions(-)

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 47cd1b4b8..ee890b666 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,23 +1,17 @@
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-
+import { property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
-import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
-import {
-  createCounter,
-  isEmpty,
-  numberInRangeInclusive,
-} from '../common/util.js';
+import { numberInRangeInclusive } from '../common/util.js';
 import { styles } from './themes/dialog.base.css.js';
 import { styles as shared } from './themes/shared/dialog.common.css.js';
 import { all } from './themes/themes.js';
@@ -27,25 +21,27 @@ export interface IgcDialogComponentEventMap {
   igcClosed: CustomEvent<void>;
 }
 
+let nextId = 1;
+
+/* blazorAdditionalDependency: IgcButtonComponent */
 /**
  * Represents a Dialog component.
  *
  * @element igc-dialog
  *
- * @fires igcClosing - Emitter just before the dialog is closed.
+ * @fires igcClosing - Emitter just before the dialog is closed. Cancelable.
  * @fires igcClosed - Emitted after closing the dialog.
  *
- * @slot - Renders content inside the default slot.
- * @slot title - Renders the title of the dialog header.
+ * @slot - Renders content inside the default slot of the dialog.
+ * @slot title - Renders content in the title slot of the dialog header.
  * @slot message - Renders the message content of the dialog.
- * @slot footer - Renders the dialog footer.
+ * @slot footer - Renders content in the dialog footer.
  *
  * @csspart base - The base wrapper of the dialog.
- * @csspart title - The title container.
- * @csspart footer - The footer container.
- * @csspart overlay - The overlay.
+ * @csspart title - The title container of the dialog.
+ * @csspart footer - The footer container of the dialog.
+ * @csspart overlay - The backdrop overlay of the dialog.
  */
-@blazorAdditionalDependencies('IgcButtonComponent')
 export default class IgcDialogComponent extends EventEmitterMixin<
   IgcDialogComponentEventMap,
   Constructor<LitElement>
@@ -54,37 +50,37 @@ export default class IgcDialogComponent extends EventEmitterMixin<
   public static styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcDialogComponent, IgcButtonComponent);
   }
 
-  private static readonly increment = createCounter();
-  private titleId = `title-${IgcDialogComponent.increment()}`;
+  //#region Private state and properties
+
+  private readonly _titleId = `title-${nextId++}`;
 
-  private dialogRef: Ref<HTMLDialogElement> = createRef();
-  private animationPlayer = addAnimationController(this, this.dialogRef);
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('title', 'message', 'footer'),
+  });
+
+  private readonly _dialogRef = createRef<HTMLDialogElement>();
+  private readonly _player = addAnimationController(this, this._dialogRef);
 
   /**
    * Backdrop animation helper.
    */
   @state()
-  private animating = false;
+  private _animating = false;
 
-  private get dialog() {
-    return this.dialogRef.value!;
+  private get _dialog(): HTMLDialogElement {
+    return this._dialogRef.value!;
   }
 
-  @queryAssignedElements({ slot: 'title' })
-  private titleElements!: Array<HTMLElement>;
-
-  @queryAssignedElements({ slot: 'message' })
-  private messageElements!: Array<HTMLElement>;
+  //#endregion
 
-  @queryAssignedElements({ slot: 'footer' })
-  private footerElements!: Array<HTMLElement>;
+  //#region Public properties
 
   /**
-   * Whether the dialog should be kept open when pressing the 'ESCAPE' button.
+   * Whether the dialog should be kept open when pressing the 'Escape' button.
    * @attr keep-open-on-escape
    */
   @property({ type: Boolean, attribute: 'keep-open-on-escape' })
@@ -125,48 +121,39 @@ export default class IgcDialogComponent extends EventEmitterMixin<
   @property({ attribute: false })
   public returnValue!: string;
 
-  @watch('open', { waitUntilFirstUpdate: true })
-  protected handleOpenState() {
-    this.open ? this.dialog.showModal() : this.dialog.close();
-  }
+  //#endregion
+
+  //#region Internal API
 
   constructor() {
     super();
     addThemingController(this, all);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
-  protected override firstUpdated() {
+  protected override firstUpdated(): void {
     if (this.open) {
-      this.dialog.showModal();
+      this._dialog.showModal();
     }
   }
 
-  private async toggleAnimation(dir: 'open' | 'close') {
-    const animation = dir === 'open' ? fadeIn : fadeOut;
-
-    const [_, event] = await Promise.all([
-      this.animationPlayer.stopAll(),
-      this.animationPlayer.play(animation()),
-    ]);
+  @watch('open', { waitUntilFirstUpdate: true })
+  protected _handleOpenState(): void {
+    this.open ? this._dialog.showModal() : this._dialog.close();
+  }
 
-    return event.type === 'finish';
+  private _emitClosing(): boolean {
+    return this.emitEvent('igcClosing', { cancelable: true });
   }
 
-  private async _hide(emitEvent = false) {
-    if (!this.open || (emitEvent && !this.emitClosing())) {
+  private async _hide(emitEvent = false): Promise<boolean> {
+    if (!this.open || (emitEvent && !this._emitClosing())) {
       return false;
     }
 
-    this.animating = true;
-    await this.toggleAnimation('close');
+    this._animating = true;
+    await this._player.playExclusive(fadeOut());
     this.open = false;
-    this.animating = false;
+    this._animating = false;
 
     if (emitEvent) {
       await this.updateComplete;
@@ -176,6 +163,44 @@ export default class IgcDialogComponent extends EventEmitterMixin<
     return true;
   }
 
+  protected _handleFormSubmit(event: SubmitEvent): void {
+    const form = event.target as HTMLFormElement;
+
+    if (form.method === 'dialog') {
+      if (hasSubmitter(event.submitter)) {
+        this.returnValue = event.submitter.value ?? '';
+      }
+
+      if (!event.defaultPrevented) {
+        this._hide(true);
+      }
+    }
+  }
+
+  private _handleCancel(event: Event): void {
+    event.preventDefault();
+
+    if (!this.keepOpenOnEscape) {
+      this._hide(true);
+    }
+  }
+
+  private _handleClick({ clientX, clientY, target }: PointerEvent): void {
+    if (this.closeOnOutsideClick && this._dialog === target) {
+      const rect = this._dialog.getBoundingClientRect();
+      const inX = numberInRangeInclusive(clientX, rect.left, rect.right);
+      const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
+
+      if (!(inX && inY)) {
+        this._hide(true);
+      }
+    }
+  }
+
+  //#endregion
+
+  //#region Public API
+
   /** Opens the dialog. */
   public async show(): Promise<boolean> {
     if (this.open) {
@@ -183,7 +208,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
     }
 
     this.open = true;
-    await this.toggleAnimation('open');
+    await this._player.playExclusive(fadeIn());
     return true;
   }
 
@@ -197,95 +222,78 @@ export default class IgcDialogComponent extends EventEmitterMixin<
     return this.open ? this.hide() : this.show();
   }
 
-  private handleCancel(event: Event) {
-    event.preventDefault();
-
-    if (!this.keepOpenOnEscape) {
-      this._hide(true);
-    }
-  }
+  //#endregion
 
-  private handleClick({ clientX, clientY, target }: PointerEvent) {
-    if (this.closeOnOutsideClick && this.dialog === target) {
-      const rect = this.dialog.getBoundingClientRect();
-      const inX = numberInRangeInclusive(clientX, rect.left, rect.right);
-      const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
+  //#region Render methods
 
-      if (!(inX && inY)) {
-        this._hide(true);
-      }
-    }
+  protected _renderBackdrop() {
+    return html`
+      <div
+        aria-hidden=${!this.open}
+        part=${partMap({ backdrop: true, animating: this._animating })}
+      ></div>
+    `;
   }
 
-  private emitClosing(): boolean {
-    return this.emitEvent('igcClosing', { cancelable: true });
+  protected _renderHeader() {
+    return html`
+      <header part="title" id=${this._titleId}>
+        <slot name="title">
+          <span>${this.title}</span>
+        </slot>
+      </header>
+    `;
   }
 
-  protected formSubmitHandler = (e: SubmitEvent) => {
-    if (e.submitter) {
-      this.returnValue = (e.submitter as any)?.value ?? '';
-    }
-
-    if (!e.defaultPrevented) {
-      this._hide(true);
-    }
-  };
-
-  private handleContentChange() {
-    // Setup submit handling for forms
-    const forms = this.querySelectorAll<HTMLFormElement>(
-      'form[method="dialog"]'
-    );
+  protected _renderContent() {
+    const hasMessage = this._slots.hasAssignedElements('message');
+    return html`
+      <section part="content">
+        <slot name="message" ?hidden=${!hasMessage}></slot>
+        <slot @submit=${this._handleFormSubmit}></slot>
+      </section>
+    `;
+  }
 
-    for (const form of forms) {
-      form.removeEventListener('submit', this.formSubmitHandler);
-      form.addEventListener('submit', this.formSubmitHandler);
-    }
+  protected _renderFooter() {
+    return html`
+      <footer part="footer">
+        <slot name="footer">
+          ${this.hideDefaultAction
+            ? nothing
+            : html`
+                <igc-button variant="flat" @click=${() => this._hide(true)}>
+                  OK
+                </igc-button>
+              `}
+        </slot>
+      </footer>
+    `;
   }
 
   protected override render() {
-    const label = this.ariaLabel ? this.ariaLabel : undefined;
-    const labelledBy = label ? undefined : this.titleId;
-    const backdropParts = {
-      backdrop: true,
-      animating: this.animating,
-    };
-    const baseParts = {
-      base: true,
-      titled: this.titleElements.length > 0 || !!this.title,
-      footed: this.footerElements.length > 0 || !this.hideDefaultAction,
-    };
+    const hasTitle = this._slots.hasAssignedElements('title') || !!this.title;
+    const hasFooter =
+      this._slots.hasAssignedElements('footer') || !this.hideDefaultAction;
+    const labelledBy = this.ariaLabel ?? this._titleId;
 
     return html`
-      <div part=${partMap(backdropParts)} aria-hidden=${!this.open}></div>
+      ${this._renderBackdrop()}
       <dialog
-        ${ref(this.dialogRef)}
-        part=${partMap(baseParts)}
+        ${ref(this._dialogRef)}
+        part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}
         role="dialog"
-        @click=${this.handleClick}
-        @cancel=${this.handleCancel}
-        aria-label=${ifDefined(label)}
-        aria-labelledby=${ifDefined(labelledBy)}
+        aria-label=${this.ariaLabel || nothing}
+        aria-labelledby=${labelledBy || nothing}
+        @click=${this._handleClick}
+        @cancel=${this._handleCancel}
       >
-        <header part="title" id=${this.titleId}>
-          <slot name="title"><span>${this.title}</span></slot>
-        </header>
-        <section part="content">
-          <slot name="message" .hidden=${isEmpty(this.messageElements)}></slot>
-          <slot @slotchange=${this.handleContentChange}></slot>
-        </section>
-        <footer part="footer">
-          <slot name="footer">
-            ${this.hideDefaultAction
-              ? nothing
-              : html`<igc-button variant="flat" @click=${() => this._hide(true)}
-                  >OK</igc-button
-                >`}
-          </slot>
-        </footer>
+        ${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}
       </dialog>
     `;
   }
+
+  //#endregion
 }
 
 declare global {
@@ -293,3 +301,9 @@ declare global {
     'igc-dialog': IgcDialogComponent;
   }
 }
+
+function hasSubmitter(
+  submitter: SubmitEvent['submitter']
+): submitter is HTMLButtonElement | HTMLInputElement {
+  return submitter != null;
+}
diff --git a/stories/dialog.stories.ts b/stories/dialog.stories.ts
index 8d86638cc..a2f78306a 100644
--- a/stories/dialog.stories.ts
+++ b/stories/dialog.stories.ts
@@ -84,41 +84,47 @@ type Story = StoryObj<IgcDialogArgs>;
 
 // endregion
 
-const openDialog = (id: string) =>
-  (document.getElementById(id) as IgcDialogComponent).show();
+function getDialog(id: string) {
+  return document.getElementById(id) as IgcDialogComponent;
+}
+
+function openDialog(id: string) {
+  getDialog(id).show();
+}
 
-const closeDialog = (id: string) =>
-  (document.getElementById(id) as IgcDialogComponent).hide();
+function closeDialog(id: string) {
+  getDialog(id).hide();
+}
 
 const authMethods = ['Basic', 'Bearer', 'Digest', 'OAuth'];
 
-const Template = ({
-  keepOpenOnEscape,
-  closeOnOutsideClick,
-  title,
-  open,
-  hideDefaultAction,
-}: IgcDialogComponent) => {
-  return html`
+export const Basic: Story = {
+  args: {
+    title: 'Default dialog',
+  },
+  render: (args) => html`
     <div
       style="display: flex; align-items: flex-start; position: relative; height: 400px; gap: 1rem"
     >
-      <igc-button @click=${() => openDialog('default')}
-        >Default dialog</igc-button
-      >
-      <igc-button @click=${() => openDialog('projected')}
-        >Projected content</igc-button
-      >
+      <igc-button @click=${() => openDialog('default')}>
+        Default dialog
+      </igc-button>
 
-      <igc-button @click=${() => openDialog('with-form')}>With Form</igc-button>
+      <igc-button @click=${() => openDialog('projected')}>
+        Projected content
+      </igc-button>
+
+      <igc-button @click=${() => openDialog('with-form')}>
+        With Form
+      </igc-button>
 
       <igc-dialog
         id="default"
-        ?keep-open-on-escape=${keepOpenOnEscape}
-        ?close-on-outside-click=${closeOnOutsideClick}
-        ?hide-default-action=${hideDefaultAction}
-        .open=${open}
-        title=${ifDefined(title)}
+        ?keep-open-on-escape=${args.keepOpenOnEscape}
+        ?close-on-outside-click=${args.closeOnOutsideClick}
+        ?hide-default-action=${args.hideDefaultAction}
+        ?open=${args.open}
+        title=${ifDefined(args.title)}
       >
         <span slot="message">
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus
@@ -130,64 +136,62 @@ const Template = ({
 
       <igc-dialog
         id="projected"
-        ?keep-open-on-escape=${keepOpenOnEscape}
-        ?close-on-outside-click=${closeOnOutsideClick}
+        ?keep-open-on-escape=${args.keepOpenOnEscape}
+        ?close-on-outside-click=${args.closeOnOutsideClick}
       >
         <h4 slot="title">Danger</h4>
-        <p>Doing this action is irrevocable?</p>
+        <p>Doing this action is irrevocable!</p>
         <igc-button
           slot="footer"
-          @click=${() => closeDialog('projected')}
           variant="flat"
-          >Cancel</igc-button
+          @click=${() => closeDialog('projected')}
         >
+          Cancel
+        </igc-button>
+
         <igc-button
           slot="footer"
-          @click=${() => closeDialog('projected')}
           variant="contained"
-          >OK</igc-button
+          @click=${() => closeDialog('projected')}
         >
+          OK
+        </igc-button>
       </igc-dialog>
 
       <igc-dialog
         id="with-form"
         hide-default-action
-        ?keep-open-on-escape=${keepOpenOnEscape}
-        ?close-on-outside-click=${closeOnOutsideClick}
+        ?keep-open-on-escape=${args.keepOpenOnEscape}
+        ?close-on-outside-click=${args.closeOnOutsideClick}
       >
         <h3 slot="title">Your credentials</h3>
-        <div>
-          <form method="dialog">
-            <div style="display: flex; flex-flow: column; gap: 1rem">
-              <igc-input name="username" outlined label="Username"></igc-input>
-              <igc-input
-                name="password"
-                outlined
-                label="Password"
-                type="password"
-              ></igc-input>
-              <igc-select
-                name="auth-method"
-                outlined
-                label="Authentication method"
-              >
-                ${authMethods.map(
-                  (each) =>
-                    html`<igc-select-item value=${each}
-                      >${each}</igc-select-item
-                    >`
-                )}
-              </igc-select>
-            </div>
-            <div style="display: flex; gap: 1rem; margin-top: 1rem">
-              <igc-button type="reset" variant="flat">Reset</igc-button>
-              <igc-button type="submit" variant="flat">Confirm</igc-button>
-            </div>
-          </form>
-        </div>
+        <form method="dialog">
+          <div style="display: flex; flex-flow: column; gap: 1rem">
+            <igc-input name="username" outlined label="Username"></igc-input>
+            <igc-input
+              name="password"
+              outlined
+              label="Password"
+              type="password"
+            ></igc-input>
+            <igc-select
+              name="auth-method"
+              outlined
+              label="Authentication method"
+            >
+              ${authMethods.map(
+                (each) =>
+                  html`<igc-select-item value=${each}>${each}</igc-select-item>`
+              )}
+            </igc-select>
+          </div>
+
+          <div style="display: flex; gap: 1rem; margin-top: 1rem">
+            <igc-button type="reset" variant="flat">Reset</igc-button>
+            <igc-button type="submit" variant="flat">Confirm</igc-button>
+          </div>
+        </form>
       </igc-dialog>
     </div>
-  `;
+  `,
 };
-
-export const Basic: Story = Template.bind({});

From f7917387066c80e5a08bbc8b80aa38bd16230c1f Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 1 Jul 2025 10:26:48 +0300
Subject: [PATCH 08/19] refactor(textarea): Use SlotController and code
 clean-ups

---
 src/components/common/controllers/slot.ts |   1 +
 src/components/textarea/textarea.ts       | 197 ++++++++++------------
 stories/dialog.stories.ts                 |   4 +-
 3 files changed, 96 insertions(+), 106 deletions(-)

diff --git a/src/components/common/controllers/slot.ts b/src/components/common/controllers/slot.ts
index 0f20cde05..d9b6e8cbb 100644
--- a/src/components/common/controllers/slot.ts
+++ b/src/components/common/controllers/slot.ts
@@ -188,6 +188,7 @@ function setSlots<const T extends readonly string[]>(...slots: T) {
 
 export { addSlotController, DefaultSlot, setSlots };
 export type {
+  InferSlotNames,
   SlotController,
   SlotQueryOptions,
   SlotChangeCallback,
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 64b49812e..518de551f 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,18 +1,24 @@
-import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import {
-  property,
-  query,
-  queryAssignedElements,
-  queryAssignedNodes,
-} from 'lit/decorators.js';
+  html,
+  LitElement,
+  nothing,
+  type PropertyValues,
+  type TemplateResult,
+} from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-
+import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { createResizeObserverController } from '../common/controllers/resize-observer.js';
+import {
+  addSlotController,
+  type InferSlotNames,
+  type SlotChangeCallbackParameters,
+  setSlots,
+} from '../common/controllers/slot.js';
 import { shadowOptions } from '../common/decorators/shadow-options.js';
-import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -22,12 +28,7 @@ import {
   type FormValueOf,
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import {
-  addSafeEventListener,
-  asNumber,
-  createCounter,
-  isEmpty,
-} from '../common/util.js';
+import { addSafeEventListener, asNumber } from '../common/util.js';
 import type {
   RangeTextSelectMode,
   SelectionRangeDirection,
@@ -49,6 +50,18 @@ export interface IgcTextareaComponentEventMap {
   blur: FocusEvent;
 }
 
+let nextId = 1;
+const Slots = setSlots(
+  'prefix',
+  'suffix',
+  'helper-text',
+  'value-missing',
+  'too-long',
+  'too-short',
+  'custom-error',
+  'invalid'
+);
+
 /**
  * This element represents a multi-line plain-text editing control,
  * useful when you want to allow users to enter a sizeable amount of free-form text,
@@ -92,10 +105,18 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
 
   //#region Private properties and state
 
-  private static readonly increment = createCounter();
+  private readonly _inputId = `textarea-${nextId++}`;
 
   private readonly _themes = addThemingController(this, all);
 
+  private readonly _slots = addSlotController(this, {
+    slots: Slots,
+    onChange: this._handleSlotChange,
+  });
+
+  @query('textarea', true)
+  private readonly _input!: HTMLTextAreaElement;
+
   protected override get __validators() {
     return textAreaValidators;
   }
@@ -103,32 +124,6 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   protected override readonly _formValue: FormValueOf<string> =
     createFormValueState(this, { initialValue: '' });
 
-  protected readonly _inputId = `textarea-${IgcTextareaComponent.increment()}`;
-
-  @queryAssignedNodes({ flatten: true })
-  private readonly _projected!: Node[];
-
-  @queryAssignedElements({
-    slot: 'prefix',
-    selector: '[slot="prefix"]:not([hidden])',
-  })
-  protected readonly _prefixes!: HTMLElement[];
-
-  @queryAssignedElements({
-    slot: 'suffix',
-    selector: '[slot="suffix"]:not([hidden])',
-  })
-  protected readonly _suffixes!: HTMLElement[];
-
-  @query('textarea', true)
-  private readonly _input!: HTMLTextAreaElement;
-
-  private get _resizeStyles(): StyleInfo {
-    return {
-      resize: this.resize === 'auto' ? 'none' : this.resize,
-    };
-  }
-
   //#endregion
 
   //#region Public properties and attributes
@@ -281,27 +276,6 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
 
   //#endregion
 
-  //#region Watchers
-
-  @watch('value')
-  protected async _valueChanged(): Promise<void> {
-    await this.updateComplete;
-    this._setAreaHeight();
-  }
-
-  @watch('rows', { waitUntilFirstUpdate: true })
-  @watch('resize', { waitUntilFirstUpdate: true })
-  protected _setAreaHeight(): void {
-    if (this.resize === 'auto') {
-      this._input.style.height = 'auto';
-      this._input.style.height = `${this._setAutoHeight()}px`;
-    } else {
-      Object.assign(this._input.style, { height: undefined });
-    }
-  }
-
-  //#endregion
-
   //#region Life-cycle hooks
 
   constructor() {
@@ -315,27 +289,16 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     addSafeEventListener(this, 'blur', this._handleBlur);
   }
 
-  protected override createRenderRoot(): HTMLElement | DocumentFragment {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', (event) =>
-      this._handleSlotChange(event)
-    );
-    return root;
+  protected override updated(props: PropertyValues<this>): void {
+    if (props.has('rows') || props.has('resize') || props.has('value')) {
+      this._setAreaHeight();
+    }
   }
 
   //#endregion
 
   //#region Internal methods
 
-  protected _resolvePartNames() {
-    return {
-      container: true,
-      prefixed: this._prefixes.length > 0,
-      suffixed: this._suffixes.length > 0,
-      filled: !!this.value,
-    };
-  }
-
   private _setAutoHeight(): number {
     const { borderTopWidth, borderBottomWidth } = getComputedStyle(this._input);
     return (
@@ -345,16 +308,38 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     );
   }
 
+  protected _setAreaHeight(): void {
+    if (this.resize === 'auto') {
+      this._input.style.height = 'auto';
+      this._input.style.height = `${this._setAutoHeight()}px`;
+    } else {
+      Object.assign(this._input.style, { height: undefined });
+    }
+  }
+
+  protected _resolvePartNames() {
+    return {
+      container: true,
+      prefixed: this._slots.hasAssignedElements('prefix', {
+        selector: ':not([hidden])',
+      }),
+      suffixed: this._slots.hasAssignedElements('suffix', {
+        selector: ':not([hidden])',
+      }),
+      filled: !!this.value,
+    };
+  }
+
   //#endregion
 
   //#region Event handlers
 
-  protected _handleSlotChange({ target }: Event): void {
-    const slot = target as HTMLSlotElement;
-
-    // Default slot used for declarative value projection
-    if (!slot.name) {
-      const value = this._projected
+  private _handleSlotChange({
+    isDefault,
+  }: SlotChangeCallbackParameters<InferSlotNames<typeof Slots>>): void {
+    if (isDefault) {
+      const value = this._slots
+        .getAssignedNodes('[default]', true)
         .map((node) => node.textContent?.trim())
         .filter((node) => Boolean(node))
         .join('\r\n');
@@ -363,8 +348,6 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
         this.value = value;
       }
     }
-
-    this.requestUpdate();
   }
 
   protected _handleInput(): void {
@@ -428,18 +411,14 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
 
   //#region Renderers
 
-  protected _renderPrefix() {
-    return html`
-      <div part="prefix" .hidden=${isEmpty(this._prefixes)}>
-        <slot name="prefix"></slot>
-      </div>
-    `;
-  }
+  protected _renderSlot(name: InferSlotNames<typeof Slots>) {
+    const isHidden = !this._slots.hasAssignedElements(name, {
+      selector: ':not([hidden])',
+    });
 
-  protected _renderSuffix() {
     return html`
-      <div part="suffix" .hidden=${isEmpty(this._suffixes)}>
-        <slot name="suffix"></slot>
+      <div part=${name} ?hidden=${isHidden}>
+        <slot name=${name}></slot>
       </div>
     `;
   }
@@ -458,7 +437,8 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     return html`
       ${this._renderLabel()}
       <div part=${partMap(this._resolvePartNames())}>
-        ${this._renderPrefix()} ${this._renderInput()} ${this._renderSuffix()}
+        ${this._renderSlot('prefix')} ${this._renderInput()}
+        ${this._renderSlot('suffix')}
       </div>
       ${this._renderValidationContainer()}
     `;
@@ -473,23 +453,29 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
           placeholder: !!this.placeholder,
         })}
       >
-        <div part="start">${this._renderPrefix()}</div>
+        <div part="start">${this._renderSlot('prefix')}</div>
         ${this._renderInput()}
         <div part="notch">${this._renderLabel()}</div>
         <div part="filler"></div>
-        <div part="end">${this._renderSuffix()}</div>
+        <div part="end">${this._renderSlot('suffix')}</div>
       </div>
       ${this._renderValidationContainer()}
     `;
   }
 
   protected _renderInput() {
+    const describedBy = this._slots.hasAssignedElements('helper-text')
+      ? 'helper-text'
+      : nothing;
+
     return html`
       <slot style="display: none"></slot>
       <textarea
         id=${this.id || this._inputId}
         part="input"
-        style=${styleMap(this._resizeStyles)}
+        style=${styleMap({
+          resize: this.resize === 'auto' ? 'none' : this.resize,
+        })}
         @input=${this._handleInput}
         @change=${this._handleChange}
         placeholder=${ifDefined(this.placeholder)}
@@ -505,7 +491,8 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
         ?disabled=${this.disabled}
         ?required=${this.required}
         ?readonly=${this.readOnly}
-        aria-invalid=${this.invalid ? 'true' : 'false'}
+        aria-invalid=${this.invalid}
+        aria-describedby=${describedBy}
       ></textarea>
     `;
   }
@@ -515,9 +502,11 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   }
 
   protected override render() {
-    return this._themes.theme === 'material'
-      ? this._renderMaterial()
-      : this._renderStandard();
+    return cache(
+      this._themes.theme === 'material'
+        ? this._renderMaterial()
+        : this._renderStandard()
+    );
   }
 
   //#endregion
diff --git a/stories/dialog.stories.ts b/stories/dialog.stories.ts
index a2f78306a..097bc1f5f 100644
--- a/stories/dialog.stories.ts
+++ b/stories/dialog.stories.ts
@@ -23,7 +23,7 @@ const metadata: Meta<IgcDialogComponent> = {
     keepOpenOnEscape: {
       type: 'boolean',
       description:
-        "Whether the dialog should be kept open when pressing the 'ESCAPE' button.",
+        "Whether the dialog should be kept open when pressing the 'Escape' button.",
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
@@ -64,7 +64,7 @@ const metadata: Meta<IgcDialogComponent> = {
 export default metadata;
 
 interface IgcDialogArgs {
-  /** Whether the dialog should be kept open when pressing the 'ESCAPE' button. */
+  /** Whether the dialog should be kept open when pressing the 'Escape' button. */
   keepOpenOnEscape: boolean;
   /** Whether the dialog should be closed when clicking outside of it. */
   closeOnOutsideClick: boolean;

From 7e9a67dd6d9eeee0673a36251ff47dc6a3000387 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 1 Jul 2025 10:48:42 +0300
Subject: [PATCH 09/19] refactor(nav-drawer): Use SlotController and code
 clean-up

---
 src/components/nav-drawer/nav-drawer-item.ts | 43 ++++++++------------
 src/components/nav-drawer/nav-drawer.ts      | 23 +++++------
 2 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/src/components/nav-drawer/nav-drawer-item.ts b/src/components/nav-drawer/nav-drawer-item.ts
index af6ece290..813a9fcd2 100644
--- a/src/components/nav-drawer/nav-drawer-item.ts
+++ b/src/components/nav-drawer/nav-drawer-item.ts
@@ -1,12 +1,7 @@
 import { html, LitElement } from 'lit';
-import {
-  property,
-  queryAssignedElements,
-  queryAssignedNodes,
-  state,
-} from 'lit/decorators.js';
-
+import { property, state } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { styles } from './themes/item.base.css.js';
@@ -30,10 +25,18 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcNavDrawerItemComponent);
   }
 
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('content', 'icon'),
+    onChange: this._handleSlotChange,
+  });
+
+  @state()
+  private _hasContent = true;
+
   /**
    * Determines whether the drawer is disabled.
    * @attr
@@ -48,33 +51,21 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public active = false;
 
-  @state()
-  private _textLength!: number;
-
-  @queryAssignedElements({ slot: 'content' })
-  private _text!: Array<HTMLElement>;
-
-  @queryAssignedNodes({ slot: 'icon', flatten: true })
-  protected navdrawerIcon!: Array<Node>;
-
   constructor() {
     super();
     addThemingController(this, all);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => {
-      this._textLength = this._text.length;
-    });
-
-    return root;
+  protected _handleSlotChange(): void {
+    this._hasContent = this._slots.hasAssignedElements('content');
   }
 
   protected override render() {
+    const hasNoIcon = !this._slots.hasAssignedNodes('icon', true);
+
     return html`
-      <div part=${partMap({ base: true, mini: this._textLength < 1 })}>
-        <span part="icon" .hidden="${this.navdrawerIcon.length === 0}">
+      <div part=${partMap({ base: true, mini: !this._hasContent })}>
+        <span part="icon" ?hidden=${hasNoIcon}>
           <slot name="icon"></slot>
         </span>
         <span part="content">
diff --git a/src/components/nav-drawer/nav-drawer.ts b/src/components/nav-drawer/nav-drawer.ts
index e5b2d04ba..676d30ddf 100644
--- a/src/components/nav-drawer/nav-drawer.ts
+++ b/src/components/nav-drawer/nav-drawer.ts
@@ -1,10 +1,9 @@
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-
+import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
 import type { NavDrawerPosition } from '../types.js';
 import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
 import IgcNavDrawerItemComponent from './nav-drawer-item.js';
@@ -30,7 +29,7 @@ export default class IgcNavDrawerComponent extends LitElement {
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(
       IgcNavDrawerComponent,
       IgcNavDrawerHeaderItemComponent,
@@ -38,8 +37,9 @@ export default class IgcNavDrawerComponent extends LitElement {
     );
   }
 
-  @queryAssignedElements({ slot: 'mini' })
-  private _miniSlotElements!: Array<HTMLElement>;
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('mini'),
+  });
 
   /**
    * The position of the drawer.
@@ -60,12 +60,6 @@ export default class IgcNavDrawerComponent extends LitElement {
     addThemingController(this, all);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
   private _waitTransitions() {
     return new Promise<Event>((resolve) => {
       this.renderRoot.addEventListener('transitionend', resolve, {
@@ -114,7 +108,10 @@ export default class IgcNavDrawerComponent extends LitElement {
       </div>
 
       <div
-        part=${partMap({ mini: true, hidden: isEmpty(this._miniSlotElements) })}
+        part=${partMap({
+          mini: true,
+          hidden: !this._slots.hasAssignedElements('mini'),
+        })}
       >
         <slot name="mini"></slot>
       </div>

From 8dc6f9ee7c1dbbc65f093b6266b70dcec7e06df1 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 1 Jul 2025 19:17:04 +0300
Subject: [PATCH 10/19] refactor(expansion-panel): Use SlotsController and code
 clean-ups

---
 .../expansion-panel/expansion-panel.ts        | 111 ++++++++----------
 1 file changed, 47 insertions(+), 64 deletions(-)

diff --git a/src/components/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel.ts
index b43b0f7dc..0f80ffe1a 100644
--- a/src/components/expansion-panel/expansion-panel.ts
+++ b/src/components/expansion-panel/expansion-panel.ts
@@ -1,7 +1,6 @@
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
@@ -11,10 +10,10 @@ import {
   arrowDown,
   arrowUp,
 } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { createCounter, isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import type { ExpansionPanelIndicatorPosition } from '../types.js';
 import { styles } from './themes/expansion-panel.base.css.js';
@@ -28,6 +27,8 @@ export interface IgcExpansionPanelComponentEventMap {
   igcClosed: CustomEvent<IgcExpansionPanelComponent>;
 }
 
+let nextId = 1;
+
 /**
  * The Expansion Panel Component provides a way to display information in a toggleable way -
  * compact summary view containing title and description and expanded detail view containing
@@ -60,33 +61,31 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
   public static styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcExpansionPanelComponent, IgcIconComponent);
   }
 
-  private static readonly increment = createCounter();
-
-  private _panelId!: string;
-  private headerRef: Ref<HTMLDivElement> = createRef();
-  private contentRef: Ref<HTMLDivElement> = createRef();
+  private _panelId = `${IgcExpansionPanelComponent.tagName}-${nextId++}`;
+  private readonly _headerRef = createRef<HTMLElement>();
+  private readonly _contentRef = createRef<HTMLElement>();
 
-  private animationPlayer = addAnimationController(this, this.contentRef);
-
-  @queryAssignedElements({ slot: 'indicator-expanded' })
-  private _indicatorExpandedElements!: HTMLElement[];
+  private readonly _player = addAnimationController(this, this._contentRef);
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('title', 'subtitle', 'indicator', 'indicator-expanded'),
+  });
 
   /**
    * Indicates whether the contents of the control should be visible.
    * @attr
    */
-  @property({ reflect: true, type: Boolean })
+  @property({ type: Boolean, reflect: true })
   public open = false;
 
   /**
    * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.
    * @attr
    */
-  @property({ reflect: true, type: Boolean })
+  @property({ type: Boolean, reflect: true })
   public disabled = false;
 
   /**
@@ -102,49 +101,41 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
     addThemingController(this, all);
 
     addKeybindings(this, {
-      ref: this.headerRef,
+      ref: this._headerRef,
       skip: () => this.disabled,
       bindingDefaults: { preventDefault: true },
     })
-      .setActivateHandler(this.toggleWithEvent)
-      .set([altKey, arrowDown], this.openWithEvent)
-      .set([altKey, arrowUp], this.closeWithEvent);
-  }
-
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
+      .setActivateHandler(this._toggleWithEvent)
+      .set([altKey, arrowDown], this._openWithEvent)
+      .set([altKey, arrowUp], this._closeWithEvent);
   }
 
-  public override connectedCallback() {
+  public override connectedCallback(): void {
     super.connectedCallback();
-    this._panelId =
-      this.id ||
-      `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;
+    this._panelId = this.id || this._panelId;
   }
 
-  private handleClick() {
-    this.headerRef.value!.focus();
-    this.toggleWithEvent();
+  private _handleClick(): void {
+    this._headerRef.value!.focus();
+    this._toggleWithEvent();
   }
 
-  private toggleWithEvent() {
-    this.open ? this.closeWithEvent() : this.openWithEvent();
+  private _toggleWithEvent(): void {
+    this.open ? this._closeWithEvent() : this._openWithEvent();
   }
 
-  private async toggleAnimation(dir: 'open' | 'close') {
+  private async _toggleAnimation(dir: 'open' | 'close'): Promise<boolean> {
     const animation = dir === 'open' ? growVerIn : growVerOut;
 
     const [_, event] = await Promise.all([
-      this.animationPlayer.stopAll(),
-      this.animationPlayer.play(animation()),
+      this._player.stopAll(),
+      this._player.play(animation()),
     ]);
 
     return event.type === 'finish';
   }
 
-  private async openWithEvent() {
+  private async _openWithEvent(): Promise<void> {
     if (
       this.open ||
       !this.emitEvent('igcOpening', { cancelable: true, detail: this })
@@ -154,12 +145,12 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
 
     this.open = true;
 
-    if (await this.toggleAnimation('open')) {
+    if (await this._toggleAnimation('open')) {
       this.emitEvent('igcOpened', { detail: this });
     }
   }
 
-  private async closeWithEvent() {
+  private async _closeWithEvent(): Promise<void> {
     if (
       !(
         this.open &&
@@ -171,7 +162,7 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
 
     this.open = false;
 
-    if (await this.toggleAnimation('close')) {
+    if (await this._toggleAnimation('close')) {
       this.emitEvent('igcClosed', { detail: this });
     }
   }
@@ -188,7 +179,7 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
     }
 
     this.open = false;
-    await this.toggleAnimation('close');
+    await this._toggleAnimation('close');
     return true;
   }
 
@@ -199,37 +190,29 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
     }
 
     this.open = true;
-    await this.toggleAnimation('open');
+    await this._toggleAnimation('open');
     return true;
   }
 
-  private renderIndicatorTemplate() {
+  private _renderIndicator() {
+    const iconName = this.open ? 'collapse' : 'expand';
     const indicatorHidden =
-      this.open && this._indicatorExpandedElements.length > 0;
-    const indicatorExpandedHidden =
-      isEmpty(this._indicatorExpandedElements) || !this.open;
+      this.open && this._slots.hasAssignedElements('indicator-expanded');
 
     return html`
       <div part="indicator" aria-hidden="true">
         <slot name="indicator" ?hidden=${indicatorHidden}>
-          <igc-icon
-            name=${this.open ? 'collapse' : 'expand'}
-            collection="default"
-          >
-          </igc-icon>
+          <igc-icon name=${iconName} collection="default"></igc-icon>
         </slot>
-        <slot
-          name="indicator-expanded"
-          ?hidden=${indicatorExpandedHidden}
-        ></slot>
+        <slot name="indicator-expanded" ?hidden=${!indicatorHidden}></slot>
       </div>
     `;
   }
 
-  private renderHeaderTemplate() {
+  private _renderHeader() {
     return html`
       <div
-        ${ref(this.headerRef)}
+        ${ref(this._headerRef)}
         part="header"
         id="${this._panelId}-header"
         role="button"
@@ -237,9 +220,9 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
         aria-disabled=${this.disabled}
         aria-controls="${this._panelId}-content"
         tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this.disabled ? nothing : this.handleClick}
+        @click=${this.disabled ? nothing : this._handleClick}
       >
-        ${this.renderIndicatorTemplate()}
+        ${this._renderIndicator()}
         <div>
           <slot name="title" part="title"></slot>
           <slot name="subtitle" part="subtitle"></slot>
@@ -248,10 +231,10 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
     `;
   }
 
-  private renderContentTemplate() {
+  private _renderPanel() {
     return html`
       <div
-        ${ref(this.contentRef)}
+        ${ref(this._contentRef)}
         part="content"
         role="region"
         id="${this._panelId}-content"
@@ -265,7 +248,7 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
   }
 
   protected override render() {
-    return html`${this.renderHeaderTemplate()}${this.renderContentTemplate()}`;
+    return html`${this._renderHeader()}${this._renderPanel()}`;
   }
 }
 

From eb7f33b0b4009d22c55a33b42644f03795259906 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Wed, 2 Jul 2025 16:02:15 +0300
Subject: [PATCH 11/19] refactor(radio): Use SlotController

---
 src/components/checkbox/checkbox-base.ts  | 10 +--
 src/components/radio-group/radio-group.ts | 76 +++++++++++------------
 src/components/radio/radio.spec.ts        | 37 +----------
 src/components/radio/radio.ts             | 60 ++++++++----------
 4 files changed, 72 insertions(+), 111 deletions(-)

diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
index 0c3321259..7f674f4be 100644
--- a/src/components/checkbox/checkbox-base.ts
+++ b/src/components/checkbox/checkbox-base.ts
@@ -40,9 +40,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
 
   protected readonly _slots = addSlotController(this, {
     slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
-    onChange: () => {
-      this._hideLabel = !this._slots.hasAssignedNodes('[default]');
-    },
+    onChange: this._handleSlotChange,
     initial: true,
   });
 
@@ -68,7 +66,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   public set value(value: string) {
     this._value = value;
     if (this.checked) {
-      this._setFormValue(this._value);
+      this._setFormValue(this._value || 'on');
     }
   }
 
@@ -115,6 +113,10 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
     this._input.blur();
   }
 
+  protected _handleSlotChange(): void {
+    this._hideLabel = !this._slots.hasAssignedNodes('[default]');
+  }
+
   protected _handleClick(event: PointerEvent): void {
     event.stopPropagation();
 
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 9dfa159b2..d7fdf8ece 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -1,8 +1,9 @@
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { createMutationController } from '../common/controllers/mutation-observer.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcRadioComponent from '../radio/radio.js';
 import type { ContentOrientation } from '../types.js';
@@ -32,13 +33,18 @@ export default class IgcRadioGroupComponent extends LitElement {
     },
   });
 
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots(),
+    onChange: this._handleSlotChange,
+    initial: true,
+  });
+
+  private _radios: IgcRadioComponent[] = [];
+
   private _defaultValue!: string;
   private _name!: string;
   private _value!: string;
 
-  @queryAssignedElements({ selector: 'igc-radio', flatten: true })
-  private _radios!: NodeListOf<IgcRadioComponent>;
-
   /**
    * Alignment of the radio controls inside this group.
    * @attr
@@ -84,27 +90,12 @@ export default class IgcRadioGroupComponent extends LitElement {
 
   public get value(): string {
     if (this._radios.length) {
-      this._value =
-        Array.from(this._radios).find((radio) => radio.checked)?.value ?? '';
+      this._value = this._radios.find((radio) => radio.checked)?.value ?? '';
     }
 
     return this._value;
   }
 
-  private _observerCallback(): void {
-    const radios = Array.from(this._radios);
-
-    this._internals.setState(
-      'disabled',
-      radios.every((radio) => radio.disabled)
-    );
-
-    this._internals.setState(
-      'label-before',
-      radios.some((radio) => radio.labelPosition === 'before')
-    );
-  }
-
   constructor() {
     super();
 
@@ -120,13 +111,7 @@ export default class IgcRadioGroupComponent extends LitElement {
     });
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this._setCSSGridVars());
-    return root;
-  }
-
-  protected override firstUpdated() {
+  protected override firstUpdated(): void {
     const radios = Array.from(this._radios);
     const allRadiosUnchecked = radios.every((radio) => !radio.checked);
 
@@ -139,17 +124,30 @@ export default class IgcRadioGroupComponent extends LitElement {
     }
   }
 
-  private _setCSSGridVars() {
-    const slot = this.renderRoot.querySelector('slot');
-    if (slot) {
-      this.style.setProperty(
-        '--layout-count',
-        `${slot.assignedElements({ flatten: true }).length}`
-      );
-    }
+  private _observerCallback(): void {
+    const disabled = this._radios.every((radio) => radio.disabled);
+    const labeBefore = this._radios.some(
+      (radio) => radio.labelPosition === 'before'
+    );
+
+    this._internals.setState('disabled', disabled);
+    this._internals.setState('label-before', labeBefore);
+  }
+
+  private _handleSlotChange(): void {
+    this._radios = this._slots.getAssignedElements('[default]', {
+      selector: IgcRadioComponent.tagName,
+      flatten: true,
+    });
+
+    const elements = this._slots.getAssignedElements('[default]', {
+      flatten: true,
+    });
+
+    this.style.setProperty('--layout-count', elements.length.toString());
   }
 
-  private _setRadiosDefaultChecked() {
+  private _setRadiosDefaultChecked(): void {
     if (this._defaultValue) {
       for (const radio of this._radios) {
         radio.defaultChecked = radio.value === this._defaultValue;
@@ -157,7 +155,7 @@ export default class IgcRadioGroupComponent extends LitElement {
     }
   }
 
-  private _setRadiosName() {
+  private _setRadiosName(): void {
     if (this._name) {
       for (const radio of this._radios) {
         radio.name = this._name;
@@ -165,13 +163,13 @@ export default class IgcRadioGroupComponent extends LitElement {
     }
   }
 
-  private _setDefaultValue() {
+  private _setDefaultValue(): void {
     for (const radio of this._radios) {
       radio.toggleAttribute('checked', radio.checked);
     }
   }
 
-  private _setSelectedRadio() {
+  private _setSelectedRadio(): void {
     for (const radio of this._radios) {
       radio.checked = radio.value === this._value;
     }
diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts
index 3265345c8..743620dcb 100644
--- a/src/components/radio/radio.spec.ts
+++ b/src/components/radio/radio.spec.ts
@@ -109,33 +109,6 @@ describe('Radio Component', () => {
       expect(input).dom.to.equal(`<input value="${value}"/>`, DIFF_OPTIONS);
     });
 
-    it('sets the checked property successfully', async () => {
-      const DIFF_OPTIONS = {
-        ignoreAttributes: [
-          'id',
-          'part',
-          'aria-disabled',
-          'aria-labelledby',
-          'tabindex',
-          'type',
-        ],
-      };
-
-      radio.checked = true;
-      expect(radio.checked).to.be.true;
-      await elementUpdated(radio);
-      expect(input).dom.to.equal(`<input aria-checked="true" />`, DIFF_OPTIONS);
-
-      radio.checked = false;
-      expect(radio.checked).to.be.false;
-      await elementUpdated(radio);
-
-      expect(input).dom.to.equal(
-        `<input aria-checked="false" />`,
-        DIFF_OPTIONS
-      );
-    });
-
     it('sets the disabled property successfully', async () => {
       const DIFF_OPTIONS = {
         ignoreAttributes: [
@@ -151,19 +124,13 @@ describe('Radio Component', () => {
       radio.disabled = true;
       expect(radio.disabled).to.be.true;
       await elementUpdated(radio);
-      expect(input).dom.to.equal(
-        `<input disabled aria-disabled="true" />`,
-        DIFF_OPTIONS
-      );
+      expect(input).dom.to.equal('<input disabled />', DIFF_OPTIONS);
 
       radio.disabled = false;
       expect(radio.disabled).to.be.false;
       await elementUpdated(radio);
 
-      expect(input).dom.to.equal(
-        `<input aria-disabled="false" />`,
-        DIFF_OPTIONS
-      );
+      expect(input).dom.to.equal('<input />', DIFF_OPTIONS);
     });
 
     it('sets the required property successfully', async () => {
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 04b6d0781..cd4ddaf20 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,8 +1,7 @@
-import { html, LitElement, type TemplateResult } from 'lit';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import {
@@ -12,6 +11,7 @@ import {
   arrowRight,
   arrowUp,
 } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -22,14 +22,7 @@ import {
   type FormValueOf,
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import {
-  createCounter,
-  isDefined,
-  isEmpty,
-  isLTR,
-  last,
-  wrap,
-} from '../common/util.js';
+import { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';
 import type { ToggleLabelPosition } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/radio.base.css.js';
@@ -52,6 +45,8 @@ export interface IgcRadioComponentEventMap {
   blur: FocusEvent;
 }
 
+let nextId = 1;
+
 /**
  * @element igc-radio
  *
@@ -80,22 +75,25 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
     registerComponent(IgcRadioComponent, IgcValidationContainerComponent);
   }
 
-  private static readonly increment = createCounter();
-
   protected override get __validators() {
     return radioValidators;
   }
 
+  private readonly _inputId = `radio-${nextId++}`;
+  private readonly _labelId = `radio-label-${this._inputId}`;
+  private readonly _focusRingManager = addKeyboardFocusRing(this);
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
+    onChange: this._handleSlotChange,
+    initial: true,
+  });
+
   protected override readonly _formValue: FormValueOf<boolean> =
     createFormValueState(this, {
       initialValue: false,
       transformers: defaultBooleanTransformers,
     });
 
-  private readonly _inputId = `radio-${IgcRadioComponent.increment()}`;
-  private readonly _labelId = `radio-label-${this._inputId}`;
-  private readonly _focusRingManager = addKeyboardFocusRing(this);
-
   protected _value!: string;
 
   @query('input', true)
@@ -202,16 +200,6 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
       .set(arrowDown, () => this._navigate(1));
   }
 
-  protected override createRenderRoot(): HTMLElement | DocumentFragment {
-    const root = super.createRenderRoot();
-    this._hideLabel = isEmpty(this._label);
-
-    root.addEventListener('slotchange', () => {
-      this._hideLabel = isEmpty(this._label);
-    });
-    return root;
-  }
-
   protected override async firstUpdated(): Promise<void> {
     await this.updateComplete;
 
@@ -225,6 +213,10 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
     }
   }
 
+  protected _handleSlotChange(): void {
+    this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);
+  }
+
   protected override _setDefaultValue(current: string | null): void {
     this._formValue.defaultValue = isDefined(current);
     for (const radio of this._siblings) {
@@ -346,6 +338,9 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
 
   protected override render() {
     const labelledBy = this.getAttribute('aria-labelledby');
+    const describedBy = this._slots.hasAssignedElements('helper-text')
+      ? 'helper-text'
+      : nothing;
     const checked = this.checked;
 
     return html`
@@ -362,25 +357,24 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
           type="radio"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
-          .required=${this.required}
-          .disabled=${this.disabled}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
           .checked=${live(checked)}
           tabindex=${this._tabIndex}
-          aria-checked=${checked}
-          aria-disabled=${this.disabled}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
+          aria-describedby=${describedBy}
           @click=${this._handleClick}
         />
         <span part=${partMap({ control: true, checked })}>
           <span
-            .hidden=${this.disabled}
             part=${partMap({ ripple: true, checked })}
+            ?hidden=${this.disabled}
           ></span>
         </span>
         <span
-          .hidden=${this._hideLabel}
-          part=${partMap({ label: true, checked })}
           id=${this._labelId}
+          part=${partMap({ label: true, checked })}
+          ?hidden=${this._hideLabel}
         >
           <slot></slot>
         </span>

From 120c56538ada1d25e3d092a46ad2df55efd9220f Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Thu, 3 Jul 2025 11:08:50 +0300
Subject: [PATCH 12/19] refactor(validation-container): Cached slot generation

---
 .../validation-container/validation-container.ts  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/validation-container/validation-container.ts b/src/components/validation-container/validation-container.ts
index a4e756323..d2c1317f8 100644
--- a/src/components/validation-container/validation-container.ts
+++ b/src/components/validation-container/validation-container.ts
@@ -1,5 +1,6 @@
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -25,6 +26,7 @@ interface ValidationContainerConfig {
 
 const VALIDATION_SLOTS_SELECTOR = 'slot:not([name="helper-text"])';
 const ALL_SLOTS_SELECTOR = 'slot';
+const QUERY_CONFIG: AssignedNodesOptions = { flatten: true };
 
 function getValidationSlots(
   element: IgcValidationContainerComponent
@@ -38,7 +40,7 @@ function hasProjection(element: IgcValidationContainerComponent): boolean {
   const allSlots =
     element.renderRoot.querySelectorAll<HTMLSlotElement>(ALL_SLOTS_SELECTOR);
   return Array.from(allSlots).every((slot) =>
-    isEmpty(slot.assignedElements({ flatten: true }))
+    isEmpty(slot.assignedElements(QUERY_CONFIG))
   );
 }
 
@@ -47,15 +49,14 @@ function hasProjectedValidation(
   slotName?: string
 ): boolean {
   const slots = Array.from(getValidationSlots(element));
-  const config: AssignedNodesOptions = { flatten: true };
 
   if (slotName) {
     return slots
       .filter((slot) => slot.name === slotName)
-      .some((slot) => !isEmpty(slot.assignedElements(config)));
+      .some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));
   }
 
-  return slots.some((slot) => !isEmpty(slot.assignedElements(config)));
+  return slots.some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));
 }
 
 /* blazorSuppress */
@@ -208,9 +209,9 @@ export default class IgcValidationContainerComponent extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    const slots = this.invalid
-      ? this._renderValidationSlots(this.target.validity)
-      : nothing;
+    const slots = cache(
+      this.invalid ? this._renderValidationSlots(this.target.validity) : nothing
+    );
 
     return html`
       <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>

From c1f14b4a835f7610d1ea8205de62c27b972765e1 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Thu, 3 Jul 2025 11:48:29 +0300
Subject: [PATCH 13/19] refactor(progress): Use SlotController

---
 src/components/progress/base.ts              | 49 +++++++++-----------
 src/components/progress/circular-gradient.ts |  3 +-
 src/components/progress/circular-progress.ts | 37 ++++++++-------
 src/components/progress/linear-progress.ts   |  9 +++-
 src/components/slider/slider-label.ts        |  2 +-
 5 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/components/progress/base.ts b/src/components/progress/base.ts
index f653c01f4..b2d145619 100644
--- a/src/components/progress/base.ts
+++ b/src/components/progress/base.ts
@@ -1,15 +1,11 @@
 import { html, LitElement, nothing } from 'lit';
-import {
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { addInternalsController } from '../common/controllers/internals.js';
+import type { SlotController } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { partMap } from '../common/part-map.js';
-import { asPercent, clamp, formatString, isEmpty } from '../common/util.js';
+import { asPercent, clamp, formatString } from '../common/util.js';
 import type { StyleVariant } from '../types.js';
 
 export abstract class IgcProgressBaseComponent extends LitElement {
@@ -21,8 +17,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     },
   });
 
-  @queryAssignedElements()
-  protected _assignedElements!: HTMLElement[];
+  protected abstract _slots: SlotController<any>;
 
   @query('[part="base"]', true)
   protected _base!: HTMLElement;
@@ -97,14 +92,14 @@ export abstract class IgcProgressBaseComponent extends LitElement {
   public labelFormat!: string;
 
   @watch('indeterminate')
-  protected indeterminateChange() {
+  protected _indeterminateChange(): void {
     if (!this.indeterminate) {
       this._updateProgress();
     }
   }
 
   @watch('max')
-  protected maxChange() {
+  protected _maxChange(): void {
     this.max = Math.max(0, this.max);
     if (this.value > this.max) {
       this.value = this.max;
@@ -116,7 +111,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
   }
 
   @watch('value')
-  protected valueChange() {
+  protected _valueChange(): void {
     this.value = clamp(this.value, 0, this.max);
 
     if (!this.indeterminate) {
@@ -124,18 +119,14 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     }
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
-  protected override updated() {
+  protected override updated(): void {
     this._updateARIA();
   }
 
-  private _updateARIA() {
-    const text = this.labelFormat ? this.renderLabelFormat() : `${this.value}%`;
+  private _updateARIA(): void {
+    const text = this.labelFormat
+      ? this._renderLabelFormat()
+      : `${this.value}%`;
 
     this._internals.setARIA({
       ariaValueMax: this.max.toString(),
@@ -144,7 +135,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     });
   }
 
-  private _updateProgress() {
+  private _updateProgress(): void {
     const percentage = asPercent(this.value, Math.max(1, this.max));
     const fractionValue = Math.round((percentage % 1) * 100);
     this._hasFraction = fractionValue > 0;
@@ -157,7 +148,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     };
   }
 
-  protected renderLabel() {
+  protected _renderLabel() {
     const parts = {
       label: true,
       value: true,
@@ -165,21 +156,23 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     };
 
     return this.labelFormat
-      ? html`<span part=${partMap(parts)}>${this.renderLabelFormat()}</span>`
+      ? html`<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`
       : html`<span part=${partMap({ ...parts, counter: true })}></span>`;
   }
 
-  protected renderLabelFormat() {
+  protected _renderLabelFormat(): string {
     return formatString(this.labelFormat, this.value, this.max);
   }
 
-  protected renderDefaultSlot() {
+  protected _renderDefaultSlot() {
     const hideDefaultLabel =
-      this.indeterminate || this.hideLabel || !isEmpty(this._assignedElements);
+      this.indeterminate ||
+      this.hideLabel ||
+      this._slots.hasAssignedElements('[default]');
 
     return html`
       <slot part="label"></slot>
-      ${hideDefaultLabel ? nothing : this.renderLabel()}
+      ${hideDefaultLabel ? nothing : this._renderLabel()}
     `;
   }
 }
diff --git a/src/components/progress/circular-gradient.ts b/src/components/progress/circular-gradient.ts
index 1fc0bf4ca..4aee272be 100644
--- a/src/components/progress/circular-gradient.ts
+++ b/src/components/progress/circular-gradient.ts
@@ -1,6 +1,5 @@
 import { LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-
 import { registerComponent } from '../common/definitions/register.js';
 
 /**
@@ -16,7 +15,7 @@ export default class IgcCircularGradientComponent extends LitElement {
   public static readonly tagName = 'igc-circular-gradient';
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcCircularGradientComponent);
   }
 
diff --git a/src/components/progress/circular-progress.ts b/src/components/progress/circular-progress.ts
index 6537068da..3c5065bd7 100644
--- a/src/components/progress/circular-progress.ts
+++ b/src/components/progress/circular-progress.ts
@@ -1,16 +1,17 @@
 import { html, svg } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter, isEmpty } from '../common/util.js';
 import { IgcProgressBaseComponent } from './base.js';
 import IgcCircularGradientComponent from './circular-gradient.js';
 import { styles } from './themes/circular/circular.progress.base.css.js';
 import { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';
 import { all } from './themes/circular/themes.js';
 
+let nextId = 1;
+
 /**
  * A circular progress indicator used to express unspecified wait time or display
  * the length of a process.
@@ -38,32 +39,34 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
   public static readonly tagName = 'igc-circular-progress';
   public static override styles = [styles, shared];
 
-  private static readonly increment = createCounter();
-
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(
       IgcCircularProgressComponent,
       IgcCircularGradientComponent
     );
   }
 
-  private _gradientId = `circular-progress-${IgcCircularProgressComponent.increment()}`;
-
-  @queryAssignedElements({ slot: 'gradient' })
-  private _assignedGradients!: IgcCircularGradientComponent[];
+  private readonly _gradientId = `circular-progress-${nextId++}`;
+  protected override readonly _slots = addSlotController(this, {
+    slots: setSlots('gradient'),
+  });
 
   constructor() {
     super();
     addThemingController(this, all);
   }
 
-  protected renderSvg() {
-    const gradients = !isEmpty(this._assignedGradients)
-      ? this._assignedGradients.map(
-          ({ offset, color, opacity }) =>
-            svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`
-        )
+  protected _renderSvg() {
+    const gradients = this._slots.hasAssignedElements('gradient')
+      ? this._slots
+          .getAssignedElements<IgcCircularGradientComponent>('gradient', {
+            selector: IgcCircularGradientComponent.tagName,
+          })
+          .map(
+            ({ offset, color, opacity }) =>
+              svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`
+          )
       : svg`
         <stop offset="0%" part="gradient_start" />
         <stop offset="100%" part="gradient_end" />
@@ -85,10 +88,10 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
     return html`
       <div part="base" style=${styleMap(this._styleInfo)}>
         <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>
-          ${this.renderSvg()}
+          ${this._renderSvg()}
         </svg>
         <slot name="gradient"></slot>
-        ${this.renderDefaultSlot()}
+        ${this._renderDefaultSlot()}
       </div>
     `;
   }
diff --git a/src/components/progress/linear-progress.ts b/src/components/progress/linear-progress.ts
index 09424f236..a91fffdb0 100644
--- a/src/components/progress/linear-progress.ts
+++ b/src/components/progress/linear-progress.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import type { LinearProgressLabelAlign } from '../types.js';
@@ -35,10 +36,14 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcLinearProgressComponent);
   }
 
+  protected override readonly _slots = addSlotController(this, {
+    slots: setSlots(),
+  });
+
   /**
    * Sets the striped look of the control.
    * @attr
@@ -72,7 +77,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
           <div part=${partMap(parts)}></div>
           <div part=${partMap({ ...parts, secondary: true })}></div>
         </div>
-        ${this.renderDefaultSlot()}
+        ${this._renderDefaultSlot()}
       </div>
     `;
   }
diff --git a/src/components/slider/slider-label.ts b/src/components/slider/slider-label.ts
index d5ec47928..eaae32fd9 100644
--- a/src/components/slider/slider-label.ts
+++ b/src/components/slider/slider-label.ts
@@ -21,7 +21,7 @@ export default class IgcSliderLabelComponent extends LitElement {
   `;
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcSliderLabelComponent);
   }
 

From 1adc67f239ad6e44dc442d3eb0bc7f815f40df3e Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 8 Jul 2025 09:43:14 +0300
Subject: [PATCH 14/19] refactor(select): Use SlotController and code clean-ups

---
 src/components/select/select.spec.ts |  16 +-
 src/components/select/select.ts      | 382 +++++++++++++++------------
 2 files changed, 213 insertions(+), 185 deletions(-)

diff --git a/src/components/select/select.spec.ts b/src/components/select/select.spec.ts
index 4e4f3664e..033f3cc3a 100644
--- a/src/components/select/select.spec.ts
+++ b/src/components/select/select.spec.ts
@@ -1,11 +1,5 @@
-import {
-  aTimeout,
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-} from '@open-wc/testing';
-import { spy } from 'sinon';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { spy, useFakeTimers } from 'sinon';
 
 import {
   altKey,
@@ -875,16 +869,20 @@ describe('Select', () => {
     });
 
     it('resumes search after default timeout', async () => {
+      const clock = useFakeTimers({ now: 0, toFake: ['Date'] });
+
       simulateKeyboard(select, 'null'.split(''));
       await elementUpdated(select);
 
       expect(select.selectedItem).to.be.null;
 
-      await aTimeout(501);
+      await clock.tickAsync(501);
+
       simulateKeyboard(select, 'impl'.split(''));
       await elementUpdated(select);
 
       expect(select.selectedItem?.value).to.equal('implementation');
+      clock.restore();
     });
 
     it('activates the correct item when searching with character keys (open state)', async () => {
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 18820edb1..609b8e916 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,12 +1,6 @@
 import { html, type TemplateResult } from 'lit';
-import {
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-
 import { addThemingController } from '../../theming/theming-controller.js';
 import {
   addKeybindings,
@@ -24,6 +18,7 @@ import {
 } from '../common/controllers/key-bindings.js';
 import { addRootClickController } from '../common/controllers/root-click.js';
 import { addRootScrollHandler } from '../common/controllers/root-scroll.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -46,7 +41,6 @@ import { partMap } from '../common/part-map.js';
 import {
   addSafeEventListener,
   findElementFromEventPath,
-  isEmpty,
   isString,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -77,6 +71,19 @@ export interface IgcSelectComponentEventMap {
   igcClosed: CustomEvent<void>;
 }
 
+const Slots = setSlots(
+  'prefix',
+  'suffix',
+  'header',
+  'footer',
+  'helper-text',
+  'toggle-icon',
+  'toggle-icon-expanded',
+  'value-missing',
+  'custom-error',
+  'invalid'
+);
+
 /**
  * Represents a control that provides a menu of options.
  *
@@ -121,7 +128,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   public static styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(
       IgcSelectComponent,
       IgcIconComponent,
@@ -133,10 +140,25 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     );
   }
 
+  //#region Internal state
+
+  protected override get __validators() {
+    return selectValidators;
+  }
+
+  private _searchTerm = '';
+  private _lastKeyTime = 0;
+
+  private readonly _slots = addSlotController(this, { slots: Slots });
+
+  private readonly _rootScrollController = addRootScrollHandler(this, {
+    hideCallback: this._handleClosing,
+  });
+
   protected override readonly _rootClickController = addRootClickController(
     this,
     {
-      onHide: this.handleClosing,
+      onHide: this._handleClosing,
     }
   );
 
@@ -149,43 +171,27 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
       },
     });
 
-  private _searchTerm = '';
-  private _lastKeyTime = 0;
-
-  private _rootScrollController = addRootScrollHandler(this, {
-    hideCallback: this.handleClosing,
-  });
-
-  private get _activeItems() {
-    return Array.from(
-      getActiveItems<IgcSelectItemComponent>(
-        this,
-        IgcSelectItemComponent.tagName
-      )
-    );
-  }
-
   @state()
   protected _selectedItem: IgcSelectItemComponent | null = null;
 
   @state()
   protected _activeItem!: IgcSelectItemComponent;
 
-  protected override get __validators() {
-    return selectValidators;
-  }
-
   @query(IgcInputComponent.tagName, true)
   protected _input!: IgcInputComponent;
 
-  @queryAssignedElements({ slot: 'suffix' })
-  protected _inputSuffix!: Array<HTMLElement>;
+  protected get _activeItems(): IgcSelectItemComponent[] {
+    return Array.from(
+      getActiveItems<IgcSelectItemComponent>(
+        this,
+        IgcSelectItemComponent.tagName
+      )
+    );
+  }
 
-  @queryAssignedElements({ slot: 'prefix' })
-  protected _inputPrefix!: Array<HTMLElement>;
+  //#endregion
 
-  @queryAssignedElements({ slot: 'toggle-icon-expanded' })
-  protected _expandedIconSlot!: Array<HTMLElement>;
+  //#region Public attributes and properties
 
   /* @tsTwoWayProperty(true, "igcChange", "detail.value", false) */
   /**
@@ -195,8 +201,8 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   @property()
   public set value(value: string | undefined) {
     this._updateValue(value);
-    const item = this.getItem(this._formValue.value!);
-    item ? this.setSelectedItem(item) : this.clearSelectedItem();
+    const item = this._getItem(this._formValue.value!);
+    item ? this._setSelectedItem(item) : this._clearSelectedItem();
   }
 
   public get value(): string | undefined {
@@ -252,31 +258,35 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   public scrollStrategy: PopoverScrollStrategy = 'scroll';
 
   /** Returns the items of the igc-select component. */
-  public get items() {
+  public get items(): IgcSelectItemComponent[] {
     return Array.from(
       getItems<IgcSelectItemComponent>(this, IgcSelectItemComponent.tagName)
     );
   }
 
   /** Returns the groups of the igc-select component. */
-  public get groups() {
+  public get groups(): IgcSelectGroupComponent[] {
     return Array.from(
       getItems<IgcSelectGroupComponent>(this, IgcSelectGroupComponent.tagName)
     );
   }
 
   /** Returns the selected item from the dropdown or null.  */
-  public get selectedItem() {
+  public get selectedItem(): IgcSelectItemComponent | null {
     return this._selectedItem;
   }
 
+  //#endregion
+
+  //#region Life-cycle hooks and watchers
+
   @watch('scrollStrategy', { waitUntilFirstUpdate: true })
-  protected scrollStrategyChanged() {
+  protected _scrollStrategyChange(): void {
     this._rootScrollController.update({ resetListeners: true });
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
-  protected openChange() {
+  protected _openChange(): void {
     this._rootClickController.update();
     this._rootScrollController.update();
   }
@@ -290,36 +300,30 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
       skip: () => this.disabled,
       bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
     })
-      .set([altKey, arrowDown], this.altArrowDown)
-      .set([altKey, arrowUp], this.altArrowUp)
-      .set(arrowDown, this.onArrowDown)
-      .set(arrowUp, this.onArrowUp)
-      .set(arrowLeft, this.onArrowUp)
-      .set(arrowRight, this.onArrowDown)
-      .set(tabKey, this.onTabKey, { preventDefault: false })
-      .set(escapeKey, this.onEscapeKey)
-      .set(homeKey, this.onHomeKey)
-      .set(endKey, this.onEndKey)
-      .set(spaceBar, this.onSpaceBarKey)
-      .set(enterKey, this.onEnterKey);
-
-    addSafeEventListener(this, 'keydown', this.handleSearch);
-    addSafeEventListener(this, 'focusin', this.handleFocusIn);
-    addSafeEventListener(this, 'focusout', this.handleFocusOut);
-  }
-
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
-  protected override async firstUpdated() {
+      .set([altKey, arrowDown], this._handleAltArrowDown)
+      .set([altKey, arrowUp], this._handleAltArrowUp)
+      .set(arrowDown, this._handleArrowDown)
+      .set(arrowUp, this._handleArrowUp)
+      .set(arrowLeft, this._handleArrowUp)
+      .set(arrowRight, this._handleArrowDown)
+      .set(tabKey, this._handleTab, { preventDefault: false })
+      .set(escapeKey, this._handleEscape)
+      .set(homeKey, this._handleHome)
+      .set(endKey, this._handleEnd)
+      .set(spaceBar, this._handleSpace)
+      .set(enterKey, this._handleEnter);
+
+    addSafeEventListener(this, 'keydown', this._handleSearch);
+    addSafeEventListener(this, 'focusin', this._handleFocusIn);
+    addSafeEventListener(this, 'focusout', this._handleFocusOut);
+  }
+
+  protected override async firstUpdated(): Promise<void> {
     await this.updateComplete;
     const selected = setInitialSelectionState(this.items);
 
     if (this.value && !selected) {
-      this._selectItem(this.getItem(this.value), false);
+      this._selectItem(this._getItem(this.value), false);
     }
 
     if (selected && selected.value !== this.value) {
@@ -334,37 +338,11 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     this._updateValidity();
   }
 
-  private handleFocusIn({ relatedTarget }: FocusEvent) {
-    this._dirty = true;
-
-    if (this.contains(relatedTarget as Node) || this.open) {
-      return;
-    }
-  }
-
-  private handleFocusOut({ relatedTarget }: FocusEvent) {
-    if (this.contains(relatedTarget as Node)) {
-      return;
-    }
+  //#endregion
 
-    this.checkValidity();
-  }
+  //#region Keyboard event handlers
 
-  private handleClick(event: MouseEvent) {
-    const item = findElementFromEventPath<IgcSelectItemComponent>(
-      IgcSelectItemComponent.tagName,
-      event
-    );
-    if (item && this._activeItems.includes(item)) {
-      this._selectItem(item);
-    }
-  }
-
-  private handleChange(item: IgcSelectItemComponent) {
-    return this.emitEvent('igcChange', { detail: item });
-  }
-
-  private handleSearch(event: KeyboardEvent) {
+  private _handleSearch(event: KeyboardEvent): void {
     if (!/^.$/u.test(event.key)) {
       return;
     }
@@ -384,58 +362,53 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     );
 
     if (item) {
-      this.open ? this.activateItem(item) : this._selectItem(item);
+      this.open ? this._activateItem(item) : this._selectItem(item);
       this._activeItem.focus();
     }
   }
 
-  protected override handleAnchorClick(): void {
-    super.handleAnchorClick();
-    this.focusItemOnOpen();
-  }
-
-  private onEnterKey() {
+  private _handleEnter(): void {
     this.open && this._activeItem
       ? this._selectItem(this._activeItem)
       : this.handleAnchorClick();
   }
 
-  private onSpaceBarKey() {
+  private _handleSpace(): void {
     if (!this.open) {
       this.handleAnchorClick();
     }
   }
 
-  private onArrowDown() {
+  private _handleArrowDown(): void {
     const item = getNextActiveItem(this.items, this._activeItem);
     this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
   }
 
-  private onArrowUp() {
+  private _handleArrowUp(): void {
     const item = getPreviousActiveItem(this.items, this._activeItem);
     this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
   }
 
-  private altArrowDown() {
+  private _handleAltArrowDown(): void {
     if (!this.open) {
       this._show(true);
-      this.focusItemOnOpen();
+      this._focusItemOnOpen();
     }
   }
 
-  private async altArrowUp() {
+  private async _handleAltArrowUp(): Promise<void> {
     if (this.open && (await this._hide(true))) {
       this._input.focus();
     }
   }
 
-  protected async onEscapeKey() {
+  private async _handleEscape(): Promise<void> {
     if (await this._hide(true)) {
       this._input.focus();
     }
   }
 
-  private onTabKey(event: KeyboardEvent) {
+  private _handleTab(event: KeyboardEvent): void {
     if (this.open) {
       event.preventDefault();
       this._selectItem(this._activeItem ?? this._selectedItem);
@@ -443,21 +416,64 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     }
   }
 
-  protected onHomeKey() {
+  private _handleHome(): void {
     const item = this._activeItems.at(0);
     this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
   }
 
-  protected onEndKey() {
+  private _handleEnd(): void {
     const item = this._activeItems.at(-1);
     this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
   }
 
-  protected handleClosing() {
+  //#endregion
+
+  //#region Event listeners
+
+  private _handleFocusIn({ relatedTarget }: FocusEvent): void {
+    this._dirty = true;
+
+    if (this.contains(relatedTarget as Node) || this.open) {
+      return;
+    }
+  }
+
+  private _handleFocusOut({ relatedTarget }: FocusEvent): void {
+    if (this.contains(relatedTarget as Node)) {
+      return;
+    }
+
+    this.checkValidity();
+  }
+
+  private _handleClick(event: PointerEvent): void {
+    const item = findElementFromEventPath<IgcSelectItemComponent>(
+      IgcSelectItemComponent.tagName,
+      event
+    );
+    if (item && this._activeItems.includes(item)) {
+      this._selectItem(item);
+    }
+  }
+
+  private _handleChange(item: IgcSelectItemComponent): boolean {
+    return this.emitEvent('igcChange', { detail: item });
+  }
+
+  private _handleClosing(): void {
     this._hide(true);
   }
 
-  private activateItem(item: IgcSelectItemComponent) {
+  protected override handleAnchorClick(): void {
+    super.handleAnchorClick();
+    this._focusItemOnOpen();
+  }
+
+  //#endregion
+
+  //#region Internal API
+
+  private _activateItem(item: IgcSelectItemComponent): void {
     if (this._activeItem) {
       this._activeItem.active = false;
     }
@@ -466,7 +482,9 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     this._activeItem.active = true;
   }
 
-  private setSelectedItem(item: IgcSelectItemComponent) {
+  private _setSelectedItem(
+    item: IgcSelectItemComponent
+  ): IgcSelectItemComponent {
     if (this._selectedItem) {
       this._selectedItem.selected = false;
     }
@@ -477,9 +495,12 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     return this._selectedItem;
   }
 
-  private _selectItem(item?: IgcSelectItemComponent, emit = true) {
+  private _selectItem(
+    item?: IgcSelectItemComponent,
+    emit = true
+  ): IgcSelectItemComponent | null {
     if (!item) {
-      this.clearSelectedItem();
+      this._clearSelectedItem();
       this._updateValue();
       return null;
     }
@@ -492,60 +513,64 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
       return this._selectedItem;
     }
 
-    const newItem = this.setSelectedItem(item);
-    this.activateItem(newItem);
+    const newItem = this._setSelectedItem(item);
+    this._activateItem(newItem);
     this._updateValue(newItem.value);
 
-    if (emit) this.handleChange(newItem);
+    if (emit) this._handleChange(newItem);
     if (shouldFocus) this._input.focus();
     if (shouldHide) this._hide(true);
 
     return this._selectedItem;
   }
 
-  private _navigateToActiveItem(item?: IgcSelectItemComponent) {
+  private _navigateToActiveItem(item?: IgcSelectItemComponent): void {
     if (item) {
-      this.activateItem(item);
+      this._activateItem(item);
       this._activeItem.focus({ preventScroll: true });
       item.scrollIntoView({ behavior: 'auto', block: 'nearest' });
     }
   }
 
-  private _updateValue(value?: string) {
+  private _updateValue(value?: string): void {
     this._formValue.setValueAndFormState(value!);
     this._validate();
   }
 
-  private clearSelectedItem() {
+  private _clearSelectedItem(): void {
     if (this._selectedItem) {
       this._selectedItem.selected = false;
     }
     this._selectedItem = null;
   }
 
-  private async focusItemOnOpen() {
+  private async _focusItemOnOpen(): Promise<void> {
     await this.updateComplete;
     (this._selectedItem || this._activeItem)?.focus();
   }
 
-  protected getItem(value: string) {
+  private _getItem(value: string): IgcSelectItemComponent | undefined {
     return this.items.find((item) => item.value === value);
   }
 
+  //#endregion
+
+  //#region Public API
+
   /* alternateName: focusComponent */
   /** Sets focus on the component. */
-  public override focus(options?: FocusOptions) {
+  public override focus(options?: FocusOptions): void {
     this._input.focus(options);
   }
 
   /* alternateName: blurComponent */
   /** Removes focus from the component. */
-  public override blur() {
+  public override blur(): void {
     this._input.blur();
   }
 
   /** Checks the validity of the control and moves the focus to it if it is not valid. */
-  public override reportValidity() {
+  public override reportValidity(): boolean {
     const valid = super.reportValidity();
     if (!valid) this._input.focus();
     return valid;
@@ -560,7 +585,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   /* blazorSuppress */
   /** Navigates to the specified item. If it exists, returns the found item, otherwise - null. */
   public navigateTo(value: string | number): IgcSelectItemComponent | null {
-    const item = isString(value) ? this.getItem(value) : this.items[value];
+    const item = isString(value) ? this._getItem(value) : this.items[value];
 
     if (item) {
       this._navigateToActiveItem(item);
@@ -578,50 +603,50 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   /* blazorSuppress */
   /** Selects the specified item. If it exists, returns the found item, otherwise - null. */
   public select(value: string | number): IgcSelectItemComponent | null {
-    const item = isString(value) ? this.getItem(value) : this.items[value];
+    const item = isString(value) ? this._getItem(value) : this.items[value];
     return item ? this._selectItem(item, false) : null;
   }
 
   /**  Resets the current value and selection of the component. */
-  public clearSelection() {
+  public clearSelection(): void {
     this._updateValue();
-    this.clearSelectedItem();
+    this._clearSelectedItem();
   }
 
-  protected renderInputSlots() {
-    const prefixName = isEmpty(this._inputPrefix) ? '' : 'prefix';
-    const suffixName = isEmpty(this._inputSuffix) ? '' : 'suffix';
+  //#endregion
+
+  protected _renderInputSlots() {
+    const prefix = this._slots.hasAssignedElements('prefix') ? 'prefix' : '';
+    const suffix = this._slots.hasAssignedElements('suffix') ? 'suffix' : '';
 
     return html`
-      <span slot=${prefixName}>
+      <span slot=${prefix}>
         <slot name="prefix"></slot>
       </span>
 
-      <span slot=${suffixName}>
+      <span slot=${suffix}>
         <slot name="suffix"></slot>
       </span>
     `;
   }
 
-  protected renderToggleIcon() {
+  protected _renderToggleIcon() {
     const parts = { 'toggle-icon': true, filled: !!this.value };
-    const iconHidden = this.open && !isEmpty(this._expandedIconSlot);
-    const iconExpandedHidden = !iconHidden;
+    const iconName = this.open ? 'input_collapse' : 'input_expand';
+    const iconHidden =
+      this.open && this._slots.hasAssignedElements('toggle-icon-expanded');
 
     return html`
       <span slot="suffix" part=${partMap(parts)} aria-hidden="true">
         <slot name="toggle-icon" ?hidden=${iconHidden}>
-          <igc-icon
-            name=${this.open ? 'input_collapse' : 'input_expand'}
-            collection="default"
-          ></igc-icon>
+          <igc-icon name=${iconName} collection="default"></igc-icon>
         </slot>
-        <slot name="toggle-icon-expanded" ?hidden=${iconExpandedHidden}></slot>
+        <slot name="toggle-icon-expanded" ?hidden=${!iconHidden}></slot>
       </span>
     `;
   }
 
-  protected renderHelperText(): TemplateResult {
+  protected _renderHelperText(): TemplateResult {
     return IgcValidationContainerComponent.create(this, {
       id: 'select-helper-text',
       slot: 'anchor',
@@ -629,7 +654,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     });
   }
 
-  protected renderInputAnchor() {
+  protected _renderInputAnchor() {
     const value = this.selectedItem?.textContent?.trim();
 
     return html`
@@ -640,7 +665,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
         readonly
         aria-controls="dropdown"
         aria-describedby="select-helper-text"
-        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-expanded=${this.open}
         exportparts="container: input, input: native-input, label, prefix, suffix"
         tabIndex=${this.disabled ? -1 : 0}
         value=${ifDefined(value)}
@@ -652,39 +677,44 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
         .outlined=${this.outlined}
         @click=${this.handleAnchorClick}
       >
-        ${this.renderInputSlots()} ${this.renderToggleIcon()}
+        ${this._renderInputSlots()} ${this._renderToggleIcon()}
       </igc-input>
 
-      ${this.renderHelperText()}
+      ${this._renderHelperText()}
     `;
   }
 
-  protected renderDropdown() {
-    return html`<div part="base" .inert=${!this.open}>
-      <div
-        id="dropdown"
-        role="listbox"
-        part="list"
-        aria-labelledby="input"
-        @click=${this.handleClick}
-      >
-        <slot name="header"></slot>
-        <slot></slot>
-        <slot name="footer"></slot>
+  protected _renderDropdown() {
+    return html`
+      <div part="base" .inert=${!this.open}>
+        <div
+          id="dropdown"
+          role="listbox"
+          part="list"
+          aria-labelledby="input"
+          @click=${this._handleClick}
+        >
+          <slot name="header"></slot>
+          <slot></slot>
+          <slot name="footer"></slot>
+        </div>
       </div>
-    </div>`;
+    `;
   }
 
   protected override render() {
-    return html`<igc-popover
-      ?open=${this.open}
-      flip
-      shift
-      same-width
-      .offset=${this.distance}
-      .placement=${this.placement}
-      >${this.renderInputAnchor()} ${this.renderDropdown()}
-    </igc-popover>`;
+    return html`
+      <igc-popover
+        ?open=${this.open}
+        flip
+        shift
+        same-width
+        .offset=${this.distance}
+        .placement=${this.placement}
+      >
+        ${this._renderInputAnchor()} ${this._renderDropdown()}
+      </igc-popover>
+    `;
   }
 }
 

From 4904b58d99fa6ec9a1537d96ccaf817fc10acdde Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 8 Jul 2025 10:05:51 +0300
Subject: [PATCH 15/19] refactor(tile): Use SlotController

---
 src/components/tile-manager/tile.ts | 89 ++++++++++++-----------------
 1 file changed, 37 insertions(+), 52 deletions(-)

diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
index 27a5b2f57..e2db20167 100644
--- a/src/components/tile-manager/tile.ts
+++ b/src/components/tile-manager/tile.ts
@@ -1,10 +1,5 @@
 import { html, LitElement, nothing } from 'lit';
-import {
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { startViewTransition } from '../../animations/player.js';
 import { addThemingController } from '../../theming/theming-controller.js';
@@ -19,17 +14,12 @@ import {
   type DragCallbackParameters,
 } from '../common/controllers/drag.js';
 import { addFullscreenController } from '../common/controllers/fullscreen.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
-import {
-  asNumber,
-  createCounter,
-  findElementFromEventPath,
-  isEmpty,
-  isLTR,
-} from '../common/util.js';
+import { asNumber, findElementFromEventPath, isLTR } from '../common/util.js';
 import IgcDividerComponent from '../divider/divider.js';
 import IgcResizeContainerComponent from '../resize-container/resize-container.js';
 import type { ResizeCallbackParams } from '../resize-container/types.js';
@@ -60,6 +50,17 @@ export interface IgcTileComponentEventMap {
   igcTileResizeCancel: CustomEvent<IgcTileComponent>;
 }
 
+let nextId = 1;
+const Slots = setSlots(
+  'title',
+  'maximize-action',
+  'fullscreen-action',
+  'actions',
+  'side-adorner',
+  'corner-adorner',
+  'bottom-adorner'
+);
+
 /**
  * The tile component is used within the `igc-tile-manager` as a container
  * for displaying various types of information.
@@ -101,7 +102,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   public static styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(
       IgcTileComponent,
       IgcIconButtonComponent,
@@ -110,9 +111,9 @@ export default class IgcTileComponent extends EventEmitterMixin<
     );
   }
 
-  private static readonly increment = createCounter();
+  private readonly _slots = addSlotController(this, { slots: Slots });
 
-  private _dragController = addDragController(this, {
+  private readonly _dragController = addDragController(this, {
     skip: this._skipDrag,
     matchTarget: this._match,
     ghost: this._createDragGhost,
@@ -122,26 +123,19 @@ export default class IgcTileComponent extends EventEmitterMixin<
     cancel: this._handleDragCancel,
   });
 
-  private _fullscreenController = addFullscreenController(this, {
+  private readonly _fullscreenController = addFullscreenController(this, {
     enter: this._emitFullScreenEvent,
     exit: this._emitFullScreenEvent,
   });
 
+  private readonly _resizeState = createTileResizeState();
+  private readonly _dragStack = createTileDragStack();
+
   private _colSpan = 1;
   private _rowSpan = 1;
   private _colStart: number | null = null;
   private _rowStart: number | null = null;
   private _position = -1;
-  private _resizeState = createTileResizeState();
-  private _dragStack = createTileDragStack();
-
-  private _customAdorners = new Map<string, boolean>(
-    Object.entries({
-      side: false,
-      corner: false,
-      bottom: false,
-    })
-  );
 
   // Tile manager context properties and helpers
 
@@ -159,7 +153,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
     });
   };
 
-  private _context = createAsyncContext(
+  private readonly _context = createAsyncContext(
     this,
     tileManagerContext,
     this._setDragConfiguration
@@ -184,16 +178,10 @@ export default class IgcTileComponent extends EventEmitterMixin<
     return this._tileManager?.resizeMode ?? 'none';
   }
 
-  protected _headerRef = createRef<HTMLElement>();
-
-  @queryAssignedElements({ slot: 'title' })
-  private _titleElements!: HTMLElement[];
-
-  @queryAssignedElements({ slot: 'actions' })
-  private _actionsElements!: HTMLElement[];
+  protected readonly _headerRef = createRef<HTMLElement>();
 
   @query(IgcResizeContainerComponent.tagName)
-  protected _resizeContainer?: IgcResizeContainerComponent;
+  protected readonly _resizeContainer?: IgcResizeContainerComponent;
 
   @query('[part~="base"]', true)
   public _tileContent!: HTMLElement;
@@ -374,7 +362,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   /** @internal */
   public override connectedCallback(): void {
     super.connectedCallback();
-    this.id = this.id || `tile-${IgcTileComponent.increment()}`;
+    this.id = this.id || `tile-${nextId++}`;
 
     this.style.viewTransitionName =
       this.style.viewTransitionName || `tile-transition-${this.id}`;
@@ -632,11 +620,13 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   protected _renderHeader() {
+    const hasNoContent = !(
+      this._slots.hasAssignedElements('title') &&
+      this._slots.hasAssignedElements('actions')
+    );
+
     const hideHeader =
-      isEmpty(this._titleElements) &&
-      isEmpty(this._actionsElements) &&
-      this.disableMaximize &&
-      this.disableFullscreen;
+      hasNoContent && this.disableMaximize && this.disableFullscreen;
 
     const hasMaximizeSlot = !(this.disableMaximize || this.fullscreen);
     const hasFullscreenSlot = !this.disableFullscreen;
@@ -692,14 +682,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   private _renderAdornerSlot(name: AdornerType) {
-    return html`
-      <slot
-        @slotchange=${() => this._customAdorners.set(name, true)}
-        name="${name}-adorner"
-        slot="${name}-adorner"
-      >
-      </slot>
-    `;
+    return html`<slot name="${name}-adorner" slot="${name}-adorner"></slot>`;
   }
 
   protected override render() {
@@ -711,9 +694,11 @@ export default class IgcTileComponent extends EventEmitterMixin<
           <igc-resize
             part=${partMap({
               resize: true,
-              'side-adorner': this._customAdorners.get('side')!,
-              'corner-adorner': this._customAdorners.get('corner')!,
-              'bottom-adorner': this._customAdorners.get('bottom')!,
+              'side-adorner': this._slots.hasAssignedElements('side-adorner'),
+              'corner-adorner':
+                this._slots.hasAssignedElements('corner-adorner'),
+              'bottom-adorner':
+                this._slots.hasAssignedElements('bottom-adorner'),
             })}
             exportparts="trigger-side, trigger, trigger-bottom"
             mode="deferred"

From 4eedcc0d0948d2f4c6dc1fa33eba125cb4b67f6e Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 8 Jul 2025 10:19:32 +0300
Subject: [PATCH 16/19] chore(tile): Removed obsolete createRenderRoot

---
 src/components/tile-manager/tile.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
index e2db20167..a6bb558fa 100644
--- a/src/components/tile-manager/tile.ts
+++ b/src/components/tile-manager/tile.ts
@@ -368,12 +368,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
       this.style.viewTransitionName || `tile-transition-${this.id}`;
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
   private _setDragState(state = true) {
     this._isDragging = state;
     this._tileContent.style.opacity = state ? '0' : '';

From d743f9a105481380451a5d1b90ba8cb538ffd16b Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Wed, 9 Jul 2025 10:42:40 +0300
Subject: [PATCH 17/19] refactor(carousel): Use SlotController and code
 clean-ups

---
 src/components/carousel/carousel-indicator.ts |   2 +-
 src/components/carousel/carousel-slide.ts     |  44 +-
 src/components/carousel/carousel.ts           | 398 ++++++++++--------
 3 files changed, 245 insertions(+), 199 deletions(-)

diff --git a/src/components/carousel/carousel-indicator.ts b/src/components/carousel/carousel-indicator.ts
index 3cd66781c..b7b8e05e9 100644
--- a/src/components/carousel/carousel-indicator.ts
+++ b/src/components/carousel/carousel-indicator.ts
@@ -35,7 +35,7 @@ export default class IgcCarouselIndicatorComponent extends LitElement {
   });
 
   @consume({ context: carouselContext, subscribe: true })
-  private _carousel?: IgcCarouselComponent;
+  private readonly _carousel?: IgcCarouselComponent;
 
   protected get _labelFormat(): string {
     return this._carousel ? this._carousel.indicatorsLabelFormat : '';
diff --git a/src/components/carousel/carousel-slide.ts b/src/components/carousel/carousel-slide.ts
index d8284058d..3ed39f941 100644
--- a/src/components/carousel/carousel-slide.ts
+++ b/src/components/carousel/carousel-slide.ts
@@ -6,11 +6,13 @@ import { addAnimationController } from '../../animations/player.js';
 import { carouselContext } from '../common/context.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, formatString } from '../common/util.js';
+import { formatString } from '../common/util.js';
 import { animations } from './animations.js';
 import type IgcCarouselComponent from './carousel.js';
 import { styles } from './themes/carousel-slide.base.css.js';
 
+let nextId = 1;
+
 /**
  * A single content container within a set of containers used in the context of an `igc-carousel`.
  *
@@ -27,8 +29,6 @@ export default class IgcCarouselSlideComponent extends LitElement {
     registerComponent(IgcCarouselSlideComponent);
   }
 
-  private static readonly increment = createCounter();
-
   private readonly _internals = addInternalsController(this, {
     initialARIA: {
       role: 'tabpanel',
@@ -36,16 +36,16 @@ export default class IgcCarouselSlideComponent extends LitElement {
     },
   });
 
-  private readonly _animationPlayer = addAnimationController(this);
+  private readonly _player = addAnimationController(this);
 
   @consume({ context: carouselContext, subscribe: true })
-  private _carousel?: IgcCarouselComponent;
+  private readonly _carousel?: IgcCarouselComponent;
 
-  protected get _index() {
+  protected get _index(): number {
     return this._carousel ? this._carousel.slides.indexOf(this) : 0;
   }
 
-  protected get _total() {
+  protected get _total(): number {
     return this._carousel ? this._carousel.slides.length : 0;
   }
 
@@ -59,7 +59,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
     return animation;
   }
 
-  protected get _labelFormat() {
+  protected get _labelFormat(): string {
     return this._carousel ? this._carousel.slidesLabelFormat : '';
   }
 
@@ -81,21 +81,16 @@ export default class IgcCarouselSlideComponent extends LitElement {
   public async toggleAnimation(
     type: 'in' | 'out',
     direction: 'normal' | 'reverse' = 'normal'
-  ) {
+  ): Promise<boolean> {
     const animation = animations.get(this._animation)!.get(type)!;
 
-    const options: KeyframeAnimationOptions = {
-      duration: 320,
-      easing: EaseInOut.Quad,
-      direction,
-    };
-
-    const [_, event] = await Promise.all([
-      this._animationPlayer.stopAll(),
-      this._animationPlayer.play(animation(options)),
-    ]);
-
-    return event.type === 'finish';
+    return await this._player.playExclusive(
+      animation({
+        duration: 320,
+        easing: EaseInOut.Quad,
+        direction,
+      })
+    );
   }
 
   protected override willUpdate(): void {
@@ -104,15 +99,14 @@ export default class IgcCarouselSlideComponent extends LitElement {
     });
   }
 
+  /** @internal */
   public override connectedCallback(): void {
     super.connectedCallback();
-
-    this.id =
-      this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;
+    this.id = this.id || `igc-carousel-slide-${nextId++}`;
   }
 
   protected override render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 }
 
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 2e1c4617c..9c895c4b9 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -1,12 +1,7 @@
 import { ContextProvider } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import {
-  property,
-  queryAll,
-  queryAssignedElements,
-  state,
-} from 'lit/decorators.js';
-
+import { property, queryAll, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
@@ -28,6 +23,12 @@ import {
   createMutationController,
   type MutationControllerParams,
 } from '../common/controllers/mutation-observer.js';
+import {
+  addSlotController,
+  type InferSlotNames,
+  type SlotChangeCallbackParameters,
+  setSlots,
+} from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
@@ -36,10 +37,10 @@ import { partMap } from '../common/part-map.js';
 import {
   addSafeEventListener,
   asNumber,
-  createCounter,
   findElementFromEventPath,
   first,
   formatString,
+  isEmpty,
   isLTR,
   last,
   wrap,
@@ -62,6 +63,9 @@ export interface IgcCarouselComponentEventMap {
   igcPaused: CustomEvent<void>;
 }
 
+let nextId = 1;
+const Slots = setSlots('indicator', 'previous-button', 'next-button');
+
 /**
  * The `igc-carousel` presents a set of `igc-carousel-slide`s by sequentially displaying a subset of one or more slides.
  *
@@ -102,76 +106,62 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     );
   }
 
-  private static readonly increment = createCounter();
-  private readonly _carouselId = `igc-carousel-${IgcCarouselComponent.increment()}`;
+  //#region Internal state
 
+  private readonly _carouselId = `igc-carousel-${nextId++}`;
   private _paused = false;
   private _lastInterval!: ReturnType<typeof setInterval> | null;
   private _hasKeyboardInteractionOnIndicators = false;
   private _hasPointerInteraction = false;
   private _hasInnerFocus = false;
 
-  private _context = new ContextProvider(this, {
+  private _slides: IgcCarouselSlideComponent[] = [];
+  private _projectedIndicators: IgcCarouselIndicatorComponent[] = [];
+
+  @state()
+  private _activeSlide!: IgcCarouselSlideComponent;
+
+  @state()
+  private _playing = false;
+
+  private readonly _slots = addSlotController(this, {
+    slots: Slots,
+    onChange: this._handleSlotChange,
+    initial: true,
+  });
+
+  private readonly _context = new ContextProvider(this, {
     context: carouselContext,
     initialValue: this,
   });
 
+  @queryAll(IgcCarouselIndicatorComponent.tagName)
+  private readonly _defaultIndicators!: NodeListOf<IgcCarouselIndicatorComponent>;
+
   private readonly _carouselSlidesContainerRef = createRef<HTMLDivElement>();
   private readonly _indicatorsContainerRef = createRef<HTMLDivElement>();
   private readonly _prevButtonRef = createRef<IgcButtonComponent>();
   private readonly _nextButtonRef = createRef<IgcButtonComponent>();
 
-  private get hasProjectedIndicators(): boolean {
-    return this._projectedIndicators.length > 0;
+  private get _hasProjectedIndicators(): boolean {
+    return !isEmpty(this._projectedIndicators);
   }
 
-  private get showIndicatorsLabel(): boolean {
+  private get _showIndicatorsLabel(): boolean {
     return this.total > this.maximumIndicatorsCount;
   }
 
-  private get nextIndex(): number {
+  private get _nextIndex(): number {
     return wrap(0, this.total - 1, this.current + 1);
   }
 
-  private get prevIndex(): number {
+  private get _previousIndex(): number {
     return wrap(0, this.total - 1, this.current - 1);
   }
 
-  @queryAll(IgcCarouselIndicatorComponent.tagName)
-  private _defaultIndicators!: NodeListOf<IgcCarouselIndicatorComponent>;
-
-  @queryAssignedElements({
-    selector: IgcCarouselIndicatorComponent.tagName,
-    slot: 'indicator',
-  })
-  private _projectedIndicators!: Array<IgcCarouselIndicatorComponent>;
-
-  @state()
-  private _activeSlide!: IgcCarouselSlideComponent;
+  //#endregion
 
-  @state()
-  private _playing = false;
-
-  private _observerCallback({
-    changes: { added, attributes },
-  }: MutationControllerParams<IgcCarouselSlideComponent>) {
-    const activeSlides = this.slides.filter((slide) => slide.active);
-
-    if (activeSlides.length <= 1) {
-      return;
-    }
-    const idx = this.slides.indexOf(
-      added.length ? last(added).node : last(attributes).node
-    );
-
-    for (const [i, slide] of this.slides.entries()) {
-      if (slide.active && i !== idx) {
-        slide.active = false;
-      }
-    }
-
-    this.activateSlide(this.slides[idx]);
-  }
+  //#region Public attributes and properties
 
   /**
    * Whether the carousel should skip rotating to the first slide after it reaches the last.
@@ -216,7 +206,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * Sets the orientation of the indicator controls (dots).
    * @attr indicators-orientation
    */
-  @property({ reflect: false, attribute: 'indicators-orientation' })
+  @property({ attribute: 'indicators-orientation' })
   public indicatorsOrientation: CarouselIndicatorsOrientation = 'end';
 
   /**
@@ -243,18 +233,14 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * The duration in milliseconds between changing the active slide.
    * @attr interval
    */
-  @property({ type: Number, reflect: false })
+  @property({ type: Number })
   public interval: number | undefined;
 
   /**
    * Controls the maximum indicator controls (dots) that can be shown. Default value is `10`.
    * @attr maximum-indicators-count
    */
-  @property({
-    type: Number,
-    reflect: false,
-    attribute: 'maximum-indicators-count',
-  })
+  @property({ type: Number, attribute: 'maximum-indicators-count' })
   public maximumIndicatorsCount = 10;
 
   /**
@@ -268,21 +254,22 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   /**
    * The slides of the carousel.
    */
-  @queryAssignedElements({ selector: IgcCarouselSlideComponent.tagName })
-  public slides!: Array<IgcCarouselSlideComponent>;
+  public get slides(): IgcCarouselSlideComponent[] {
+    return Array.from(this._slides);
+  }
 
   /**
    * The total number of slides.
    */
   public get total(): number {
-    return this.slides.length;
+    return this._slides.length;
   }
 
   /**
    * The index of the current active slide.
    */
   public get current(): number {
-    return Math.max(0, this.slides.indexOf(this._activeSlide));
+    return Math.max(0, this._slides.indexOf(this._activeSlide));
   }
 
   /**
@@ -299,22 +286,30 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     return this._paused;
   }
 
+  //#endregion
+
+  //#region Watchers
+
   @watch('animationType')
   @watch('slidesLabelFormat')
   @watch('indicatorsLabelFormat')
-  protected contextChanged() {
+  protected _contextChanged(): void {
     this._context.setValue(this, true);
   }
 
   @watch('interval')
-  protected intervalChange() {
+  protected _intervalChange(): void {
     if (!this.isPlaying) {
       this._playing = true;
     }
 
-    this.restartInterval();
+    this._restartInterval();
   }
 
+  //#endregion
+
+  //#region Life-cycle hooks and observer callback
+
   constructor() {
     super();
 
@@ -327,38 +322,38 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     addThemingController(this, all);
 
-    addSafeEventListener(this, 'pointerenter', this.handlePointerInteraction);
-    addSafeEventListener(this, 'pointerleave', this.handlePointerInteraction);
-    addSafeEventListener(this, 'focusin', this.handleFocusInteraction);
-    addSafeEventListener(this, 'focusout', this.handleFocusInteraction);
+    addSafeEventListener(this, 'pointerenter', this._handlePointerInteraction);
+    addSafeEventListener(this, 'pointerleave', this._handlePointerInteraction);
+    addSafeEventListener(this, 'focusin', this._handleFocusInteraction);
+    addSafeEventListener(this, 'focusout', this._handleFocusInteraction);
 
     addGesturesController(this, {
       ref: this._carouselSlidesContainerRef,
       touchOnly: true,
     })
-      .set('swipe-left', this.handleHorizontalSwipe)
-      .set('swipe-right', this.handleHorizontalSwipe)
-      .set('swipe-up', this.handleVerticalSwipe)
-      .set('swipe-down', this.handleVerticalSwipe);
+      .set('swipe-left', this._handleHorizontalSwipe)
+      .set('swipe-right', this._handleHorizontalSwipe)
+      .set('swipe-up', this._handleVerticalSwipe)
+      .set('swipe-down', this._handleVerticalSwipe);
 
     addKeybindings(this, {
       ref: this._indicatorsContainerRef,
       bindingDefaults: { preventDefault: true },
     })
-      .set(arrowLeft, this.handleArrowLeft)
-      .set(arrowRight, this.handleArrowRight)
-      .set(homeKey, this.handleHomeKey)
-      .set(endKey, this.handleEndKey);
+      .set(arrowLeft, this._handleArrowLeft)
+      .set(arrowRight, this._handleArrowRight)
+      .set(homeKey, this._handleHomeKey)
+      .set(endKey, this._handleEndKey);
 
     addKeybindings(this, {
       ref: this._prevButtonRef,
       bindingDefaults: { preventDefault: true },
-    }).setActivateHandler(this.handleNavigationInteractionPrevious);
+    }).setActivateHandler(this._handleNavigationInteractionPrevious);
 
     addKeybindings(this, {
       ref: this._nextButtonRef,
       bindingDefaults: { preventDefault: true },
-    }).setActivateHandler(this.handleNavigationInteractionNext);
+    }).setActivateHandler(this._handleNavigationInteractionNext);
 
     createMutationController(this, {
       callback: this._observerCallback,
@@ -371,27 +366,66 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     });
   }
 
-  private handleSlotChange(): void {
-    if (this.total) {
-      this.activateSlide(
-        this.slides.findLast((slide) => slide.active) ?? first(this.slides)
+  protected override async firstUpdated(): Promise<void> {
+    await this.updateComplete;
+
+    if (!isEmpty(this._slides)) {
+      this._activateSlide(
+        this._slides.findLast((slide) => slide.active) ?? first(this._slides)
       );
     }
   }
 
-  private handleIndicatorSlotChange(): void {
-    this.requestUpdate();
+  private _observerCallback({
+    changes: { added, attributes },
+  }: MutationControllerParams<IgcCarouselSlideComponent>) {
+    const activeSlides = this._slides.filter((slide) => slide.active);
+
+    if (activeSlides.length <= 1) {
+      return;
+    }
+    const idx = this._slides.indexOf(
+      added.length ? last(added).node : last(attributes).node
+    );
+
+    for (const [i, slide] of this._slides.entries()) {
+      if (slide.active && i !== idx) {
+        slide.active = false;
+      }
+    }
+
+    this._activateSlide(this._slides[idx]);
+  }
+
+  //#endregion
+
+  //#region Event listeners
+
+  private _handleSlotChange(
+    params: SlotChangeCallbackParameters<InferSlotNames<typeof Slots>>
+  ): void {
+    if (params.isDefault || params.isInitial) {
+      this._slides = this._slots.getAssignedElements('[default]', {
+        selector: IgcCarouselSlideComponent.tagName,
+      });
+    }
+
+    if (params.slot === 'indicator') {
+      this._projectedIndicators = this._slots.getAssignedElements('indicator', {
+        selector: IgcCarouselIndicatorComponent.tagName,
+      });
+    }
   }
 
-  private handlePointerInteraction(event: PointerEvent): void {
+  private _handlePointerInteraction(event: PointerEvent): void {
     this._hasPointerInteraction = event.type === 'pointerenter';
 
     if (!this._hasInnerFocus) {
-      this.handlePauseOnInteraction();
+      this._handlePauseOnInteraction();
     }
   }
 
-  private handleFocusInteraction(event: FocusEvent): void {
+  private _handleFocusInteraction(event: FocusEvent): void {
     // focusin - element that lost focus
     // focusout - element that gained focus
     const node = event.relatedTarget as Node;
@@ -403,55 +437,66 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     this._hasInnerFocus = event.type === 'focusin';
 
     if (!this._hasPointerInteraction) {
-      this.handlePauseOnInteraction();
+      this._handlePauseOnInteraction();
     }
   }
 
-  private handlePauseOnInteraction(): void {
-    if (!this.interval || this.disablePauseOnInteraction) return;
+  private async _handleIndicatorClick(event: PointerEvent): Promise<void> {
+    const indicator = findElementFromEventPath<IgcCarouselIndicatorComponent>(
+      IgcCarouselIndicatorComponent.tagName,
+      event
+    )!;
 
-    if (this.isPlaying) {
-      this.pause();
-      this.emitEvent('igcPaused');
-    } else {
-      this.play();
-      this.emitEvent('igcPlaying');
-    }
+    const index = this._hasProjectedIndicators
+      ? this._projectedIndicators.indexOf(indicator)
+      : Array.from(this._defaultIndicators).indexOf(indicator);
+
+    this._handleInteraction(() =>
+      this.select(this._slides[index], index > this.current ? 'next' : 'prev')
+    );
   }
 
-  private async handleArrowLeft(): Promise<void> {
+  //#endregion
+
+  //#region Keyboard event listeners
+
+  private async _handleArrowLeft(): Promise<void> {
     this._hasKeyboardInteractionOnIndicators = true;
-    this.handleInteraction(isLTR(this) ? this.prev : this.next);
+    this._handleInteraction(isLTR(this) ? this.prev : this.next);
   }
 
-  private async handleArrowRight(): Promise<void> {
+  private async _handleArrowRight(): Promise<void> {
     this._hasKeyboardInteractionOnIndicators = true;
-    this.handleInteraction(isLTR(this) ? this.next : this.prev);
+    this._handleInteraction(isLTR(this) ? this.next : this.prev);
   }
 
-  private async handleHomeKey(): Promise<void> {
+  private async _handleHomeKey(): Promise<void> {
     this._hasKeyboardInteractionOnIndicators = true;
-    this.handleInteraction(() =>
-      this.select(isLTR(this) ? first(this.slides) : last(this.slides))
+    this._handleInteraction(() =>
+      this.select(isLTR(this) ? first(this._slides) : last(this._slides))
     );
   }
 
-  private async handleEndKey(): Promise<void> {
+  private async _handleEndKey(): Promise<void> {
     this._hasKeyboardInteractionOnIndicators = true;
-    this.handleInteraction(() =>
-      this.select(isLTR(this) ? last(this.slides) : first(this.slides))
+    this._handleInteraction(() =>
+      this.select(isLTR(this) ? last(this._slides) : first(this._slides))
     );
   }
 
-  private handleVerticalSwipe({ data: { direction } }: SwipeEvent) {
+  //#endregion
+
+  //#region Gestures event listeners
+
+  private _handleVerticalSwipe({ data: { direction } }: SwipeEvent): void {
     if (this.vertical) {
-      this.handleInteraction(direction === 'up' ? this.next : this.prev);
+      this._handleInteraction(direction === 'up' ? this.next : this.prev);
     }
   }
 
-  private handleHorizontalSwipe({ data: { direction } }: SwipeEvent) {
+  private _handleHorizontalSwipe({ data: { direction } }: SwipeEvent): void {
     if (!this.vertical) {
-      this.handleInteraction(async () => {
+      this._handleInteraction(async () => {
         if (isLTR(this)) {
           direction === 'left' ? await this.next() : await this.prev();
         } else {
@@ -461,45 +506,46 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     }
   }
 
-  private async handleIndicatorClick(event: PointerEvent): Promise<void> {
-    const indicator = findElementFromEventPath<IgcCarouselIndicatorComponent>(
-      IgcCarouselIndicatorComponent.tagName,
-      event
-    )!;
+  //#endregion
 
-    const index = this.hasProjectedIndicators
-      ? this._projectedIndicators.indexOf(indicator)
-      : Array.from(this._defaultIndicators).indexOf(indicator);
-
-    this.handleInteraction(() =>
-      this.select(this.slides[index], index > this.current ? 'next' : 'prev')
-    );
-  }
+  //#endregion Internal API
 
-  private handleNavigationInteractionNext() {
-    this.handleInteraction(this.next);
+  private _handleNavigationInteractionNext(): void {
+    this._handleInteraction(this.next);
   }
 
-  private handleNavigationInteractionPrevious() {
-    this.handleInteraction(this.prev);
+  private _handleNavigationInteractionPrevious(): void {
+    this._handleInteraction(this.prev);
   }
 
-  private async handleInteraction(
+  private async _handleInteraction(
     callback: () => Promise<unknown>
   ): Promise<void> {
     if (this.interval) {
-      this.resetInterval();
+      this._resetInterval();
     }
 
     await callback.call(this);
     this.emitEvent('igcSlideChanged', { detail: this.current });
 
     if (this.interval) {
-      this.restartInterval();
+      this._restartInterval();
     }
   }
 
-  private activateSlide(slide: IgcCarouselSlideComponent): void {
+  private _handlePauseOnInteraction(): void {
+    if (!this.interval || this.disablePauseOnInteraction) return;
+
+    if (this.isPlaying) {
+      this.pause();
+      this.emitEvent('igcPaused');
+    } else {
+      this.play();
+      this.emitEvent('igcPlaying');
+    }
+  }
+
+  private _activateSlide(slide: IgcCarouselSlideComponent): void {
     if (this._activeSlide) {
       this._activeSlide.active = false;
     }
@@ -508,7 +554,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     this._activeSlide.active = true;
 
     if (this._hasKeyboardInteractionOnIndicators) {
-      this.hasProjectedIndicators
+      this._hasProjectedIndicators
         ? this._projectedIndicators[this.current].focus()
         : this._defaultIndicators[this.current].focus();
 
@@ -516,8 +562,8 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     }
   }
 
-  private updateProjectedIndicators(): void {
-    for (const [idx, slide] of this.slides.entries()) {
+  private _updateProjectedIndicators(): void {
+    for (const [idx, slide] of this._slides.entries()) {
       const indicator = this._projectedIndicators[idx];
       indicator.active = slide.active;
       indicator.index = idx;
@@ -526,15 +572,15 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     }
   }
 
-  private resetInterval(): void {
+  private _resetInterval(): void {
     if (this._lastInterval) {
       clearInterval(this._lastInterval);
       this._lastInterval = null;
     }
   }
 
-  private restartInterval(): void {
-    this.resetInterval();
+  private _restartInterval(): void {
+    this._resetInterval();
 
     if (asNumber(this.interval) > 0) {
       this._lastInterval = setInterval(() => {
@@ -548,7 +594,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     }
   }
 
-  private async animateSlides(
+  private async _animateSlides(
     nextSlide: IgcCarouselSlideComponent,
     currentSlide: IgcCarouselSlideComponent,
     dir: 'next' | 'prev'
@@ -557,19 +603,23 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
       // Animate slides in next direction
       currentSlide.previous = true;
       currentSlide.toggleAnimation('out');
-      this.activateSlide(nextSlide);
+      this._activateSlide(nextSlide);
       await nextSlide.toggleAnimation('in');
       currentSlide.previous = false;
     } else {
       // Animate slides in previous direction
       currentSlide.previous = true;
       currentSlide.toggleAnimation('in', 'reverse');
-      this.activateSlide(nextSlide);
+      this._activateSlide(nextSlide);
       await nextSlide.toggleAnimation('out', 'reverse');
       currentSlide.previous = false;
     }
   }
 
+  //#endregion
+
+  //#region Public API
+
   /**
    * Resumes playing of the carousel slides.
    */
@@ -577,7 +627,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     if (!this.isPlaying) {
       this._paused = false;
       this._playing = true;
-      this.restartInterval();
+      this._restartInterval();
     }
   }
 
@@ -588,7 +638,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     if (this.isPlaying) {
       this._playing = false;
       this._paused = true;
-      this.resetInterval();
+      this._resetInterval();
     }
   }
 
@@ -596,24 +646,24 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * Switches to the next slide, runs any animations, and returns if the operation was successful.
    */
   public async next(): Promise<boolean> {
-    if (this.disableLoop && this.nextIndex === 0) {
+    if (this.disableLoop && this._nextIndex === 0) {
       this.pause();
       return false;
     }
 
-    return await this.select(this.slides[this.nextIndex], 'next');
+    return await this.select(this._slides[this._nextIndex], 'next');
   }
 
   /**
    * Switches to the previous slide, runs any animations, and returns if the operation was successful.
    */
   public async prev(): Promise<boolean> {
-    if (this.disableLoop && this.prevIndex === this.total - 1) {
+    if (this.disableLoop && this._previousIndex === this.total - 1) {
       this.pause();
       return false;
     }
 
-    return await this.select(this.slides[this.prevIndex], 'prev');
+    return await this.select(this._slides[this._previousIndex], 'prev');
   }
 
   /* blazorSuppress */
@@ -640,10 +690,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     if (typeof slideOrIndex === 'number') {
       index = slideOrIndex;
-      slide = this.slides.at(index);
+      slide = this._slides.at(index);
     } else {
       slide = slideOrIndex;
-      index = this.slides.indexOf(slide);
+      index = this._slides.indexOf(slide);
     }
 
     if (index === this.current || index === -1 || !slide) {
@@ -652,11 +702,15 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     const dir = animationDirection ?? (index > this.current ? 'next' : 'prev');
 
-    await this.animateSlides(slide, this._activeSlide, dir);
+    await this._animateSlides(slide, this._activeSlide, dir);
     return true;
   }
 
-  private navigationTemplate() {
+  //#endregion
+
+  //#region Template renderers
+
+  private _renderNavigation() {
     return html`
       <igc-button
         ${ref(this._prevButtonRef)}
@@ -665,7 +719,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
         aria-label="Previous slide"
         aria-controls=${this._carouselId}
         ?disabled=${this.disableLoop && this.current === 0}
-        @click=${this.handleNavigationInteractionPrevious}
+        @click=${this._handleNavigationInteractionPrevious}
       >
         <slot name="previous-button">
           <igc-icon
@@ -675,6 +729,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
           ></igc-icon>
         </slot>
       </igc-button>
+
       <igc-button
         ${ref(this._nextButtonRef)}
         type="button"
@@ -682,7 +737,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
         aria-label="Next slide"
         aria-controls=${this._carouselId}
         ?disabled=${this.disableLoop && this.current === this.total - 1}
-        @click=${this.handleNavigationInteractionNext}
+        @click=${this._handleNavigationInteractionNext}
       >
         <slot name="next-button">
           <igc-icon
@@ -695,8 +750,8 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     `;
   }
 
-  protected *renderIndicators() {
-    for (const [i, slide] of this.slides.entries()) {
+  protected *_renderIndicators() {
+    for (const [i, slide] of this._slides.entries()) {
       const forward = slide.active ? 'visible' : 'hidden';
       const backward = slide.active ? 'hidden' : 'visible';
 
@@ -720,7 +775,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     }
   }
 
-  private indicatorTemplate() {
+  private _renderIndicatorContainer() {
     const parts = {
       indicators: true,
       start: this.indicatorsOrientation === 'start',
@@ -733,21 +788,19 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
           role="tablist"
           part=${partMap(parts)}
         >
-          <slot
-            name="indicator"
-            @slotchange=${this.handleIndicatorSlotChange}
-            @click=${this.handleIndicatorClick}
-          >
-            ${this.hasProjectedIndicators
-              ? this.updateProjectedIndicators()
-              : this.renderIndicators()}
+          <slot name="indicator" @click=${this._handleIndicatorClick}>
+            ${cache(
+              this._hasProjectedIndicators
+                ? this._updateProjectedIndicators()
+                : this._renderIndicators()
+            )}
           </slot>
         </div>
       </igc-carousel-indicator-container>
     `;
   }
 
-  private labelTemplate() {
+  private _renderLabel() {
     const parts = {
       label: true,
       indicators: true,
@@ -767,21 +820,20 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   protected override render() {
+    const hasNoIndicators = this.hideIndicators || this._showIndicatorsLabel;
+    const hasLabel = !this.hideIndicators && this._showIndicatorsLabel;
+
     return html`
       <section>
-        ${this.hideNavigation ? nothing : this.navigationTemplate()}
-        ${this.hideIndicators || this.showIndicatorsLabel
-          ? nothing
-          : this.indicatorTemplate()}
-        ${!this.hideIndicators && this.showIndicatorsLabel
-          ? this.labelTemplate()
-          : nothing}
+        ${cache(this.hideNavigation ? nothing : this._renderNavigation())}
+        ${hasNoIndicators ? nothing : this._renderIndicatorContainer()}
+        ${hasLabel ? this._renderLabel() : nothing}
         <div
           ${ref(this._carouselSlidesContainerRef)}
           id=${this._carouselId}
           aria-live=${this.interval && this._playing ? 'off' : 'polite'}
         >
-          <slot @slotchange=${this.handleSlotChange}></slot>
+          <slot></slot>
         </div>
       </section>
     `;

From c6690344d408b6e625d59f36e237a7ab6a9570e8 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Thu, 10 Jul 2025 09:24:17 +0300
Subject: [PATCH 18/19] fix(carousel): Correct slide id assigned to aria
 attribute

---
 src/components/carousel/carousel.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 4e50f94d4..19159b155 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -569,8 +569,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
       const indicator = this._projectedIndicators[idx];
       indicator.active = slide.active;
       indicator.index = idx;
+    }
 
-      this.setAttribute('aria-controls', slide.id);
+    if (this._activeSlide) {
+      this.setAttribute('aria-controls', this._activeSlide.id);
     }
   }
 

From dd26f37f94417d1b677747d1cbbd1ccc99f03c7e Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 15 Jul 2025 09:50:30 +0300
Subject: [PATCH 19/19] refactor(checkbox,radio): Drop initial slotchange
 invocation

---
 src/components/carousel/carousel.ts      | 1 +
 src/components/checkbox/checkbox-base.ts | 3 +--
 src/components/radio/radio.ts            | 3 +--
 stories/file-input.stories.ts            | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 19159b155..49febab91 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -384,6 +384,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     if (activeSlides.length <= 1) {
       return;
     }
+
     const idx = this._slides.indexOf(
       added.length ? last(added).node : last(attributes).node
     );
diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
index 7f674f4be..cd30944da 100644
--- a/src/components/checkbox/checkbox-base.ts
+++ b/src/components/checkbox/checkbox-base.ts
@@ -41,7 +41,6 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   protected readonly _slots = addSlotController(this, {
     slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
     onChange: this._handleSlotChange,
-    initial: true,
   });
 
   protected readonly _focusRingManager = addKeyboardFocusRing(this);
@@ -56,7 +55,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   protected readonly _input!: HTMLInputElement;
 
   @state()
-  protected _hideLabel = false;
+  protected _hideLabel = true;
 
   /**
    * The value attribute of the control.
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index cd4ddaf20..a626de19b 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -85,7 +85,6 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
   private readonly _slots = addSlotController(this, {
     slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
     onChange: this._handleSlotChange,
-    initial: true,
   });
 
   protected override readonly _formValue: FormValueOf<boolean> =
@@ -103,7 +102,7 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
   protected readonly _label!: Array<Node>;
 
   @state()
-  protected _hideLabel = false;
+  protected _hideLabel = true;
 
   @state()
   private _tabIndex = 0;
diff --git a/stories/file-input.stories.ts b/stories/file-input.stories.ts
index f6c2f1a83..0716b1117 100644
--- a/stories/file-input.stories.ts
+++ b/stories/file-input.stories.ts
@@ -25,7 +25,7 @@ const metadata: Meta<IgcFileInputComponent> = {
   component: 'igc-file-input',
   parameters: {
     docs: { description: { component: '' } },
-    actions: { handles: ['igcInput', 'igcChange', 'igcCancel'] },
+    actions: { handles: ['igcChange', 'igcCancel'] },
   },
   argTypes: {
     value: {