diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb80f52be..2c7014a6c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,14 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - New File Input Component(`igc-file-input`)
+- Exposed more public API type aliases for component property types like `ButtonVariant`, `PickerMode`, `StepperOrientation`, `HorizontalTransitionAnimation` (carousel and horizontal stepper) and more.
 
 ### Deprecated
-Some event argument types have been renamed for consistency:
-- `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
-- `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
-- `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
-- `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
-- `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+- Some event argument types have been renamed for consistency:
+  - `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
+  - `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
+  - `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
+  - `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
+  - `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+- Carousel Slide's `toggleAnimation` is now marked internal and deprecated for use in favor of parent Carousel's `select` method.
+- Stepper Step's `toggleAnimation` is now marked internal and deprecated for use in favor of parent Stepper's `navigateTo` method.
 
 ### Fixed
 - Setting validation properties on a pristine non-dirty form associated element does not apply invalid styles [#1632](https://github.com/IgniteUI/igniteui-webcomponents/issues/1632)
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 67a20fde4..9d4e51854 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { AvatarShape } from '../types.js';
 import { styles } from './themes/avatar.base.css.js';
 import { styles as shared } from './themes/shared/avatar.common.css.js';
 import { all } from './themes/themes.js';
@@ -63,7 +64,7 @@ export default class IgcAvatarComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public shape: 'circle' | 'rounded' | 'square' = 'square';
+  public shape: AvatarShape = 'square';
 
   constructor() {
     super();
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 3cf97964c..bdf30c3ae 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import type { StyleVariant } from '../types.js';
+import type { BadgeShape, StyleVariant } from '../types.js';
 import { styles } from './themes/badge.base.css.js';
 import { styles as shared } from './themes/shared/badge.common.css.js';
 import { all } from './themes/themes.js';
@@ -50,7 +50,7 @@ export default class IgcBadgeComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public shape: 'rounded' | 'square' = 'rounded';
+  public shape: BadgeShape = 'rounded';
 
   constructor() {
     super();
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index a7c966315..06e000873 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -11,6 +11,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { findElementFromEventPath, last } from '../common/util.js';
+import type { ButtonGroupSelection, ContentOrientation } from '../types.js';
 import { styles } from './themes/group.base.css.js';
 import { all } from './themes/group.js';
 import { styles as shared } from './themes/shared/group/group.common.css.js';
@@ -91,14 +92,14 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
    * @attr
    */
   @property({ reflect: true })
-  public alignment: 'horizontal' | 'vertical' = 'horizontal';
+  public alignment: ContentOrientation = 'horizontal';
 
   /**
    * Controls the mode of selection for the button group.
    * @attr
    */
   @property({ reflect: false })
-  public selection: 'single' | 'single-required' | 'multiple' = 'single';
+  public selection: ButtonGroupSelection = 'single';
 
   /**
    * Gets/Sets the currently selected buttons (their values).
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 812a810cb..70ede0d6c 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { ButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './themes/button/button.base.css.js';
 import { styles as shared } from './themes/button/shared/button.common.css.js';
@@ -37,7 +38,7 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';
+  public variant: ButtonVariant = 'contained';
 
   protected renderContent() {
     return html`
diff --git a/src/components/button/icon-button.ts b/src/components/button/icon-button.ts
index 57e70615e..d94cd0eca 100644
--- a/src/components/button/icon-button.ts
+++ b/src/components/button/icon-button.ts
@@ -10,6 +10,7 @@ import {
   registerIconFromText as registerIconFromText_impl,
   registerIcon as registerIcon_impl,
 } from '../icon/icon.registry.js';
+import type { IconButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './themes/icon-button/icon-button.base.css.js';
 import { styles as shared } from './themes/icon-button/shared/icon-button.common.css.js';
@@ -58,7 +59,7 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' = 'contained';
+  public variant: IconButtonVariant = 'contained';
 
   protected renderContent() {
     return html`
diff --git a/src/components/calendar/base.ts b/src/components/calendar/base.ts
index ea09f4df1..bc4c12346 100644
--- a/src/components/calendar/base.ts
+++ b/src/components/calendar/base.ts
@@ -7,7 +7,11 @@ import { watch } from '../common/decorators/watch.js';
 import { first } from '../common/util.js';
 import { convertToDate, convertToDates, getWeekDayNumber } from './helpers.js';
 import { CalendarDay } from './model.js';
-import type { DateRangeDescriptor, WeekDays } from './types.js';
+import type {
+  CalendarSelection,
+  DateRangeDescriptor,
+  WeekDays,
+} from './types.js';
 
 @blazorIndirectRender
 @blazorDeepImport
@@ -105,7 +109,7 @@ export class IgcCalendarBaseComponent extends LitElement {
    * @attr selection
    */
   @property()
-  public selection: 'single' | 'multiple' | 'range' = 'single';
+  public selection: CalendarSelection = 'single';
 
   /**
    * Whether to show the week numbers.
diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts
index f2bcf57b7..479dc1747 100644
--- a/src/components/calendar/calendar.ts
+++ b/src/components/calendar/calendar.ts
@@ -32,6 +32,7 @@ import {
   partNameMap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
+import type { ContentOrientation } from '../types.js';
 import { IgcCalendarBaseComponent } from './base.js';
 import IgcDaysViewComponent from './days-view/days-view.js';
 import {
@@ -46,7 +47,11 @@ import { CalendarDay } from './model.js';
 import IgcMonthsViewComponent from './months-view/months-view.js';
 import { styles } from './themes/calendar.base.css.js';
 import { all } from './themes/calendar.js';
-import type { IgcCalendarComponentEventMap } from './types.js';
+import type {
+  CalendarActiveView,
+  CalendarHeaderOrientation,
+  IgcCalendarComponentEventMap,
+} from './types.js';
 import IgcYearsViewComponent from './years-view/years-view.js';
 
 export const focusActiveDate = Symbol();
@@ -186,7 +191,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
    * @attr header-orientation
    */
   @property({ reflect: true, attribute: 'header-orientation' })
-  public headerOrientation: 'vertical' | 'horizontal' = 'horizontal';
+  public headerOrientation: CalendarHeaderOrientation = 'horizontal';
 
   /**
    * The orientation of the calendar months when more than one month
@@ -194,7 +199,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
    * @attr orientation
    */
   @property()
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   /**
    * The number of months displayed in the days view.
@@ -208,7 +213,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
    * @attr active-view
    */
   @property({ attribute: 'active-view' })
-  public activeView: 'days' | 'months' | 'years' = 'days';
+  public activeView: CalendarActiveView = 'days';
 
   /** The options used to format the months and the weekdays in the calendar views. */
   @property({ attribute: false })
diff --git a/src/components/calendar/types.ts b/src/components/calendar/types.ts
index 515ca7197..959113ac5 100644
--- a/src/components/calendar/types.ts
+++ b/src/components/calendar/types.ts
@@ -21,6 +21,9 @@ export type WeekDays =
   | 'thursday'
   | 'friday'
   | 'saturday';
+export type CalendarActiveView = 'days' | 'months' | 'years';
+export type CalendarHeaderOrientation = 'horizontal' | 'vertical';
+export type CalendarSelection = 'single' | 'multiple' | 'range';
 
 export interface IgcCalendarComponentEventMap {
   igcChange: CustomEvent<Date | Date[]>;
diff --git a/src/components/card/card.actions.ts b/src/components/card/card.actions.ts
index 4f272aa0f..8b9732443 100644
--- a/src/components/card/card.actions.ts
+++ b/src/components/card/card.actions.ts
@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { ContentOrientation } from '../types.js';
 import { all } from './themes/actions.js';
 import { styles } from './themes/card.actions.base.css.js';
 
@@ -28,7 +29,7 @@ export default class IgcCardActionsComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   protected override render() {
     return html`
diff --git a/src/components/carousel/carousel-slide.ts b/src/components/carousel/carousel-slide.ts
index 7fc3bb46b..e4e8f1225 100644
--- a/src/components/carousel/carousel-slide.ts
+++ b/src/components/carousel/carousel-slide.ts
@@ -69,6 +69,10 @@ export default class IgcCarouselSlideComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public previous = false;
 
+  /**
+   * @hidden @internal
+   * @deprecated since 5.4.0. Use Carousel's `select` method instead.
+   */
   public async toggleAnimation(
     type: 'in' | 'out',
     direction: 'normal' | 'reverse' = 'normal'
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 3c3a9d879..7a256a457 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -44,6 +44,10 @@ import {
   wrap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
+import type {
+  CarouselIndicatorsOrientation,
+  HorizontalTransitionAnimation,
+} from '../types.js';
 import IgcCarouselIndicatorContainerComponent from './carousel-indicator-container.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import IgcCarouselSlideComponent from './carousel-slide.js';
@@ -217,7 +221,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * @attr indicators-orientation
    */
   @property({ reflect: false, attribute: 'indicators-orientation' })
-  public indicatorsOrientation: 'start' | 'end' = 'end';
+  public indicatorsOrientation: CarouselIndicatorsOrientation = 'end';
 
   /**
    * The format used to set the aria-label on the carousel indicators.
@@ -262,7 +266,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * @attr animation-type
    */
   @property({ attribute: 'animation-type' })
-  public animationType: 'slide' | 'fade' | 'none' = 'slide';
+  public animationType: HorizontalTransitionAnimation = 'slide';
 
   /* blazorSuppress */
   /**
diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
index c8983679d..b73095642 100644
--- a/src/components/checkbox/checkbox-base.ts
+++ b/src/components/checkbox/checkbox-base.ts
@@ -12,6 +12,7 @@ import {
   defaultBooleanTransformers,
 } from '../common/mixins/forms/form-value.js';
 import { isEmpty } from '../common/util.js';
+import type { ToggleLabelPosition } from '../types.js';
 import { checkBoxValidators } from './validators.js';
 
 export interface IgcCheckboxChangeEventArgs {
@@ -19,7 +20,7 @@ export interface IgcCheckboxChangeEventArgs {
   value?: string;
 }
 
-/** @deprecated use IgcCheckboxChangeEventArgs instead */
+/** @deprecated since 5.4.0. Use IgcCheckboxChangeEventArgs instead */
 export type CheckboxChangeEventArgs = IgcCheckboxChangeEventArgs;
 
 export interface IgcCheckboxComponentEventMap {
@@ -90,7 +91,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
    * @attr label-position
    */
   @property({ reflect: true, attribute: 'label-position' })
-  public labelPosition: 'before' | 'after' = 'after';
+  public labelPosition: ToggleLabelPosition = 'after';
 
   constructor() {
     super();
diff --git a/src/components/common/controllers/root-scroll.ts b/src/components/common/controllers/root-scroll.ts
index a25486d52..dbeedad54 100644
--- a/src/components/common/controllers/root-scroll.ts
+++ b/src/components/common/controllers/root-scroll.ts
@@ -1,4 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { PopoverScrollStrategy } from '../../types.js';
 
 type RootScrollControllerConfig = {
   hideCallback?: () => void;
@@ -8,7 +9,7 @@ type RootScrollControllerConfig = {
 type RootScrollControllerHost = ReactiveControllerHost & {
   open: boolean;
   hide(): void;
-  scrollStrategy?: 'scroll' | 'close' | 'block';
+  scrollStrategy?: PopoverScrollStrategy;
 };
 
 type ScrollRecord = { scrollTop: number; scrollLeft: number };
diff --git a/src/components/common/decorators/blazorTypeOverride.ts b/src/components/common/decorators/blazorTypeOverride.ts
deleted file mode 100644
index f25ef6199..000000000
--- a/src/components/common/decorators/blazorTypeOverride.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Indicates an alternate member name that can be used for a member due to collisions in a wrapping API.
- * @param _typeName an alternate type name to use.
- * @param _allWeb indicates that the alternate type is used for all modern web rather than just blazor.
- * @returns a function that does nothing, given that this decorator is for static analysis only.
- */
-export function blazorTypeOverride(_typeName: string, _allWeb = false) {
-  return (_descriptor: any, _memberName: string): any => {};
-}
diff --git a/src/components/common/mixins/alert.ts b/src/components/common/mixins/alert.ts
index 707ef32f0..b429e99da 100644
--- a/src/components/common/mixins/alert.ts
+++ b/src/components/common/mixins/alert.ts
@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import type { addAnimationController } from '../../../animations/player.js';
 import { fadeIn, fadeOut } from '../../../animations/presets/fade/index.js';
+import type { AbsolutePosition } from '../../types.js';
 import { watch } from '../decorators/watch.js';
 
 // It'd be better to have this as a mixin rather than a base class once the analyzer
@@ -42,7 +43,7 @@ export abstract class IgcBaseAlertLikeComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public position: 'bottom' | 'middle' | 'top' = 'bottom';
+  public position: AbsolutePosition = 'bottom';
 
   @watch('displayTime', { waitUntilFirstUpdate: true })
   protected displayTimeChange() {
diff --git a/src/components/date-picker/date-picker.ts b/src/components/date-picker/date-picker.ts
index ecdba772d..06fdfa0c7 100644
--- a/src/components/date-picker/date-picker.ts
+++ b/src/components/date-picker/date-picker.ts
@@ -7,6 +7,7 @@ import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
 import { convertToDate } from '../calendar/helpers.js';
 import {
+  type CalendarHeaderOrientation,
   type DateRangeDescriptor,
   DateRangeType,
   type WeekDays,
@@ -41,7 +42,12 @@ import IgcDialogComponent from '../dialog/dialog.js';
 import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent from '../popover/popover.js';
-import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
+import type {
+  ContentOrientation,
+  PickerMode,
+  RangeTextSelectMode,
+  SelectionRangeDirection,
+} from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/date-picker.base.css.js';
 import { styles as shared } from './themes/shared/date-picker.common.css.js';
@@ -229,7 +235,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
    * @attr mode
    */
   @property()
-  public mode: 'dropdown' | 'dialog' = 'dropdown';
+  public mode: PickerMode = 'dropdown';
 
   /**
    * Whether to allow typing in the input.
@@ -308,14 +314,14 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
    * @attr header-orientation
    */
   @property({ attribute: 'header-orientation', reflect: true })
-  public headerOrientation: 'vertical' | 'horizontal' = 'horizontal';
+  public headerOrientation: CalendarHeaderOrientation = 'horizontal';
 
   /**
    * The orientation of the multiple months displayed in the calendar's days view.
    *  @attr
    */
   @property()
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   /**
    * Determines whether the calendar hides its header.
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index 8a8e3ae31..5f0a2e4df 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { DividerType } from '../types.js';
 import { styles } from './themes/divider.base.css.js';
 import { styles as shared } from './themes/shared/divider.common.css.js';
 import { all } from './themes/themes.js';
@@ -60,7 +61,7 @@ export default class IgcDividerComponent extends LitElement {
    */
 
   @property({ reflect: true })
-  public type: 'solid' | 'dashed' = 'solid';
+  public type: DividerType = 'solid';
 
   constructor() {
     super();
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 25b94d433..ad0d47a4c 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -37,6 +37,7 @@ import {
 import IgcPopoverComponent, {
   type PopoverPlacement,
 } from '../popover/popover.js';
+import type { PopoverScrollStrategy } from '../types.js';
 import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownHeaderComponent from './dropdown-header.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
@@ -121,7 +122,6 @@ export default class IgcDropdownComponent extends EventEmitterMixin<
   protected trigger!: HTMLSlotElement;
 
   /** The preferred placement of the component around the target element.
-   * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'}
    * @attr
    */
   @property()
@@ -132,7 +132,7 @@ export default class IgcDropdownComponent extends EventEmitterMixin<
    * @attr scroll-strategy
    */
   @property({ attribute: 'scroll-strategy' })
-  public scrollStrategy: 'scroll' | 'block' | 'close' = 'scroll';
+  public scrollStrategy: PopoverScrollStrategy = 'scroll';
 
   /**
    * Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.
diff --git a/src/components/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel.ts
index 684fc198c..cb3ad7f64 100644
--- a/src/components/expansion-panel/expansion-panel.ts
+++ b/src/components/expansion-panel/expansion-panel.ts
@@ -16,6 +16,7 @@ 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';
 import { styles as shared } from './themes/shared/expansion-panel.common.css.js';
 import { all } from './themes/themes.js';
@@ -94,7 +95,7 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin<
    * @attr indicator-position
    */
   @property({ reflect: true, attribute: 'indicator-position' })
-  public indicatorPosition: 'start' | 'end' | 'none' = 'start';
+  public indicatorPosition: ExpansionPanelIndicatorPosition = 'start';
 
   constructor() {
     super();
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index edee889c1..3592ae613 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -9,7 +9,7 @@ import {
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
 import { isEmpty, partNameMap } from '../common/util.js';
-import type { RangeTextSelectMode } from '../types.js';
+import type { InputType, RangeTextSelectMode } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcInputBaseComponent } from './input-base.js';
 import { numberValidators, stringValidators } from './validators.js';
@@ -83,14 +83,7 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public type:
-    | 'email'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'url' = 'text';
+  public type: InputType = 'text';
 
   /**
    * The input mode attribute of the control.
diff --git a/src/components/mask-input/mask-input.ts b/src/components/mask-input/mask-input.ts
index 36d3afeb5..a642a7aec 100644
--- a/src/components/mask-input/mask-input.ts
+++ b/src/components/mask-input/mask-input.ts
@@ -10,6 +10,7 @@ import {
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
 import { isEmpty, partNameMap } from '../common/util.js';
+import type { MaskInputValueMode } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import {
   IgcMaskInputBaseComponent,
@@ -67,7 +68,7 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
    * @attr value-mode
    */
   @property({ attribute: 'value-mode' })
-  public valueMode: 'raw' | 'withFormatting' = 'raw';
+  public valueMode: MaskInputValueMode = 'raw';
 
   /**
    * The value of the input.
diff --git a/src/components/nav-drawer/nav-drawer.ts b/src/components/nav-drawer/nav-drawer.ts
index ce8e51dd2..6b7beda5e 100644
--- a/src/components/nav-drawer/nav-drawer.ts
+++ b/src/components/nav-drawer/nav-drawer.ts
@@ -4,6 +4,7 @@ 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 type { NavDrawerPosition } from '../types.js';
 import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
 import IgcNavDrawerItemComponent from './nav-drawer-item.js';
 import { styles } from './themes/container.base.css.js';
@@ -45,7 +46,7 @@ export default class IgcNavDrawerComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public position: 'start' | 'end' | 'top' | 'bottom' | 'relative' = 'start';
+  public position: NavDrawerPosition = 'start';
 
   /**
    * Determines whether the drawer is opened.
diff --git a/src/components/progress/linear-progress.ts b/src/components/progress/linear-progress.ts
index 79b46e3cd..b4c5bfce5 100644
--- a/src/components/progress/linear-progress.ts
+++ b/src/components/progress/linear-progress.ts
@@ -4,6 +4,7 @@ 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 type { LinearProgressLabelAlign } from '../types.js';
 import { IgcProgressBaseComponent } from './base.js';
 import { styles } from './themes/linear/linear.progress.base.css.js';
 import { styles as shared } from './themes/linear/shared/linear.progress.common.css.js';
@@ -51,13 +52,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
    * @attr label-align
    */
   @property({ attribute: 'label-align', reflect: true })
-  public labelAlign:
-    | 'top-start'
-    | 'top'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom'
-    | 'bottom-end' = 'top-start';
+  public labelAlign: LinearProgressLabelAlign = 'top-start';
 
   protected override render() {
     const parts = partNameMap({
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 6daf872be..64e8d269e 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -4,6 +4,7 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcRadioComponent from '../radio/radio.js';
+import type { ContentOrientation } from '../types.js';
 import { styles } from './radio-group.base.css.js';
 import { styles as fluent } from './radio-group.fluent.css.js';
 import { styles as indigo } from './radio-group.indigo.css.js';
@@ -42,7 +43,7 @@ export default class IgcRadioGroupComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public alignment: 'vertical' | 'horizontal' = 'vertical';
+  public alignment: ContentOrientation = 'vertical';
 
   /* blazorCSSuppress */
   @property({ attribute: false })
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 1a39988d8..a0d2a47fe 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -32,6 +32,7 @@ import {
   partNameMap,
   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';
 import { styles as shared } from './themes/shared/radio.common.css.js';
@@ -44,7 +45,7 @@ export interface IgcRadioChangeEventArgs {
   value?: string;
 }
 
-/** @deprecated use IgcRadioChangeEventArgs instead */
+/** @deprecated since 5.4.0. Use IgcRadioChangeEventArgs instead */
 export type RadioChangeEventArgs = IgcRadioChangeEventArgs;
 
 export interface IgcRadioComponentEventMap {
@@ -186,7 +187,7 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
    * @attr label-position
    */
   @property({ reflect: true, attribute: 'label-position' })
-  public labelPosition: 'before' | 'after' = 'after';
+  public labelPosition: ToggleLabelPosition = 'after';
 
   constructor() {
     super();
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index e4d72919b..74b4dfa54 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -52,6 +52,7 @@ import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent, {
   type PopoverPlacement,
 } from '../popover/popover.js';
+import type { PopoverScrollStrategy } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import IgcSelectGroupComponent from './select-group.js';
 import IgcSelectHeaderComponent from './select-header.js';
@@ -223,7 +224,6 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   public placeholder!: string;
 
   /** The preferred placement of the select dropdown around its input.
-   * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'}
    * @attr
    */
   @property()
@@ -234,7 +234,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
    * @attr scroll-strategy
    */
   @property({ attribute: 'scroll-strategy' })
-  public scrollStrategy: 'scroll' | 'block' | 'close' = 'scroll';
+  public scrollStrategy: PopoverScrollStrategy = 'scroll';
 
   /** Returns the items of the igc-select component. */
   public get items() {
diff --git a/src/components/slider/range-slider.ts b/src/components/slider/range-slider.ts
index a9fae826e..d7032f72e 100644
--- a/src/components/slider/range-slider.ts
+++ b/src/components/slider/range-slider.ts
@@ -16,7 +16,7 @@ export interface IgcRangeSliderValueEventArgs {
   upper: number;
 }
 
-/** @deprecated use IgcRangeSliderValueEventArgs instead */
+/** @deprecated since 5.4.0. Use IgcRangeSliderValueEventArgs instead */
 export type IgcRangeSliderValue = IgcRangeSliderValueEventArgs;
 
 export interface IgcRangeSliderComponentEventMap {
diff --git a/src/components/slider/slider-base.ts b/src/components/slider/slider-base.ts
index 9abac4020..d68453616 100644
--- a/src/components/slider/slider-base.ts
+++ b/src/components/slider/slider-base.ts
@@ -21,7 +21,6 @@ import {
   pageUpKey,
 } from '../common/controllers/key-bindings.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
-import { blazorTypeOverride } from '../common/decorators/blazorTypeOverride.js';
 import { watch } from '../common/decorators/watch.js';
 import {
   asNumber,
@@ -31,6 +30,10 @@ import {
   isDefined,
   isLTR,
 } from '../common/util.js';
+import type {
+  SliderTickLabelRotation,
+  SliderTickOrientation,
+} from '../types.js';
 import { styles as shared } from './themes/shared/slider.common.css.js';
 import { styles } from './themes/slider.base.css.js';
 import { all } from './themes/themes.js';
@@ -222,7 +225,7 @@ export class IgcSliderBaseComponent extends LitElement {
    * @attr tick-orientation
    */
   @property({ attribute: 'tick-orientation' })
-  public tickOrientation: 'mirror' | 'start' | 'end' = 'end';
+  public tickOrientation: SliderTickOrientation = 'end';
 
   /**
    * Hides the primary tick labels.
@@ -264,8 +267,7 @@ export class IgcSliderBaseComponent extends LitElement {
    * @attr tick-label-rotation
    */
   @property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })
-  @blazorTypeOverride('TickLabelRotation', true)
-  public tickLabelRotation: 0 | 90 | -90 = 0;
+  public tickLabelRotation: SliderTickLabelRotation = 0;
 
   @watch('min', { waitUntilFirstUpdate: true })
   @watch('max', { waitUntilFirstUpdate: true })
diff --git a/src/components/stepper/animations.ts b/src/components/stepper/animations.ts
index 9bcf6fa66..30fc3329e 100644
--- a/src/components/stepper/animations.ts
+++ b/src/components/stepper/animations.ts
@@ -3,13 +3,19 @@ import {
   type AnimationReferenceMetadata,
   animation,
 } from '../../animations/types.js';
+import type {
+  HorizontalTransitionAnimation,
+  StepperVerticalAnimation,
+} from '../types.js';
 
 const baseOptions: KeyframeAnimationOptions = {
   duration: 320,
   easing: EaseOut.Quad,
 };
 
-export type Animation = 'grow' | 'fade' | 'slide' | 'none';
+export type Animation =
+  | StepperVerticalAnimation
+  | HorizontalTransitionAnimation;
 
 export type AnimationOptions = {
   keyframe: KeyframeAnimationOptions;
diff --git a/src/components/stepper/step.ts b/src/components/stepper/step.ts
index cee698b48..464a6ac71 100644
--- a/src/components/stepper/step.ts
+++ b/src/components/stepper/step.ts
@@ -9,6 +9,11 @@ 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 type {
+  StepperOrientation,
+  StepperStepType,
+  StepperTitlePosition,
+} from '../types.js';
 import {
   type Animation,
   bodyAnimations,
@@ -117,15 +122,15 @@ export default class IgcStepComponent extends LitElement {
 
   /** @hidden @internal @private */
   @property({ attribute: false })
-  public stepType: 'indicator' | 'title' | 'full' = 'full';
+  public stepType: StepperStepType = 'full';
 
   /** @hidden @internal @private */
   @property({ attribute: false })
-  public titlePosition?: 'bottom' | 'top' | 'end' | 'start';
+  public titlePosition?: StepperTitlePosition;
 
   /** @hidden @internal @private */
   @property({ attribute: false })
-  public orientation: 'horizontal' | 'vertical' = 'horizontal';
+  public orientation: StepperOrientation = 'horizontal';
 
   /** @hidden @internal @private */
   @property({ attribute: false })
@@ -151,6 +156,10 @@ export default class IgcStepComponent extends LitElement {
   @property({ attribute: false })
   public animationDuration = 350;
 
+  /**
+   * @hidden @internal
+   * @deprecated since 5.4.0. Use the Stepper's `navigateTo` method instead.
+   */
   public async toggleAnimation(
     type: 'in' | 'out',
     direction: 'normal' | 'reverse' = 'normal'
diff --git a/src/components/stepper/stepper.common.ts b/src/components/stepper/stepper.common.ts
index 07a9ce0b4..054d448bd 100644
--- a/src/components/stepper/stepper.common.ts
+++ b/src/components/stepper/stepper.common.ts
@@ -7,9 +7,9 @@ export interface IgcActiveStepChangedEventArgs {
   index: number;
 }
 
-/** @deprecated use IgcActiveStepChangingEventArgs instead */
+/** @deprecated since 5.4.0. Use IgcActiveStepChangingEventArgs instead */
 export type IgcActiveStepChangingArgs = IgcActiveStepChangingEventArgs;
-/** @deprecated use IgcActiveStepChangedEventArgs instead */
+/** @deprecated since 5.4.0. Use IgcActiveStepChangedEventArgs instead */
 export type IgcActiveStepChangedArgs = IgcActiveStepChangedEventArgs;
 
 export interface IgcStepperComponentEventMap {
diff --git a/src/components/stepper/stepper.ts b/src/components/stepper/stepper.ts
index bb67d82d7..fb5913ac6 100644
--- a/src/components/stepper/stepper.ts
+++ b/src/components/stepper/stepper.ts
@@ -7,6 +7,13 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { isLTR } from '../common/util.js';
+import type {
+  HorizontalTransitionAnimation,
+  StepperOrientation,
+  StepperStepType,
+  StepperTitlePosition,
+  StepperVerticalAnimation,
+} from '../types.js';
 import IgcStepComponent from './step.js';
 import type { IgcStepperComponentEventMap } from './stepper.common.js';
 import { styles } from './themes/stepper/stepper.base.css.js';
@@ -72,7 +79,7 @@ export default class IgcStepperComponent extends EventEmitterMixin<
    * Default value is `horizontal`.
    */
   @property({ reflect: true })
-  public orientation: 'horizontal' | 'vertical' = 'horizontal';
+  public orientation: StepperOrientation = 'horizontal';
 
   /** Get/Set the type of the steps.
    *
@@ -80,7 +87,7 @@ export default class IgcStepperComponent extends EventEmitterMixin<
    * Default value is `full`.
    */
   @property({ reflect: true, attribute: 'step-type' })
-  public stepType: 'indicator' | 'title' | 'full' = 'full';
+  public stepType: StepperStepType = 'full';
 
   /**
    * Get/Set whether the stepper is linear.
@@ -105,14 +112,14 @@ export default class IgcStepperComponent extends EventEmitterMixin<
    * @attr vertical-animation
    */
   @property({ attribute: 'vertical-animation' })
-  public verticalAnimation: 'grow' | 'fade' | 'none' = 'grow';
+  public verticalAnimation: StepperVerticalAnimation = 'grow';
 
   /**
    * The animation type when in horizontal mode.
    * @attr horizontal-animation
    */
   @property({ attribute: 'horizontal-animation' })
-  public horizontalAnimation: 'slide' | 'fade' | 'none' = 'slide';
+  public horizontalAnimation: HorizontalTransitionAnimation = 'slide';
 
   /**
    * The animation duration in either vertical or horizontal mode.
@@ -130,7 +137,7 @@ export default class IgcStepperComponent extends EventEmitterMixin<
    * When the stepper is horizontally orientated the title is positioned on the right side of the indicator.
    */
   @property({ reflect: false, attribute: 'title-position' })
-  public titlePosition?: 'bottom' | 'top' | 'end' | 'start';
+  public titlePosition?: StepperTitlePosition;
 
   @watch('orientation', { waitUntilFirstUpdate: true })
   protected orientationChange(): void {
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 910481dc3..a6600ddbf 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -27,6 +27,7 @@ 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, getOffset, isLTR, wrap } from '../common/util.js';
+import type { TabsActivation, TabsAlignment } from '../types.js';
 import IgcTabPanelComponent from './tab-panel.js';
 import IgcTabComponent from './tab.js';
 import { styles as shared } from './themes/shared/tabs/tabs.common.css.js';
@@ -170,7 +171,7 @@ export default class IgcTabsComponent extends EventEmitterMixin<
    * @attr
    */
   @property({ reflect: true })
-  public alignment: 'start' | 'end' | 'center' | 'justify' = 'start';
+  public alignment: TabsAlignment = 'start';
 
   /**
    * Determines the tab activation. When set to auto,
@@ -180,7 +181,7 @@ export default class IgcTabsComponent extends EventEmitterMixin<
    * @attr
    */
   @property()
-  public activation: 'auto' | 'manual' = 'auto';
+  public activation: TabsActivation = 'auto';
 
   @watch('alignment', { waitUntilFirstUpdate: true })
   protected alignIndicator() {
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 86175e616..e656266b5 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -25,7 +25,11 @@ import {
   isEmpty,
   partNameMap,
 } from '../common/util.js';
-import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
+import type {
+  RangeTextSelectMode,
+  SelectionRangeDirection,
+  TextareaResize,
+} from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles as shared } from './themes/shared/textarea.common.css.js';
 import { styles } from './themes/textarea.base.css.js';
@@ -228,7 +232,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
    * @attr
    */
   @property()
-  public resize: 'auto' | 'vertical' | 'none' = 'vertical';
+  public resize: TextareaResize = 'vertical';
 
   /**
    * The number of visible text lines for the control. If it is specified, it must be a positive integer.
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index c6cc86955..2a13ea358 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -7,6 +7,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 type { TreeSelection } from '../types.js';
 import { styles } from './themes/container.base.css.js';
 import { all } from './themes/container.js';
 import IgcTreeItemComponent from './tree-item.js';
@@ -68,7 +69,7 @@ export default class IgcTreeComponent extends EventEmitterMixin<
    * @attr
    */
   @property({ reflect: true })
-  public selection: 'none' | 'multiple' | 'cascade' = 'none';
+  public selection: TreeSelection = 'none';
 
   @watch('dir')
   protected onDirChange(): void {
diff --git a/src/components/types.ts b/src/components/types.ts
index 192c9b2ef..4fe2ebcbf 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -1,11 +1,59 @@
+// Public API types
+// NOTE: use default value as first in order where possible for union types
+
+//#region shared types
+export type AbsolutePosition = 'bottom' | 'middle' | 'top';
+export type ContentOrientation = 'horizontal' | 'vertical';
+export type HorizontalTransitionAnimation = 'slide' | 'fade' | 'none';
+export type PickerMode = 'dropdown' | 'dialog';
+export type PopoverScrollStrategy = 'scroll' | 'block' | 'close';
+export type RangeTextSelectMode = 'preserve' | 'select' | 'start' | 'end';
+export type SelectionRangeDirection = 'none' | 'backward' | 'forward';
 export type StyleVariant =
   | 'primary'
   | 'info'
   | 'success'
   | 'warning'
   | 'danger';
-export type SelectionRangeDirection = 'none' | 'backward' | 'forward';
-export type RangeTextSelectMode = 'preserve' | 'select' | 'start' | 'end';
+export type ToggleLabelPosition = 'after' | 'before';
+export type TreeSelection = 'none' | 'multiple' | 'cascade';
+//#endregion
 
+//#region component-specific
+export type AvatarShape = 'square' | 'circle' | 'rounded';
+export type BadgeShape = 'rounded' | 'square';
+export type ButtonGroupSelection = 'single' | 'single-required' | 'multiple';
+export type ButtonVariant = 'contained' | 'flat' | 'outlined' | 'fab';
+export type CarouselIndicatorsOrientation = 'end' | 'start';
+export type DividerType = 'solid' | 'dashed';
+export type ExpansionPanelIndicatorPosition = 'start' | 'end' | 'none';
+export type IconButtonVariant = 'contained' | 'flat' | 'outlined';
+export type InputType =
+  | 'email'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'url';
+export type LinearProgressLabelAlign =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end';
+export type MaskInputValueMode = 'raw' | 'withFormatting';
+export type NavDrawerPosition = 'start' | 'end' | 'top' | 'bottom' | 'relative';
+export type SliderTickLabelRotation = 0 | 90 | -90;
+export type SliderTickOrientation = 'end' | 'mirror' | 'start';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperStepType = 'full' | 'indicator' | 'title';
+export type StepperTitlePosition = 'bottom' | 'top' | 'end' | 'start';
+export type StepperVerticalAnimation = 'grow' | 'fade' | 'none';
+export type TabsActivation = 'auto' | 'manual';
+export type TabsAlignment = 'start' | 'end' | 'center' | 'justify';
+export type TextareaResize = 'vertical' | 'auto' | 'none';
 export type TileManagerDragMode = 'none' | 'tile-header' | 'tile';
 export type TileManagerResizeMode = 'none' | 'hover' | 'always';
+//#endregion
diff --git a/src/index.ts b/src/index.ts
index a2eefb895..a9739192f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -118,15 +118,12 @@ export type { IgcTileComponentEventMap } from './components/tile-manager/tile.js
 export type { IgcTreeComponentEventMap } from './components/tree/tree.common.js';
 
 // Public types
-export type {
-  RangeTextSelectMode,
-  SelectionRangeDirection,
-  StyleVariant,
-  TileManagerDragMode,
-  TileManagerResizeMode,
-} from './components/types.js';
+export type * from './components/types.js';
 export type { IgcTileChangeStateEventArgs } from './components/tile-manager/tile.js';
 export type {
+  CalendarActiveView,
+  CalendarHeaderOrientation,
+  CalendarSelection,
   DateRangeDescriptor,
   WeekDays,
 } from './components/calendar/types.js';
diff --git a/stories/avatar.stories.ts b/stories/avatar.stories.ts
index 11eea3832..3e64a7e1b 100644
--- a/stories/avatar.stories.ts
+++ b/stories/avatar.stories.ts
@@ -38,9 +38,9 @@ const metadata: Meta<IgcAvatarComponent> = {
       control: 'text',
     },
     shape: {
-      type: '"circle" | "rounded" | "square"',
+      type: '"square" | "circle" | "rounded"',
       description: 'The shape of the avatar.',
-      options: ['circle', 'rounded', 'square'],
+      options: ['square', 'circle', 'rounded'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'square' } },
     },
@@ -58,7 +58,7 @@ interface IgcAvatarArgs {
   /** Initials to use as a fallback when no image is available. */
   initials: string;
   /** The shape of the avatar. */
-  shape: 'circle' | 'rounded' | 'square';
+  shape: 'square' | 'circle' | 'rounded';
 }
 type Story = StoryObj<IgcAvatarArgs>;
 
diff --git a/stories/button.stories.ts b/stories/button.stories.ts
index 200f0b5db..e2fb85853 100644
--- a/stories/button.stories.ts
+++ b/stories/button.stories.ts
@@ -24,9 +24,9 @@ const metadata: Meta<IgcButtonComponent> = {
   },
   argTypes: {
     variant: {
-      type: '"flat" | "contained" | "outlined" | "fab"',
+      type: '"contained" | "flat" | "outlined" | "fab"',
       description: 'Sets the variant of the button.',
-      options: ['flat', 'contained', 'outlined', 'fab'],
+      options: ['contained', 'flat', 'outlined', 'fab'],
       control: { type: 'select' },
       table: { defaultValue: { summary: 'contained' } },
     },
@@ -75,7 +75,7 @@ export default metadata;
 
 interface IgcButtonArgs {
   /** Sets the variant of the button. */
-  variant: 'flat' | 'contained' | 'outlined' | 'fab';
+  variant: 'contained' | 'flat' | 'outlined' | 'fab';
   /** The type of the button. Defaults to `button`. */
   type: 'button' | 'reset' | 'submit';
   /** The URL the button points to. */
diff --git a/stories/calendar.stories.ts b/stories/calendar.stories.ts
index b93d16dba..6afeec943 100644
--- a/stories/calendar.stories.ts
+++ b/stories/calendar.stories.ts
@@ -40,17 +40,17 @@ const metadata: Meta<IgcCalendarComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     headerOrientation: {
-      type: '"vertical" | "horizontal"',
+      type: '"horizontal" | "vertical"',
       description: 'The orientation of the calendar header.',
-      options: ['vertical', 'horizontal'],
+      options: ['horizontal', 'vertical'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'horizontal' } },
     },
     orientation: {
-      type: '"vertical" | "horizontal"',
+      type: '"horizontal" | "vertical"',
       description:
         'The orientation of the calendar months when more than one month\nis being shown.',
-      options: ['vertical', 'horizontal'],
+      options: ['horizontal', 'vertical'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'horizontal' } },
     },
@@ -140,12 +140,12 @@ interface IgcCalendarArgs {
    */
   hideHeader: boolean;
   /** The orientation of the calendar header. */
-  headerOrientation: 'vertical' | 'horizontal';
+  headerOrientation: 'horizontal' | 'vertical';
   /**
    * The orientation of the calendar months when more than one month
    * is being shown.
    */
-  orientation: 'vertical' | 'horizontal';
+  orientation: 'horizontal' | 'vertical';
   /** The number of months displayed in the days view. */
   visibleMonths: number;
   /** The current active view of the component. */
diff --git a/stories/carousel.stories.ts b/stories/carousel.stories.ts
index 4c4df57c6..10968fdcc 100644
--- a/stories/carousel.stories.ts
+++ b/stories/carousel.stories.ts
@@ -68,9 +68,9 @@ const metadata: Meta<IgcCarouselComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     indicatorsOrientation: {
-      type: '"start" | "end"',
+      type: '"end" | "start"',
       description: 'Sets the orientation of the indicator controls (dots).',
-      options: ['start', 'end'],
+      options: ['end', 'start'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'end' } },
     },
@@ -137,7 +137,7 @@ interface IgcCarouselArgs {
   /** Whether the carousel has vertical alignment. */
   vertical: boolean;
   /** Sets the orientation of the indicator controls (dots). */
-  indicatorsOrientation: 'start' | 'end';
+  indicatorsOrientation: 'end' | 'start';
   /**
    * The format used to set the aria-label on the carousel indicators.
    * Instances of '{0}' will be replaced with the index of the corresponding slide.
diff --git a/stories/checkbox.stories.ts b/stories/checkbox.stories.ts
index 20eda12e3..e917ae42a 100644
--- a/stories/checkbox.stories.ts
+++ b/stories/checkbox.stories.ts
@@ -66,9 +66,9 @@ const metadata: Meta<IgcCheckboxComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     labelPosition: {
-      type: '"before" | "after"',
+      type: '"after" | "before"',
       description: 'The label position of the control.',
-      options: ['before', 'after'],
+      options: ['after', 'before'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'after' } },
     },
@@ -101,7 +101,7 @@ interface IgcCheckboxArgs {
   /** The checked state of the control. */
   checked: boolean;
   /** The label position of the control. */
-  labelPosition: 'before' | 'after';
+  labelPosition: 'after' | 'before';
 }
 type Story = StoryObj<IgcCheckboxArgs>;
 
diff --git a/stories/icon-button.stories.ts b/stories/icon-button.stories.ts
index 085040232..163a1bd31 100644
--- a/stories/icon-button.stories.ts
+++ b/stories/icon-button.stories.ts
@@ -37,9 +37,9 @@ const metadata: Meta<IgcIconButtonComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     variant: {
-      type: '"flat" | "contained" | "outlined"',
+      type: '"contained" | "flat" | "outlined"',
       description: 'The visual variant of the icon button.',
-      options: ['flat', 'contained', 'outlined'],
+      options: ['contained', 'flat', 'outlined'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'contained' } },
     },
@@ -99,7 +99,7 @@ interface IgcIconButtonArgs {
   /** Whether to flip the icon button. Useful for RTL layouts. */
   mirrored: boolean;
   /** The visual variant of the icon button. */
-  variant: 'flat' | 'contained' | 'outlined';
+  variant: 'contained' | 'flat' | 'outlined';
   /** The type of the button. Defaults to `button`. */
   type: 'button' | 'reset' | 'submit';
   /** The URL the button points to. */
diff --git a/stories/radio-group.stories.ts b/stories/radio-group.stories.ts
index a3a9a2a0a..f896a003f 100644
--- a/stories/radio-group.stories.ts
+++ b/stories/radio-group.stories.ts
@@ -24,9 +24,9 @@ const metadata: Meta<IgcRadioGroupComponent> = {
   },
   argTypes: {
     alignment: {
-      type: '"vertical" | "horizontal"',
+      type: '"horizontal" | "vertical"',
       description: 'Alignment of the radio controls inside this group.',
-      options: ['vertical', 'horizontal'],
+      options: ['horizontal', 'vertical'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'vertical' } },
     },
@@ -49,7 +49,7 @@ export default metadata;
 
 interface IgcRadioGroupArgs {
   /** Alignment of the radio controls inside this group. */
-  alignment: 'vertical' | 'horizontal';
+  alignment: 'horizontal' | 'vertical';
   /** Gets/Sets the name for all child igc-radio components. */
   name: string;
   /** Gets/Sets the checked igc-radio element that matches `value` */
diff --git a/stories/radio.stories.ts b/stories/radio.stories.ts
index 41819d1e1..f28735356 100644
--- a/stories/radio.stories.ts
+++ b/stories/radio.stories.ts
@@ -33,9 +33,9 @@ const metadata: Meta<IgcRadioComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     labelPosition: {
-      type: '"before" | "after"',
+      type: '"after" | "before"',
       description: 'The label position of the radio control.',
-      options: ['before', 'after'],
+      options: ['after', 'before'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'after' } },
     },
@@ -76,7 +76,7 @@ interface IgcRadioArgs {
   /** The checked state of the control. */
   checked: boolean;
   /** The label position of the radio control. */
-  labelPosition: 'before' | 'after';
+  labelPosition: 'after' | 'before';
   /** The name attribute of the control. */
   name: string;
   /** The disabled state of the component. */
diff --git a/stories/range-slider.stories.ts b/stories/range-slider.stories.ts
index ac8d5894f..7babeaced 100644
--- a/stories/range-slider.stories.ts
+++ b/stories/range-slider.stories.ts
@@ -107,9 +107,9 @@ const metadata: Meta<IgcRangeSliderComponent> = {
       table: { defaultValue: { summary: '0' } },
     },
     tickOrientation: {
-      type: '"mirror" | "start" | "end"',
+      type: '"end" | "mirror" | "start"',
       description: 'Changes the orientation of the ticks.',
-      options: ['mirror', 'start', 'end'],
+      options: ['end', 'mirror', 'start'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'end' } },
     },
@@ -139,10 +139,10 @@ const metadata: Meta<IgcRangeSliderComponent> = {
       control: 'text',
     },
     tickLabelRotation: {
-      type: '0 | 90 | -90',
+      type: '"0" | "90"',
       description:
         'The degrees for the rotation of the tick labels. Defaults to 0.',
-      options: ['0', '90', '-90'],
+      options: ['0', '90'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: '0' } },
     },
@@ -220,7 +220,7 @@ interface IgcRangeSliderArgs {
   /** The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed. */
   secondaryTicks: number;
   /** Changes the orientation of the ticks. */
-  tickOrientation: 'mirror' | 'start' | 'end';
+  tickOrientation: 'end' | 'mirror' | 'start';
   /** Hides the primary tick labels. */
   hidePrimaryLabels: boolean;
   /** Hides the secondary tick labels. */
@@ -230,7 +230,7 @@ interface IgcRangeSliderArgs {
   /** String format used for the thumb and tick label values in the slider. */
   valueFormat: string;
   /** The degrees for the rotation of the tick labels. Defaults to 0. */
-  tickLabelRotation: 0 | 90 | -90;
+  tickLabelRotation: '0' | '90';
 }
 type Story = StoryObj<IgcRangeSliderArgs>;
 
diff --git a/stories/slider.stories.ts b/stories/slider.stories.ts
index d4606269e..bd00fa112 100644
--- a/stories/slider.stories.ts
+++ b/stories/slider.stories.ts
@@ -104,9 +104,9 @@ const metadata: Meta<IgcSliderComponent> = {
       table: { defaultValue: { summary: '0' } },
     },
     tickOrientation: {
-      type: '"mirror" | "start" | "end"',
+      type: '"end" | "mirror" | "start"',
       description: 'Changes the orientation of the ticks.',
-      options: ['mirror', 'start', 'end'],
+      options: ['end', 'mirror', 'start'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'end' } },
     },
@@ -136,10 +136,10 @@ const metadata: Meta<IgcSliderComponent> = {
       control: 'text',
     },
     tickLabelRotation: {
-      type: '0 | 90 | -90',
+      type: '"0" | "90"',
       description:
         'The degrees for the rotation of the tick labels. Defaults to 0.',
-      options: ['0', '90', '-90'],
+      options: ['0', '90'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: '0' } },
     },
@@ -216,7 +216,7 @@ interface IgcSliderArgs {
   /** The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed. */
   secondaryTicks: number;
   /** Changes the orientation of the ticks. */
-  tickOrientation: 'mirror' | 'start' | 'end';
+  tickOrientation: 'end' | 'mirror' | 'start';
   /** Hides the primary tick labels. */
   hidePrimaryLabels: boolean;
   /** Hides the secondary tick labels. */
@@ -226,7 +226,7 @@ interface IgcSliderArgs {
   /** String format used for the thumb and tick label values in the slider. */
   valueFormat: string;
   /** The degrees for the rotation of the tick labels. Defaults to 0. */
-  tickLabelRotation: 0 | 90 | -90;
+  tickLabelRotation: '0' | '90';
 }
 type Story = StoryObj<IgcSliderArgs>;
 
diff --git a/stories/stepper.stories.ts b/stories/stepper.stories.ts
index 55c4e41ec..87f7677af 100644
--- a/stories/stepper.stories.ts
+++ b/stories/stepper.stories.ts
@@ -33,9 +33,9 @@ const metadata: Meta<IgcStepperComponent> = {
       table: { defaultValue: { summary: 'horizontal' } },
     },
     stepType: {
-      type: '"indicator" | "title" | "full"',
+      type: '"full" | "indicator" | "title"',
       description: 'Get/Set the type of the steps.',
-      options: ['indicator', 'title', 'full'],
+      options: ['full', 'indicator', 'title'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'full' } },
     },
@@ -96,7 +96,7 @@ interface IgcStepperArgs {
   /** Gets/Sets the orientation of the stepper. */
   orientation: 'horizontal' | 'vertical';
   /** Get/Set the type of the steps. */
-  stepType: 'indicator' | 'title' | 'full';
+  stepType: 'full' | 'indicator' | 'title';
   /** Get/Set whether the stepper is linear. */
   linear: boolean;
   /** Get/Set whether the content is displayed above the steps. */
diff --git a/stories/switch.stories.ts b/stories/switch.stories.ts
index 6c8d59be0..39eabdbd7 100644
--- a/stories/switch.stories.ts
+++ b/stories/switch.stories.ts
@@ -61,9 +61,9 @@ const metadata: Meta<IgcSwitchComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     labelPosition: {
-      type: '"before" | "after"',
+      type: '"after" | "before"',
       description: 'The label position of the control.',
-      options: ['before', 'after'],
+      options: ['after', 'before'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'after' } },
     },
@@ -93,7 +93,7 @@ interface IgcSwitchArgs {
   /** The checked state of the control. */
   checked: boolean;
   /** The label position of the control. */
-  labelPosition: 'before' | 'after';
+  labelPosition: 'after' | 'before';
 }
 type Story = StoryObj<IgcSwitchArgs>;
 
diff --git a/stories/textarea.stories.ts b/stories/textarea.stories.ts
index 30f1068ee..d942363e2 100644
--- a/stories/textarea.stories.ts
+++ b/stories/textarea.stories.ts
@@ -96,10 +96,10 @@ const metadata: Meta<IgcTextareaComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     resize: {
-      type: '"auto" | "vertical" | "none"',
+      type: '"vertical" | "auto" | "none"',
       description:
         'Controls whether the control can be resized.\nWhen `auto` is set, the control will try to expand and fit its content.',
-      options: ['auto', 'vertical', 'none'],
+      options: ['vertical', 'auto', 'none'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'vertical' } },
     },
@@ -225,7 +225,7 @@ interface IgcTextareaArgs {
    * Controls whether the control can be resized.
    * When `auto` is set, the control will try to expand and fit its content.
    */
-  resize: 'auto' | 'vertical' | 'none';
+  resize: 'vertical' | 'auto' | 'none';
   /**
    * The number of visible text lines for the control. If it is specified, it must be a positive integer.
    * If it is not specified, the default value is 2.