diff --git a/src/components/button-group/toggle-button.ts b/src/components/button-group/toggle-button.ts
index 60ae8d12f..80e449132 100644
--- a/src/components/button-group/toggle-button.ts
+++ b/src/components/button-group/toggle-button.ts
@@ -4,7 +4,7 @@ import { property, query } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import { styles } from './themes/button.base.css.js';
 import { all } from './themes/button.js';
 import { styles as shared } from './themes/shared/button/button.common.css.js';
@@ -80,10 +80,7 @@ export default class IgcToggleButtonComponent extends LitElement {
   protected override render() {
     return html`
       <button
-        part=${partNameMap({
-          toggle: true,
-          focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ toggle: true, focused: this._kbFocus.focused })}
         type="button"
         ?disabled=${this.disabled}
         .ariaLabel=${this.ariaLabel}
diff --git a/src/components/button/button-base.ts b/src/components/button/button-base.ts
index 23ab91134..b0ca6c684 100644
--- a/src/components/button/button-base.ts
+++ b/src/components/button/button-base.ts
@@ -6,7 +6,7 @@ import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 
 export interface IgcButtonEventMap {
   // For analyzer meta only:
@@ -140,10 +140,7 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   private renderButton() {
     return html`
       <button
-        part=${partNameMap({
-          base: true,
-          focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ base: true, focused: this._kbFocus.focused })}
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
@@ -158,13 +155,10 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   private renderLinkButton() {
     return html`
       <a
-        part=${partNameMap({
-          base: true,
-          focused: this._kbFocus.focused,
-        })}
+        part=${partMap({ base: true, focused: this._kbFocus.focused })}
         role="button"
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-disabled=${this.disabled}
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts
index 479dc1747..b72750145 100644
--- a/src/components/calendar/calendar.ts
+++ b/src/components/calendar/calendar.ts
@@ -23,13 +23,13 @@ import { IgcCalendarResourceStringEN } from '../common/i18n/calendar.resources.j
 import { createDateTimeFormatters } from '../common/localization/intl-formatters.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 {
   clamp,
   findElementFromEventPath,
   first,
   formatString,
   last,
-  partNameMap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import type { ContentOrientation } from '../types.js';
@@ -427,15 +427,15 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   }
 
   protected renderNavigationButtons() {
-    const parts = partNameMap({
+    const parts = {
       'navigation-button': true,
       vertical: this.orientation === 'vertical',
-    });
+    };
 
     return html`
       <div part="navigation-buttons">
         <button
-          part=${parts}
+          part=${partMap(parts)}
           aria-label=${this.previousButtonLabel}
           @click=${this.navigatePrevious}
         >
@@ -447,7 +447,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
         </button>
 
         <button
-          part=${parts}
+          part=${partMap(parts)}
           aria-label=${this.nextButtonLabel}
           @click=${this.navigateNext}
         >
diff --git a/src/components/calendar/days-view/days-view.ts b/src/components/calendar/days-view/days-view.ts
index a6d27129a..9642c1d13 100644
--- a/src/components/calendar/days-view/days-view.ts
+++ b/src/components/calendar/days-view/days-view.ts
@@ -11,7 +11,8 @@ import { IgcCalendarResourceStringEN } from '../../common/i18n/calendar.resource
 import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, first, last, partNameMap, take } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk, first, last, take } from '../../common/util.js';
 import { IgcCalendarBaseComponent } from '../base.js';
 import {
   areSameMonth,
@@ -382,7 +383,6 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     const inactive = !areSameMonth(day, this._activeDate);
 
     return {
-      date: true,
       disabled: disabled || hidden,
       first: this.isFirstInRange(day),
       last: this.isLastInRange(day),
@@ -403,13 +403,12 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     const { changePreview, clearPreview } = this.getDayHandlers(day);
 
     const props = this.getDayProperties(day, today);
-    const parts = partNameMap(props);
 
     return html`
-      <span part=${parts}>
+      <span part=${partMap({ date: true, ...props })}>
         <span
           role="gridcell"
-          part=${parts.replace('date', 'date-inner')}
+          part=${partMap({ 'date-inner': true, ...props })}
           aria-label=${ariaLabel}
           aria-disabled=${props.disabled}
           aria-selected=${props.selected}
@@ -438,8 +437,8 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
 
   protected renderWeekNumber(start: CalendarDay, last: boolean) {
     return html`
-      <span role="rowheader" part=${partNameMap({ 'week-number': true, last })}>
-        <span part=${partNameMap({ 'week-number-inner': true, last })}>
+      <span role="rowheader" part=${partMap({ 'week-number': true, last })}>
+        <span part=${partMap({ 'week-number-inner': true, last })}>
           ${start.week}
         </span>
       </span>
diff --git a/src/components/calendar/helpers.spec.ts b/src/components/calendar/helpers.spec.ts
index 52270de71..8849e5be9 100644
--- a/src/components/calendar/helpers.spec.ts
+++ b/src/components/calendar/helpers.spec.ts
@@ -47,7 +47,7 @@ export function getDayViewDOM(element: IgcDaysViewComponent) {
       get disabled() {
         return Array.from(
           root.querySelectorAll<HTMLElement>(
-            'span[part*="date-inner disabled"]'
+            'span[part~="date-inner"][part~="disabled"]'
           )
         );
       },
diff --git a/src/components/calendar/months-view/months-view.ts b/src/components/calendar/months-view/months-view.ts
index d320c371e..4de5a5cc1 100644
--- a/src/components/calendar/months-view/months-view.ts
+++ b/src/components/calendar/months-view/months-view.ts
@@ -11,7 +11,8 @@ import { registerComponent } from '../../common/definitions/register.js';
 import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, partNameMap } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk } from '../../common/util.js';
 import { MONTHS_PER_ROW, areSameMonth, getViewElement } from '../helpers.js';
 import { CalendarDay } from '../model.js';
 import { styles } from '../themes/year-month-view.base.css.js';
@@ -119,14 +120,12 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
     const current = areSameMonth(now, entry);
     const selected = this._value.month === entry.month;
 
-    const parts = { selected, current };
-
     return html`
-      <span part=${partNameMap({ month: true, ...parts })}>
+      <span part=${partMap({ month: true, selected, current })}>
         <span
           role="gridcell"
           data-value=${entry.month}
-          part=${partNameMap({ 'month-inner': true, ...parts })}
+          part=${partMap({ 'month-inner': true, selected, current })}
           aria-selected=${selected}
           aria-label=${ariaLabel}
           tabindex=${active ? 0 : -1}
diff --git a/src/components/calendar/years-view/years-view.ts b/src/components/calendar/years-view/years-view.ts
index b8af1f87d..8b9249041 100644
--- a/src/components/calendar/years-view/years-view.ts
+++ b/src/components/calendar/years-view/years-view.ts
@@ -9,7 +9,8 @@ import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressC
 import { registerComponent } from '../../common/definitions/register.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, partNameMap } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk } from '../../common/util.js';
 import { YEARS_PER_ROW, getViewElement, getYearRange } from '../helpers.js';
 import { CalendarDay } from '../model.js';
 import { styles } from '../themes/year-month-view.base.css.js';
@@ -96,14 +97,13 @@ export default class IgcYearsViewComponent extends EventEmitterMixin<
   protected renderYear(year: number, now: CalendarDay) {
     const selected = this._value.year === year;
     const current = year === now.year;
-    const parts = { selected, current };
 
     return html`
-      <span part=${partNameMap({ year: true, ...parts })}>
+      <span part=${partMap({ year: true, selected, current })}>
         <span
           role="gridcell"
           data-value=${year}
-          part=${partNameMap({ 'year-inner': true, ...parts })}
+          part=${partMap({ 'year-inner': true, selected, current })}
           aria-selected=${selected}
           tabindex=${selected ? 0 : -1}
         >
diff --git a/src/components/carousel/carousel-indicator-container.ts b/src/components/carousel/carousel-indicator-container.ts
index 2aea47505..7d72ae163 100644
--- a/src/components/carousel/carousel-indicator-container.ts
+++ b/src/components/carousel/carousel-indicator-container.ts
@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import { styles } from './themes/carousel-indicator-container.base.css.js';
 import { all } from './themes/indicator-container.js';
@@ -39,7 +39,7 @@ export default class IgcCarouselIndicatorContainerComponent extends LitElement {
   protected override render() {
     return html`
       <div
-        part=${partNameMap({
+        part=${partMap({
           base: true,
           focused: this._kbFocus.focused,
         })}
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 7a256a457..71c0269e4 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -32,6 +32,7 @@ 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 {
   asNumber,
   createCounter,
@@ -40,7 +41,6 @@ import {
   formatString,
   isLTR,
   last,
-  partNameMap,
   wrap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -740,14 +740,18 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   private indicatorTemplate() {
-    const parts = partNameMap({
+    const parts = {
       indicators: true,
       start: this.indicatorsOrientation === 'start',
-    });
+    };
 
     return html`
       <igc-carousel-indicator-container>
-        <div ${ref(this._indicatorsContainerRef)} role="tablist" part=${parts}>
+        <div
+          ${ref(this._indicatorsContainerRef)}
+          role="tablist"
+          part=${partMap(parts)}
+        >
           <slot
             name="indicator"
             @slotchange=${this.handleIndicatorSlotChange}
@@ -763,11 +767,11 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   private labelTemplate() {
-    const parts = partNameMap({
+    const parts = {
       label: true,
       indicators: true,
       start: this.indicatorsOrientation === 'start',
-    });
+    };
     const value = formatString(
       this.slidesLabelFormat,
       this.current + 1,
@@ -775,7 +779,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     );
 
     return html`
-      <div part=${parts}>
+      <div part=${partMap(parts)}>
         <span>${value}</span>
       </div>
     `;
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index afee7b7b3..d2824e9dc 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -5,7 +5,8 @@ import { live } from 'lit/directives/live.js';
 
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, partNameMap } from '../common/util.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 { all } from './themes/checkbox-themes.js';
@@ -89,7 +90,7 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
 
     return html`
       <label
-        part=${partNameMap({
+        part=${partMap({
           base: true,
           checked,
           focused: this._kbFocus.focused,
@@ -113,14 +114,14 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
         />
-        <span part=${partNameMap({ control: true, checked })}>
-          <span part=${partNameMap({ indicator: true, checked })}>
+        <span part=${partMap({ control: true, checked })}>
+          <span part=${partMap({ indicator: true, checked })}>
             ${this._isIndigo ? this.renderIndigo() : this.renderStandard()}
           </span>
         </span>
         <span
           .hidden=${this.hideLabel}
-          part=${partNameMap({ label: true, checked })}
+          part=${partMap({ label: true, checked })}
           id=${this.labelId}
           ><slot></slot>
         </span>
diff --git a/src/components/checkbox/switch.ts b/src/components/checkbox/switch.ts
index d82e51f8e..dc5124734 100644
--- a/src/components/checkbox/switch.ts
+++ b/src/components/checkbox/switch.ts
@@ -4,7 +4,8 @@ import { live } from 'lit/directives/live.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, partNameMap } from '../common/util.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 { all } from './themes/switch-themes.js';
@@ -45,7 +46,7 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
 
     return html`
       <label
-        part=${partNameMap({ base: true, checked })}
+        part=${partMap({ base: true, checked })}
         for=${this.inputId}
         @pointerdown=${this._kbFocus.reset}
       >
@@ -65,17 +66,17 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
           @focus=${this.handleFocus}
         />
         <span
-          part=${partNameMap({
+          part=${partMap({
             control: true,
             checked,
             focused: this._kbFocus.focused,
           })}
         >
-          <span part=${partNameMap({ thumb: true, checked })}></span>
+          <span part=${partMap({ thumb: true, checked })}></span>
         </span>
         <span
           .hidden=${this.hideLabel}
-          part=${partNameMap({ label: true, checked })}
+          part=${partMap({ label: true, checked })}
           id=${this.labelId}
         >
           <slot></slot>
diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
index d8b5639ef..4d13c4f29 100644
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -128,9 +128,9 @@ export default class IgcChipComponent extends EventEmitterMixin<
     return html`
       <button
         part="base"
-        .disabled="${this.disabled}"
-        aria-selected="${this.selected ? 'true' : 'false'}"
-        aria-disabled="${this.disabled ? 'true' : 'false'}"
+        .disabled=${this.disabled}
+        aria-selected=${this.selected}
+        aria-disabled=${this.disabled}
         @click=${this.handleSelect}
       >
         <span
diff --git a/src/components/combo/combo.ts b/src/components/combo/combo.ts
index af1687774..90eef28d5 100644
--- a/src/components/combo/combo.ts
+++ b/src/components/combo/combo.ts
@@ -21,13 +21,13 @@ import {
   type FormValue,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
+import { partMap } from '../common/part-map.js';
 import {
   asArray,
   equal,
   findElementFromEventPath,
   first,
   isEmpty,
-  partNameMap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
@@ -748,7 +748,7 @@ export default class IgcComboComponent<
     return html`
       <igc-combo-item
         id=${id}
-        part=${partNameMap({ item: true, selected, active })}
+        part=${partMap({ item: true, selected, active })}
         aria-setsize=${this._state.dataState.length}
         aria-posinset=${position}
         exportparts="checkbox, checkbox-indicator, checked"
@@ -856,7 +856,7 @@ export default class IgcComboComponent<
     return html`
       <span
         slot="suffix"
-        part=${partNameMap({
+        part=${partMap({
           'toggle-icon': true,
           filled: !isEmpty(this.value),
         })}
@@ -947,7 +947,7 @@ export default class IgcComboComponent<
             slot=${this.caseSensitiveIcon && 'suffix'}
             name="case_sensitive"
             collection="default"
-            part=${partNameMap({
+            part=${partMap({
               'case-icon': true,
               active: this.filteringOptions.caseSensitive ?? false,
             })}
diff --git a/src/components/common/controllers/focus-ring.spec.ts b/src/components/common/controllers/focus-ring.spec.ts
index a86aa5317..de4969b32 100644
--- a/src/components/common/controllers/focus-ring.spec.ts
+++ b/src/components/common/controllers/focus-ring.spec.ts
@@ -7,7 +7,7 @@ import {
   unsafeStatic,
 } from '@open-wc/testing';
 import { LitElement, css } from 'lit';
-import { partNameMap } from '../util.js';
+import { partMap } from '../part-map.js';
 import {
   simulateClick,
   simulateKeyboard,
@@ -37,7 +37,7 @@ describe('Focus ring controller', () => {
 
         protected override render() {
           return html`<button
-            part=${partNameMap({ focused: this.manager.focused })}
+            part=${partMap({ focused: this.manager.focused })}
             @blur=${this.manager.reset}
             @pointerdown=${this.manager.reset}
           >
diff --git a/src/components/common/part-map.ts b/src/components/common/part-map.ts
new file mode 100644
index 000000000..fd9026fc0
--- /dev/null
+++ b/src/components/common/part-map.ts
@@ -0,0 +1,81 @@
+import { noChange } from 'lit';
+import {
+  type AttributePart,
+  Directive,
+  type DirectiveParameters,
+  type PartInfo,
+  PartType,
+  directive,
+} from 'lit/directive.js';
+
+export interface PartMapInfo {
+  readonly [name: string]: boolean | null | undefined;
+}
+
+class PartMapDirective extends Directive {
+  private _previousParts?: Set<string>;
+
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+
+    if (
+      partInfo.type !== PartType.ATTRIBUTE ||
+      partInfo.name !== 'part' ||
+      (partInfo.strings?.length as number) > 0
+    ) {
+      throw new Error(
+        '`partMap() can only be used in the `part` attribute and must be the only part in the attribute.'
+      );
+    }
+  }
+
+  public override render(partMapInfo: PartMapInfo): string {
+    return Object.keys(partMapInfo)
+      .filter((key) => partMapInfo[key])
+      .join(' ');
+  }
+
+  public override update(
+    part: AttributePart,
+    [partMapInfo]: DirectiveParameters<this>
+  ) {
+    const partList = part.element.part;
+
+    if (this._previousParts === undefined) {
+      this._previousParts = new Set();
+
+      for (const name in partMapInfo) {
+        if (partMapInfo[name]) {
+          partList.add(name);
+          this._previousParts.add(name);
+        }
+      }
+
+      return this.render(partMapInfo);
+    }
+
+    for (const name of this._previousParts) {
+      if (!(name in partMapInfo) || !partMapInfo[name]) {
+        partList.remove(name);
+        this._previousParts.delete(name);
+      }
+    }
+
+    for (const name in partMapInfo) {
+      const value = !!partMapInfo[name];
+      if (value && !this._previousParts.has(name)) {
+        partList.add(name);
+        this._previousParts.add(name);
+      }
+    }
+
+    return noChange;
+  }
+}
+
+/**
+ * Similar to Lit's {@link https://lit.dev/docs/templates/directives/#classmap | `classMap`} and
+ * {@link https://lit.dev/docs/templates/directives/#stylemap | `styleMap`} but for `part` attributes.
+ */
+export const partMap = directive(PartMapDirective);
+export type { PartMapDirective };
diff --git a/src/components/common/util.ts b/src/components/common/util.ts
index 201a9f4f4..b4f157cf6 100644
--- a/src/components/common/util.ts
+++ b/src/components/common/util.ts
@@ -1,13 +1,3 @@
-export interface PartNameInfo {
-  readonly [name: string]: string | boolean | number;
-}
-
-export const partNameMap = (partNameInfo: PartNameInfo) => {
-  return Object.keys(partNameInfo)
-    .filter((key) => partNameInfo[key])
-    .join(' ');
-};
-
 export function noop() {}
 
 export const asPercent = (part: number, whole: number) => (part / whole) * 100;
diff --git a/src/components/date-time-input/date-time-input.ts b/src/components/date-time-input/date-time-input.ts
index ab209b41b..a6c222f7c 100644
--- a/src/components/date-time-input/date-time-input.ts
+++ b/src/components/date-time-input/date-time-input.ts
@@ -22,7 +22,8 @@ import {
   createFormValueState,
   defaultDateTimeTransformers,
 } from '../common/mixins/forms/form-value.js';
-import { noop, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { noop } from '../common/util.js';
 import type { IgcInputComponentEventMap } from '../input/input-base.js';
 import {
   IgcMaskInputBaseComponent,
@@ -650,7 +651,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     return html`
       <input
         type="text"
-        part=${partNameMap(this.resolvePartNames('input'))}
+        part=${partMap(this.resolvePartNames('input'))}
         name=${ifDefined(this.name)}
         .value=${live(this.maskedValue)}
         .placeholder=${live(this.placeholder || this.emptyMask)}
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 012da9e26..5570184c5 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -12,11 +12,11 @@ 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,
-  partNameMap,
 } from '../common/util.js';
 import { styles } from './themes/dialog.base.css.js';
 import { styles as shared } from './themes/shared/dialog.common.css.js';
@@ -242,21 +242,21 @@ export default class IgcDialogComponent extends EventEmitterMixin<
   protected override render() {
     const label = this.ariaLabel ? this.ariaLabel : undefined;
     const labelledby = label ? undefined : this.titleId;
-    const backdropParts = partNameMap({
+    const backdropParts = {
       backdrop: true,
       animating: this.animating,
-    });
-    const baseParts = partNameMap({
+    };
+    const baseParts = {
       base: true,
       titled: this.titleElements.length > 0 || this.title,
       footed: this.footerElements.length > 0 || !this.hideDefaultAction,
-    });
+    };
 
     return html`
-      <div part=${backdropParts} aria-hidden=${!this.open}></div>
+      <div part=${partMap(backdropParts)} aria-hidden=${!this.open}></div>
       <dialog
         ${ref(this.dialogRef)}
-        part=${baseParts}
+        part=${partMap(baseParts)}
         role="dialog"
         @click=${this.handleClick}
         @cancel=${this.handleCancel}
diff --git a/src/components/file-input/file-input.ts b/src/components/file-input/file-input.ts
index 4890714fc..5a0c3dbbc 100644
--- a/src/components/file-input/file-input.ts
+++ b/src/components/file-input/file-input.ts
@@ -10,7 +10,8 @@ import {
   createFormValueState,
   defaultFileListTransformer,
 } from '../common/mixins/forms/form-value.js';
-import { isEmpty, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { isEmpty } from '../common/util.js';
 import { IgcInputBaseComponent } from '../input/input-base.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/file-input.base.css.js';
@@ -204,7 +205,7 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
     return html`
       <input
         id=${this.inputId}
-        part=${partNameMap(this.resolvePartNames('input'))}
+        part=${partMap(this.resolvePartNames('input'))}
         type="file"
         ?disabled=${this.disabled}
         ?required=${this.required}
diff --git a/src/components/input/input-base.ts b/src/components/input/input-base.ts
index 847fdc7f7..29601b97c 100644
--- a/src/components/input/input-base.ts
+++ b/src/components/input/input-base.ts
@@ -6,7 +6,8 @@ import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import { createCounter, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { createCounter } from '../common/util.js';
 import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/input.base.css.js';
@@ -175,7 +176,7 @@ export abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(
   private renderMaterial() {
     return html`
       <div
-        part=${partNameMap({
+        part=${partMap({
           ...this.resolvePartNames('container'),
           labelled: this.label,
         })}
@@ -192,7 +193,7 @@ export abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(
 
   private renderStandard() {
     return html`${this.renderLabel()}
-      <div part=${partNameMap(this.resolvePartNames('container'))}>
+      <div part=${partMap(this.resolvePartNames('container'))}>
         ${this.renderPrefix()} ${this.renderFileParts()} ${this.renderInput()}
         ${this.renderSuffix()}
       </div>
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 3592ae613..e8ea5a229 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -8,7 +8,8 @@ import {
   type FormValue,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
-import { isEmpty, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { isEmpty } from '../common/util.js';
 import type { InputType, RangeTextSelectMode } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcInputBaseComponent } from './input-base.js';
@@ -262,7 +263,7 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     return html`
       <input
         id=${this.inputId}
-        part=${partNameMap(this.resolvePartNames('input'))}
+        part=${partMap(this.resolvePartNames('input'))}
         name=${ifDefined(this.name)}
         type=${ifDefined(this.type)}
         pattern=${ifDefined(this.pattern)}
diff --git a/src/components/mask-input/mask-input.ts b/src/components/mask-input/mask-input.ts
index a642a7aec..f095c8fd8 100644
--- a/src/components/mask-input/mask-input.ts
+++ b/src/components/mask-input/mask-input.ts
@@ -9,7 +9,8 @@ import {
   type FormValue,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
-import { isEmpty, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { isEmpty } from '../common/util.js';
 import type { MaskInputValueMode } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import {
@@ -215,7 +216,7 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     return html`
       <input
         type="text"
-        part=${partNameMap(this.resolvePartNames('input'))}
+        part=${partMap(this.resolvePartNames('input'))}
         name=${ifDefined(this.name)}
         .value=${live(this.maskedValue)}
         .placeholder=${live(this.placeholder ?? this.parser.escapedMask)}
diff --git a/src/components/nav-drawer/nav-drawer-item.ts b/src/components/nav-drawer/nav-drawer-item.ts
index a9fde3858..e7373832f 100644
--- a/src/components/nav-drawer/nav-drawer-item.ts
+++ b/src/components/nav-drawer/nav-drawer-item.ts
@@ -8,7 +8,7 @@ import {
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import { styles } from './themes/item.base.css.js';
 import { all } from './themes/item.js';
 import { styles as shared } from './themes/shared/item/item.common.css.js';
@@ -68,13 +68,8 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   }
 
   protected override render() {
-    const parts = partNameMap({
-      base: true,
-      mini: this._textLength < 1,
-    });
-
     return html`
-      <div part=${parts}>
+      <div part=${partMap({ base: true, mini: this._textLength < 1 })}>
         <span part="icon" .hidden="${this.navdrawerIcon.length === 0}">
           <slot name="icon"></slot>
         </span>
diff --git a/src/components/nav-drawer/nav-drawer.ts b/src/components/nav-drawer/nav-drawer.ts
index 6b7beda5e..5bc527a6f 100644
--- a/src/components/nav-drawer/nav-drawer.ts
+++ b/src/components/nav-drawer/nav-drawer.ts
@@ -3,7 +3,8 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { isEmpty, partNameMap } from '../common/util.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';
@@ -99,11 +100,6 @@ export default class IgcNavDrawerComponent extends LitElement {
   }
 
   protected override render() {
-    const parts = partNameMap({
-      mini: true,
-      hidden: isEmpty(this._miniSlotElements),
-    });
-
     return html`
       <div part="overlay" @click=${this.hide}></div>
 
@@ -113,7 +109,9 @@ export default class IgcNavDrawerComponent extends LitElement {
         </div>
       </div>
 
-      <div part=${parts}>
+      <div
+        part=${partMap({ mini: true, hidden: isEmpty(this._miniSlotElements) })}
+      >
         <slot name="mini"></slot>
       </div>
     `;
diff --git a/src/components/progress/base.ts b/src/components/progress/base.ts
index 5894c9007..3e842f0fc 100644
--- a/src/components/progress/base.ts
+++ b/src/components/progress/base.ts
@@ -7,13 +7,8 @@ import {
 } from 'lit/decorators.js';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { watch } from '../common/decorators/watch.js';
-import {
-  asPercent,
-  clamp,
-  formatString,
-  isEmpty,
-  partNameMap,
-} from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { asPercent, clamp, formatString, isEmpty } from '../common/util.js';
 import type { StyleVariant } from '../types.js';
 
 export abstract class IgcProgressBaseComponent extends LitElement {
@@ -167,15 +162,15 @@ export abstract class IgcProgressBaseComponent extends LitElement {
   }
 
   protected renderLabel() {
-    const parts = partNameMap({
+    const parts = {
       label: true,
       value: true,
       fraction: this._hasFraction,
-    });
+    };
 
     return this.labelFormat
-      ? html`<span part=${parts}>${this.renderLabelFormat()}</span>`
-      : html`<span part="${parts} counter"></span>`;
+      ? html`<span part=${partMap(parts)}>${this.renderLabelFormat()}</span>`
+      : html`<span part=${partMap({ ...parts, counter: true })}></span>`;
   }
 
   protected renderLabelFormat() {
diff --git a/src/components/progress/circular-progress.ts b/src/components/progress/circular-progress.ts
index dbd315f0d..793a06c51 100644
--- a/src/components/progress/circular-progress.ts
+++ b/src/components/progress/circular-progress.ts
@@ -3,7 +3,8 @@ import { queryAssignedElements } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, isEmpty, partNameMap } from '../common/util.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';
@@ -54,14 +55,6 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
   private _assignedGradients!: IgcCircularGradientComponent[];
 
   protected renderSvg() {
-    const parts = partNameMap({
-      indeterminate: this.indeterminate,
-      track: true,
-    });
-    const styles = {
-      stroke: `url(#${this._gradientId})`,
-    };
-
     const gradients = !isEmpty(this._assignedGradients)
       ? this._assignedGradients.map(
           ({ offset, color, opacity }) =>
@@ -73,8 +66,8 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
       `;
 
     return svg`
-      <circle part=${parts}/>
-      <circle style=${styleMap(styles)} part="fill"/>
+      <circle part=${partMap({ track: true, indeterminate: this.indeterminate })}/>
+      <circle style=${styleMap({ stroke: `url(#${this._gradientId})` })} part="fill"/>
 
       <defs>
           <linearGradient id=${this._gradientId} gradientTransform="rotate(90)">
@@ -85,14 +78,11 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
   }
 
   protected override render() {
-    const parts = partNameMap({
-      svg: true,
-      indeterminate: this.indeterminate,
-    });
-
     return html`
       <div part="base" style=${styleMap(this._styleInfo)}>
-        <svg part=${parts}>${this.renderSvg()}</svg>
+        <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>
+          ${this.renderSvg()}
+        </svg>
         <slot name="gradient"></slot>
         ${this.renderDefaultSlot()}
       </div>
diff --git a/src/components/progress/linear-progress.ts b/src/components/progress/linear-progress.ts
index b4c5bfce5..3dd44fe83 100644
--- a/src/components/progress/linear-progress.ts
+++ b/src/components/progress/linear-progress.ts
@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import type { LinearProgressLabelAlign } from '../types.js';
 import { IgcProgressBaseComponent } from './base.js';
 import { styles } from './themes/linear/linear.progress.base.css.js';
@@ -55,18 +55,18 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
   public labelAlign: LinearProgressLabelAlign = 'top-start';
 
   protected override render() {
-    const parts = partNameMap({
+    const parts = {
       fill: true,
       striped: this.striped,
       indeterminate: this.indeterminate,
       [this.variant]: true,
-    });
+    };
 
     return html`
       <div part="base" style=${styleMap(this._styleInfo)}>
         <div part="track">
-          <div part=${parts}></div>
-          <div part="${parts} secondary"></div>
+          <div part=${partMap(parts)}></div>
+          <div part=${partMap({ ...parts, secondary: true })}></div>
         </div>
         ${this.renderDefaultSlot()}
       </div>
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index f5c5d8678..d3c82c661 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -22,6 +22,7 @@ import {
   createFormValueState,
   defaultBooleanTransformers,
 } from '../common/mixins/forms/form-value.js';
+import { partMap } from '../common/part-map.js';
 import {
   createCounter,
   isDefined,
@@ -29,7 +30,6 @@ import {
   isLTR,
   last,
   noop,
-  partNameMap,
   wrap,
 } from '../common/util.js';
 import type { ToggleLabelPosition } from '../types.js';
@@ -357,7 +357,7 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
 
     return html`
       <label
-        part=${partNameMap({
+        part=${partMap({
           base: true,
           checked,
           focused: this._kbFocus.focused,
@@ -374,21 +374,21 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
           .disabled=${this.disabled}
           .checked=${live(checked)}
           tabindex=${this._tabIndex}
-          aria-checked=${checked ? 'true' : 'false'}
-          aria-disabled=${this.disabled ? 'true' : 'false'}
+          aria-checked=${checked}
+          aria-disabled=${this.disabled}
           aria-labelledby=${labelledBy ? labelledBy : this.labelId}
           @click=${this.handleClick}
           @blur=${this.handleBlur}
         />
-        <span part=${partNameMap({ control: true, checked })}>
+        <span part=${partMap({ control: true, checked })}>
           <span
             .hidden=${this.disabled}
-            part=${partNameMap({ ripple: true, checked })}
+            part=${partMap({ ripple: true, checked })}
           ></span>
         </span>
         <span
           .hidden=${this.hideLabel}
-          part=${partNameMap({ label: true, checked })}
+          part=${partMap({ label: true, checked })}
           id=${this.labelId}
         >
           <slot></slot>
diff --git a/src/components/resize-container/resize-container.ts b/src/components/resize-container/resize-container.ts
index d492f3168..c049bde7b 100644
--- a/src/components/resize-container/resize-container.ts
+++ b/src/components/resize-container/resize-container.ts
@@ -6,7 +6,7 @@ import { themes } from '../../theming/theming-decorator.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 { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import IgcIconComponent from '../icon/icon.js';
 import { addResizeController } from './resize-controller.js';
 import { styles } from './themes/resize-container.base.css.js';
@@ -187,15 +187,15 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
   }
 
   protected override render() {
-    const parts = partNameMap({
+    const parts = {
       'resize-base': true,
       active: this._isActive || this.active,
-    });
+    };
 
     return html`
       <div
         ${ref(this._container)}
-        part=${parts}
+        part=${partMap(parts)}
         @pointerenter=${this.active ? nothing : this._handlePointerEnter}
         @pointerleave=${this.active ? nothing : this._handlePointerLeave}
       >
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 74b4dfa54..629adcd07 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -41,12 +41,8 @@ import {
   type FormValue,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
-import {
-  findElementFromEventPath,
-  isEmpty,
-  isString,
-  partNameMap,
-} from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { findElementFromEventPath, isEmpty, isString } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent, {
@@ -597,12 +593,12 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   }
 
   protected renderToggleIcon() {
-    const parts = partNameMap({ 'toggle-icon': true, filled: this.value! });
+    const parts = { 'toggle-icon': true, filled: this.value! };
     const iconHidden = this.open && !isEmpty(this._expandedIconSlot);
     const iconExpandedHidden = !iconHidden;
 
     return html`
-      <span slot="suffix" part=${parts} aria-hidden="true">
+      <span slot="suffix" part=${partMap(parts)} aria-hidden="true">
         <slot name="toggle-icon" ?hidden=${iconHidden}>
           <igc-icon
             name=${this.open ? 'input_collapse' : 'input_expand'}
diff --git a/src/components/slider/range-slider.ts b/src/components/slider/range-slider.ts
index 47eb5c648..27c574618 100644
--- a/src/components/slider/range-slider.ts
+++ b/src/components/slider/range-slider.ts
@@ -242,7 +242,7 @@ export default class IgcRangeSliderComponent extends EventEmitterMixin<
         aria-valuenow=${value}
         aria-valuetext=${ifDefined(textValue)}
         aria-label=${ifDefined(ariaLabel)}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-disabled=${this.disabled}
         @pointerenter=${this.showThumbLabels}
         @pointerleave=${this.hideThumbLabels}
         @focus=${this.handleFocus}
diff --git a/src/components/slider/slider-base.ts b/src/components/slider/slider-base.ts
index d68453616..d19d85c9b 100644
--- a/src/components/slider/slider-base.ts
+++ b/src/components/slider/slider-base.ts
@@ -571,7 +571,7 @@ export class IgcSliderBaseComponent extends LitElement {
         aria-valuenow=${value}
         aria-valuetext=${ifDefined(textValue)}
         aria-label=${ifDefined(ariaLabel)}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-disabled=${this.disabled}
         @pointerenter=${this.showThumbLabels}
         @pointerleave=${this.hideThumbLabels}
         @focus=${this.handleThumbFocus}
diff --git a/src/components/stepper/step.ts b/src/components/stepper/step.ts
index 9362e8394..a486f427b 100644
--- a/src/components/stepper/step.ts
+++ b/src/components/stepper/step.ts
@@ -8,7 +8,7 @@ import { addAnimationController } from '../../animations/player.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import type {
   StepperOrientation,
   StepperStepType,
@@ -287,7 +287,7 @@ export default class IgcStepComponent extends LitElement {
 
   protected renderTitleAndSubtitle() {
     return html`
-      <div part="${partNameMap(this.textParts)}">
+      <div part=${partMap(this.textParts)}>
         <div part="title">
           <slot name="title"></slot>
         </div>
@@ -319,7 +319,7 @@ export default class IgcStepComponent extends LitElement {
         () => this.renderContent(),
         () => nothing
       )}
-      <div part="${partNameMap(this.headerContainerParts)}">
+      <div part=${partMap(this.headerContainerParts)}>
         <div
           part="header"
           tabindex="${this.active ? '0' : '-1'}"
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 69ba15bc3..b87d926a7 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -27,6 +27,7 @@ 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 {
   findElementFromEventPath,
   first,
@@ -35,7 +36,6 @@ import {
   isLTR,
   isString,
   last,
-  partNameMap,
   scrollIntoView,
   wrap,
 } from '../common/util.js';
@@ -429,11 +429,6 @@ export default class IgcTabsComponent extends EventEmitterMixin<
   }
 
   protected override render() {
-    const part = partNameMap({
-      inner: true,
-      scrollable: this._domHelpers.hasScrollButtons,
-    });
-
     return html`
       <div
         ${ref(this._headerRef)}
@@ -441,7 +436,12 @@ export default class IgcTabsComponent extends EventEmitterMixin<
         style=${styleMap(this._domHelpers.styleProperties)}
         @scroll=${this._handleScroll}
       >
-        <div part=${part}>
+        <div
+          part=${partMap({
+            inner: true,
+            scrollable: this._domHelpers.hasScrollButtons,
+          })}
+        >
           ${this._renderScrollButton('start')}
           <slot @click=${this._handleClick}></slot>
           ${this._renderScrollButton('end')}
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 6c60547f0..0770743af 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -20,12 +20,8 @@ import {
   type FormValue,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
-import {
-  asNumber,
-  createCounter,
-  isEmpty,
-  partNameMap,
-} from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { asNumber, createCounter, isEmpty } from '../common/util.js';
 import type {
   RangeTextSelectMode,
   SelectionRangeDirection,
@@ -463,7 +459,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   protected _renderStandard() {
     return html`
       ${this._renderLabel()}
-      <div part=${partNameMap(this._resolvePartNames())}>
+      <div part=${partMap(this._resolvePartNames())}>
         ${this._renderPrefix()} ${this._renderInput()} ${this._renderSuffix()}
       </div>
       ${this._renderValidationContainer()}
@@ -473,7 +469,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   protected _renderMaterial() {
     return html`
       <div
-        part=${partNameMap({
+        part=${partMap({
           ...this._resolvePartNames(),
           labelled: this.label,
           placeholder: this.placeholder,
diff --git a/src/components/tile-manager/tile-manager.ts b/src/components/tile-manager/tile-manager.ts
index 95ef41a39..88baef98f 100644
--- a/src/components/tile-manager/tile-manager.ts
+++ b/src/components/tile-manager/tile-manager.ts
@@ -13,7 +13,8 @@ import {
   createMutationController,
 } from '../common/controllers/mutation-observer.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { asNumber, partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { asNumber } from '../common/util.js';
 import type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';
 import { createTilesState } from './position.js';
 import { createSerializer } from './serializer.js';
@@ -274,16 +275,16 @@ export default class IgcTileManagerComponent extends LitElement {
   // #region Rendering
 
   protected override render() {
-    const parts = partNameMap({
+    const parts = {
       base: true,
       'maximized-tile': this.tiles.some((tile) => tile.maximized),
-    });
+    };
 
     return html`
       <div
         ${ref(this._grid)}
         style=${styleMap(this._internalStyles)}
-        part=${parts}
+        part=${partMap(parts)}
       >
         <slot></slot>
       </div>
diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
index 6f2ba8e79..c6cf412e4 100644
--- a/src/components/tile-manager/tile.ts
+++ b/src/components/tile-manager/tile.ts
@@ -22,13 +22,13 @@ import { addFullscreenController } from '../common/controllers/fullscreen.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,
-  partNameMap,
 } from '../common/util.js';
 import IgcDividerComponent from '../divider/divider.js';
 import IgcResizeContainerComponent from '../resize-container/resize-container.js';
@@ -666,7 +666,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   protected _renderContent() {
-    const parts = partNameMap({
+    const parts = {
       base: true,
       draggable: this._tileManager?.dragMode !== 'none',
       fullscreen: this.fullscreen,
@@ -675,10 +675,10 @@ export default class IgcTileComponent extends EventEmitterMixin<
         !this.disableResize && this._tileManager?.resizeMode !== 'none',
       resizing: this._isResizing,
       maximized: this.maximized,
-    });
+    };
 
     return html`
-      <div part=${parts}>
+      <div part=${partMap(parts)}>
         ${this._renderHeader()}
         <div part="content-container">
           <slot></slot>
@@ -705,7 +705,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
       ? this._renderContent()
       : html`
           <igc-resize
-            part=${partNameMap({
+            part=${partMap({
               resize: true,
               'side-adorner': this._customAdorners.get('side')!,
               'corner-adorner': this._customAdorners.get('corner')!,
diff --git a/src/components/tree/tree-item.ts b/src/components/tree/tree-item.ts
index a1da99a05..6b3ca9341 100644
--- a/src/components/tree/tree-item.ts
+++ b/src/components/tree/tree-item.ts
@@ -13,11 +13,8 @@ import { themes } from '../../theming/theming-decorator.js';
 import IgcCheckboxComponent from '../checkbox/checkbox.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import {
-  findElementFromEventPath,
-  isLTR,
-  partNameMap,
-} from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { findElementFromEventPath, isLTR } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcCircularProgressComponent from '../progress/circular-progress.js';
 import { styles } from './themes/item.base.css.js';
@@ -264,6 +261,7 @@ export default class IgcTreeItemComponent extends LitElement {
 
   private get parts() {
     return {
+      wrapper: true,
       selected: this.selected,
       focused: this.isFocused,
       active: this.active,
@@ -513,7 +511,7 @@ export default class IgcTreeItemComponent extends LitElement {
     };
 
     return html`
-      <div id="wrapper" part="wrapper ${partNameMap(this.parts)}">
+      <div id="wrapper" part=${partMap(this.parts)}>
         <div
           style="width: calc(${this.level} * var(--igc-tree-indentation-size))"
           part="indentation"
@@ -521,7 +519,7 @@ export default class IgcTreeItemComponent extends LitElement {
         >
           <slot name="indentation"></slot>
         </div>
-        <div part="${partNameMap(indicatorParts)}" aria-hidden="true">
+        <div part=${partMap(indicatorParts)} aria-hidden="true">
           ${this.loading
             ? html`
                 <slot name="loading">
diff --git a/src/components/validation-container/validation-container.ts b/src/components/validation-container/validation-container.ts
index 100945faa..5a07bf036 100644
--- a/src/components/validation-container/validation-container.ts
+++ b/src/components/validation-container/validation-container.ts
@@ -4,7 +4,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { IgcFormControl } from '../common/mixins/forms/types.js';
-import { isEmpty, partNameMap, toKebabCase } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { isEmpty, toKebabCase } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import { styles as shared } from './themes/shared/validator.common.css.js';
 import { all } from './themes/themes.js';
@@ -143,13 +144,8 @@ export default class IgcValidationContainerComponent extends LitElement {
         `
       : null;
 
-    const parts = partNameMap({
-      'validation-message': true,
-      empty: !icon,
-    });
-
     return html`
-      <div part=${parts}>
+      <div part=${partMap({ 'validation-message': true, empty: !icon })}>
         ${icon}
         <slot name=${slotName}></slot>
       </div>
@@ -179,12 +175,8 @@ export default class IgcValidationContainerComponent extends LitElement {
   }
 
   protected override render() {
-    const parts = partNameMap({
-      'helper-text': true,
-      empty: hasProjection(this),
-    });
     return html`
-      <div part=${parts}>
+      <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>
         ${this.invalid
           ? this.renderValidationSlots(this.target.validity)
           : nothing}