refactor(many): use utils import (#27160)

core/src/components/accordion-group/accordion-group.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
+import { printIonWarning } from '@utils/logging';
 
 import { getIonMode } from '../../global/ionic-global';
-import { printIonWarning } from '../../utils/logging';
 
 import type { AccordionGroupChangeEventDetail } from './accordion-group-interface';
 

core/src/components/accordion/accordion.tsx

@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '../../utils/helpers';
 
 const enum AccordionState {
   Collapsed = 1 << 0,

core/src/components/action-sheet/action-sheet.tsx

@@ -1,10 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
-import type { Gesture } from '../../utils/gesture';
-import { createButtonActiveGesture } from '../../utils/gesture/button-active';
+import type { Gesture } from '@utils/gesture';
+import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import {
   BACKDROP,
   createDelegateController,
@@ -15,9 +12,12 @@ import {
   prepareOverlay,
   present,
   safeCall,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { getClassMap } from '../../utils/theme';
 
 import type { ActionSheetButton } from './action-sheet-interface';
 import { iosEnterAnimation } from './animations/ios.enter';

core/src/components/action-sheet/animations/ios.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Enter Animation

core/src/components/action-sheet/animations/ios.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Leave Animation

core/src/components/action-sheet/animations/md.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Enter Animation

core/src/components/action-sheet/animations/md.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Leave Animation

core/src/components/alert/alert.tsx

@@ -1,12 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
-
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import type { Gesture } from '../../utils/gesture';
-import { createButtonActiveGesture } from '../../utils/gesture/button-active';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import type { Gesture } from '@utils/gesture';
+import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import {
   createDelegateController,
   createTriggerController,
@@ -17,11 +13,15 @@ import {
   prepareOverlay,
   present,
   safeCall,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { sanitizeDOMString } from '@utils/sanitization';
+import { getClassMap } from '@utils/theme';
+
+import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
-import { getClassMap } from '../../utils/theme';
 
 import type { AlertButton, AlertInput } from './alert-interface';
 import { iosEnterAnimation } from './animations/ios.enter';

core/src/components/alert/animations/ios.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Enter Animation

core/src/components/alert/animations/ios.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Leave Animation

core/src/components/alert/animations/md.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Enter Animation

core/src/components/alert/animations/md.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Leave Animation

core/src/components/app/app.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
+import { isPlatform } from '@utils/platform';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { isPlatform } from '../../utils/platform';
 
 @Component({
   tag: 'ion-app',

core/src/components/back-button/back-button.tsx

@@ -1,14 +1,14 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import type { ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { arrowBackSharp, chevronBack } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/backdrop/backdrop.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Event, Host, Listen, Prop, h } from '@stencil/core';
+import { GESTURE_CONTROLLER } from '@utils/gesture';
 
 import { getIonMode } from '../../global/ionic-global';
-import { GESTURE_CONTROLLER } from '../../utils/gesture';
 
 @Component({
   tag: 'ion-backdrop',

core/src/components/badge/badge.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/breadcrumb/breadcrumb.tsx

@@ -1,12 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 import type { BreadcrumbCollapsedClickEventDetail } from './breadcrumb-interface';

core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses, hostContext } from '../../utils/theme';
 import type { BreadcrumbCollapsedClickEventDetail } from '../breadcrumb/breadcrumb-interface';
 
 /**

core/src/components/button/button.tsx

@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, hasShadowDom } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 /**

core/src/components/card-header/card-header.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/card-subtitle/card-subtitle.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/card-title/card-title.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/card/card.tsx

@@ -1,12 +1,12 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes } from '@utils/helpers';
+import { createColorClasses, openURL } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, Mode } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes } from '../../utils/helpers';
-import { createColorClasses, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 /**

core/src/components/checkbox/checkbox.tsx

@@ -1,15 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext } from '@utils/theme';
 
-// TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { CheckboxChangeEventDetail } from './checkbox-interface';
 

core/src/components/chip/chip.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/col/col.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
+import { matchBreakpoint } from '@utils/media';
 
 import { getIonMode } from '../../global/ionic-global';
-import { matchBreakpoint } from '../../utils/media';
 
 const win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain

core/src/components/content/content.tsx

@@ -1,12 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
+import { componentOnReady } from '@utils/helpers';
+import { isPlatform } from '@utils/platform';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { componentOnReady } from '../../utils/helpers';
-import { isPlatform } from '../../utils/platform';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
 

core/src/components/datetime-button/datetime-button.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { componentOnReady, addEventListener } from '@utils/helpers';
+import { printIonError } from '@utils/logging';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { componentOnReady, addEventListener } from '../../utils/helpers';
-import { printIonError } from '../../utils/logging';
-import { createColorClasses } from '../../utils/theme';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
 import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';

core/src/components/datetime/datetime.tsx

@@ -1,14 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { startFocusVisible } from '@utils/focus-visible';
+import { getElementRoot, raf, renderHiddenInput } from '@utils/helpers';
+import { printIonError, printIonWarning } from '@utils/logging';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
-import { startFocusVisible } from '../../utils/focus-visible';
-import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
-import { printIonError, printIonWarning } from '../../utils/logging';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses } from '../../utils/theme';
 import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
 
 import type {

core/src/components/datetime/utils/comparison.ts

@@ -1,4 +1,5 @@
-import { printIonWarning } from '../../../utils/logging';
+import { printIonWarning } from '@utils/logging';
+
 import type { DatetimeParts } from '../datetime-interface';
 
 /**

core/src/components/datetime/utils/state.ts

@@ -1,4 +1,5 @@
-import { printIonError } from '../../../utils/logging';
+import { printIonError } from '@utils/logging';
+
 import type {
   DatetimeHighlight,
   DatetimeHighlightCallback,

core/src/components/fab-button/fab-button.tsx

@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import { inheritAriaAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { close } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 /**

core/src/components/footer/footer.tsx

@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
+import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
+import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
 
 import { getIonMode } from '../../global/ionic-global';
-import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
-import type { KeyboardController } from '../../utils/keyboard/keyboard-controller';
-import { createKeyboardController } from '../../utils/keyboard/keyboard-controller';
 
 import { handleFooterFade } from './footer.utils';
 

core/src/components/footer/footer.utils.ts

@@ -1,6 +1,5 @@
 import { readTask, writeTask } from '@stencil/core';
-
-import { clamp } from '../../utils/helpers';
+import { clamp } from '@utils/helpers';
 
 export const handleFooterFade = (scrollEl: HTMLElement, baseEl: HTMLElement) => {
   readTask(() => {

core/src/components/header/header.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h, writeTask } from '@stencil/core';
+import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { hostContext } from '../../utils/theme';
 
 import {
   cloneElement,

core/src/components/header/header.utils.ts

@@ -1,6 +1,5 @@
 import { readTask, writeTask } from '@stencil/core';
-
-import { clamp } from '../../utils/helpers';
+import { clamp } from '@utils/helpers';
 
 const TRANSITION = 'all 0.2s ease-in-out';
 

core/src/components/img/img.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes } from '../../utils/helpers';
 
 /**
  * @part image - The inner `img` element.

core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { sanitizeDOMString } from '@utils/sanitization';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 
 @Component({

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
+import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
 
 import { getIonMode } from '../../global/ionic-global';
-import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
 
 @Component({
   tag: 'ion-infinite-scroll',

core/src/components/input/input.tsx

@@ -1,15 +1,15 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { closeCircle, closeSharp } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail, TextFieldTypes } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
 import { getCounterText } from './input.utils';

core/src/components/input/input.utils.ts

@@ -1,4 +1,4 @@
-import { printIonError } from '../../utils/logging';
+import { printIonError } from '@utils/logging';
 
 export const getCounterText = (
   value: string | number | null | undefined,

core/src/components/item-divider/item-divider.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/item-option/item-option.tsx

@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/item-options/item-options.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
+import { isEndSide } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
-import { isEndSide } from '../../utils/helpers';
 import type { Side } from '../menu/menu-interface';
 
 @Component({

core/src/components/item-sliding/item-sliding.tsx

@@ -1,10 +1,10 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
+import { isEndSide } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
-import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
-import { isEndSide } from '../../utils/helpers';
 import type { Side } from '../menu/menu-interface';
 
 const SWIPE_MARGIN = 30;

core/src/components/item/item.tsx

@@ -1,14 +1,14 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes, raf } from '@utils/helpers';
+import { printIonError, printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes, raf } from '../../utils/helpers';
-import { printIonError, printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { InputInputEventDetail } from '../input/input-interface';
 import type { RouterDirection } from '../router/utils/interface';
 

core/src/components/label/label.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/list-header/list-header.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/loading/animations/ios.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Loading Enter Animation

core/src/components/loading/animations/ios.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Loading Leave Animation

core/src/components/loading/animations/md.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Loading Enter Animation

core/src/components/loading/animations/md.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Loading Leave Animation

core/src/components/loading/loading.tsx

@@ -1,11 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
-
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import { raf } from '../../utils/helpers';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { raf } from '@utils/helpers';
 import {
   BACKDROP,
   dismiss,
@@ -14,11 +10,15 @@ import {
   present,
   createDelegateController,
   createTriggerController,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { sanitizeDOMString } from '@utils/sanitization';
+import { getClassMap } from '@utils/theme';
+
+import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
-import { getClassMap } from '../../utils/theme';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 
 import { iosEnterAnimation } from './animations/ios.enter';

core/src/components/menu-button/menu-button.tsx

@@ -1,15 +1,15 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
+import type { ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { menuController } from '@utils/menu-controller';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { menuOutline, menuSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import type { ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { menuController } from '../../utils/menu-controller';
-import { createColorClasses, hostContext } from '../../utils/theme';
 import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 /**

core/src/components/menu-toggle/menu-toggle-util.ts

@@ -1,4 +1,4 @@
-import { menuController } from '../../utils/menu-controller';
+import { menuController } from '@utils/menu-controller';
 
 // Given a menu, return whether or not the menu toggle should be visible
 export const updateVisibility = async (menu: string | undefined) => {

core/src/components/menu-toggle/menu-toggle.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, State, h } from '@stencil/core';
+import { menuController } from '@utils/menu-controller';
 
 import { getIonMode } from '../../global/ionic-global';
-import { menuController } from '../../utils/menu-controller';
 
 import { updateVisibility } from './menu-toggle-util';
 

core/src/components/menu/menu.tsx

@@ -1,15 +1,15 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { GESTURE_CONTROLLER } from '@utils/gesture';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
+import { menuController } from '@utils/menu-controller';
+import { getOverlay } from '@utils/overlays';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Animation, Gesture, GestureDetail } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
-import { GESTURE_CONTROLLER } from '../../utils/gesture';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '../../utils/helpers';
-import { menuController } from '../../utils/menu-controller';
-import { getOverlay } from '../../utils/overlays';
 
 import type { MenuChangeEventDetail, MenuI, Side } from './menu-interface';
 

core/src/components/modal/animations/ios.enter.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
 import type { ModalAnimationOptions } from '../modal-interface';
 

core/src/components/modal/animations/ios.leave.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
 import type { ModalAnimationOptions } from '../modal-interface';
 

core/src/components/modal/animations/md.enter.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import type { ModalAnimationOptions } from '../modal-interface';
 
 import { createSheetEnterAnimation } from './sheet';

core/src/components/modal/animations/md.leave.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import type { ModalAnimationOptions } from '../modal-interface';
 
 import { createSheetLeaveAnimation } from './sheet';

core/src/components/modal/animations/sheet.ts

@@ -1,4 +1,5 @@
-import { createAnimation } from '../../../utils/animation/animation';
+import { createAnimation } from '@utils/animation/animation';
+
 import type { ModalAnimationOptions } from '../modal-interface';
 import { getBackdropValueForSheet } from '../utils';
 

core/src/components/modal/gestures/sheet.ts

@@ -1,7 +1,8 @@
+import { createGesture } from '@utils/gesture';
+import { clamp, raf } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
-import { createGesture } from '../../../utils/gesture';
-import { clamp, raf } from '../../../utils/helpers';
 import { getBackdropValueForSheet } from '../utils';
 
 import { calculateSpringStep, handleCanDismiss } from './utils';

core/src/components/modal/gestures/swipe-to-close.ts

@@ -1,14 +1,10 @@
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
+import { createGesture } from '@utils/gesture';
+import { clamp, getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { getTimeGivenProgression } from '../../../utils/animation/cubic-bezier';
-import {
-  isIonContent,
-  findClosestIonContent,
-  disableContentScrollY,
-  resetContentScrollY,
-} from '../../../utils/content';
 import type { GestureDetail } from '../../../utils/gesture';
-import { createGesture } from '../../../utils/gesture';
-import { clamp, getElementRoot } from '../../../utils/helpers';
 import type { Style as StatusBarStyle } from '../../../utils/native/status-bar';
 import { setCardStatusBarDark, setCardStatusBarDefault } from '../utils';
 

core/src/components/modal/gestures/utils.ts

@@ -1,5 +1,6 @@
+import { GESTURE } from '@utils/overlays';
+
 import type { Animation } from '../../../interface';
-import { GESTURE } from '../../../utils/overlays';
 
 export const handleCanDismiss = async (el: HTMLIonModalElement, animation: Animation) => {
   /**

core/src/components/modal/modal.tsx

@@ -1,5 +1,23 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { findIonContent, printIonContentErrorMsg } from '@utils/content';
+import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate';
+import { raf, inheritAttributes, hasLazyBuild } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { Style as StatusBarStyle, StatusBar } from '@utils/native/status-bar';
+import {
+  GESTURE,
+  BACKDROP,
+  activeAnimations,
+  dismiss,
+  eventMethod,
+  prepareOverlay,
+  present,
+  createTriggerController,
+} from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
+import { deepReady } from '@utils/transition';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -12,26 +30,8 @@ import type {
   Gesture,
   OverlayInterface,
 } from '../../interface';
-import { findIonContent, printIonContentErrorMsg } from '../../utils/content';
-import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { raf, inheritAttributes, hasLazyBuild } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
 import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
-import { printIonWarning } from '../../utils/logging';
-import { Style as StatusBarStyle, StatusBar } from '../../utils/native/status-bar';
-import {
-  GESTURE,
-  BACKDROP,
-  activeAnimations,
-  dismiss,
-  eventMethod,
-  prepareOverlay,
-  present,
-  createTriggerController,
-} from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { getClassMap } from '../../utils/theme';
-import { deepReady } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';

core/src/components/modal/utils.ts

@@ -1,5 +1,5 @@
-import { StatusBar, Style } from '../../utils/native/status-bar';
-import { win } from '../../utils/window';
+import { StatusBar, Style } from '@utils/native/status-bar';
+import { win } from '@utils/window';
 
 /**
  * Use y = mx + b to

core/src/components/nav/nav.tsx

@@ -1,13 +1,13 @@
 import type { EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { assert } from '@utils/helpers';
+import type { TransitionOptions } from '@utils/transition';
+import { lifecycle, setPageHidden, transition } from '@utils/transition';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
-import { assert } from '../../utils/helpers';
-import type { TransitionOptions } from '../../utils/transition';
-import { lifecycle, setPageHidden, transition } from '../../utils/transition';
 import type { NavOutlet, RouteID, RouteWrite, RouterDirection } from '../router/utils/interface';
 
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from './constants';

core/src/components/nav/view-controller.ts

@@ -1,6 +1,7 @@
+import { attachComponent } from '@utils/framework-delegate';
+import { assert, shallowEqualStringMap } from '@utils/helpers';
+
 import type { AnimationBuilder, ComponentProps, FrameworkDelegate, NavComponentWithProps } from '../../interface';
-import { attachComponent } from '../../utils/framework-delegate';
-import { assert, shallowEqualStringMap } from '../../utils/helpers';
 
 export const VIEW_STATE_NEW = 1;
 export const VIEW_STATE_ATTACHED = 2;

core/src/components/note/note.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/picker-column-internal/picker-column-internal.tsx

@@ -1,12 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { getElementRoot, raf } from '@utils/helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
+import { isPlatform } from '@utils/platform';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { getElementRoot, raf } from '../../utils/helpers';
-import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
-import { isPlatform } from '../../utils/platform';
-import { createColorClasses } from '../../utils/theme';
 import type { PickerInternalCustomEvent } from '../picker-internal/picker-internal-interfaces';
 
 import type { PickerColumnItem } from './picker-column-internal-interfaces';

core/src/components/picker-column/picker-column.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import { clamp } from '@utils/helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
+import { getClassMap } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
-import { clamp } from '../../utils/helpers';
-import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
-import { getClassMap } from '../../utils/theme';
 import type { PickerColumn } from '../picker/picker-interface';
 
 /**

core/src/components/picker-internal/picker-internal.tsx

@@ -1,7 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Listen, Method, Host, h } from '@stencil/core';
-
-import { getElementRoot } from '../../utils/helpers';
+import { getElementRoot } from '@utils/helpers';
 
 import type { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
 

core/src/components/picker/animations/ios.enter.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Picker Enter Animation

core/src/components/picker/animations/ios.leave.ts

@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Picker Leave Animation

core/src/components/picker/picker.tsx

@@ -1,8 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import {
   createDelegateController,
   createTriggerController,
@@ -13,9 +10,12 @@ import {
   prepareOverlay,
   present,
   safeCall,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';

core/src/components/popover/animations/ios.enter.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import {
   calculateWindowAdjustment,
   getArrowDimensions,

core/src/components/popover/animations/ios.leave.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * iOS Popover Leave Animation

core/src/components/popover/animations/md.enter.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
 
 const POPOVER_MD_BODY_PADDING = 12;

core/src/components/popover/animations/md.leave.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * Md Popover Leave Animation

core/src/components/popover/popover.tsx

@@ -1,16 +1,16 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate';
+import { addEventListener, raf, hasLazyBuild } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present } from '@utils/overlays';
+import { isPlatform } from '@utils/platform';
+import { getClassMap } from '@utils/theme';
+import { deepReady } from '@utils/transition';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
-import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { addEventListener, raf, hasLazyBuild } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present } from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { isPlatform } from '../../utils/platform';
-import { getClassMap } from '../../utils/theme';
-import { deepReady } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';

core/src/components/popover/utils.ts

@@ -1,4 +1,4 @@
-import { getElementRoot, raf } from '../../utils/helpers';
+import { getElementRoot, raf } from '@utils/helpers';
 
 import type { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from './popover-interface';
 

core/src/components/progress-bar/progress-bar.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { clamp } from '@utils/helpers';
+import { createColorClasses } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { clamp } from '../../utils/helpers';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/radio-group/radio-group.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';
+import { renderHiddenInput } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
-import { renderHiddenInput } from '../../utils/helpers';
 
 import type { RadioGroupChangeEventDetail } from './radio-group-interface';
 

core/src/components/radio/radio.tsx

@@ -1,14 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { addEventListener, getAriaLabel, inheritAriaAttributes, removeEventListener } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { addEventListener, getAriaLabel, inheritAriaAttributes, removeEventListener } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/range/range.tsx

@@ -1,16 +1,16 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, StyleEventDetail } from '../../interface';
-import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type {
   KnobName,

core/src/components/refresher-content/refresher-content.tsx

@@ -1,13 +1,13 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { isPlatform } from '@utils/platform';
+import { sanitizeDOMString } from '@utils/sanitization';
 import { arrowDown, caretBackSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import { isPlatform } from '../../utils/platform';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 import { SPINNERS } from '../spinner/spinner-configs';
 

core/src/components/refresher/refresher.tsx

@@ -1,17 +1,17 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { Animation, Gesture, GestureDetail } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import {
   getScrollElement,
   ION_CONTENT_CLASS_SELECTOR,
   ION_CONTENT_ELEMENT_SELECTOR,
   printIonContentErrorMsg,
-} from '../../utils/content';
-import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '../../utils/helpers';
-import { hapticImpact } from '../../utils/native/haptic';
+} from '@utils/content';
+import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '@utils/helpers';
+import { hapticImpact } from '@utils/native/haptic';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { Animation, Gesture, GestureDetail } from '../../interface';
 
 import type { RefresherEventDetail } from './refresher-interface';
 import {

core/src/components/refresher/refresher.utils.ts

@@ -1,8 +1,7 @@
 import { writeTask } from '@stencil/core';
-
-import { createAnimation } from '../../utils/animation/animation';
-import { clamp, componentOnReady, transitionEndAsync } from '../../utils/helpers';
-import { isPlatform } from '../../utils/platform';
+import { createAnimation } from '@utils/animation/animation';
+import { clamp, componentOnReady, transitionEndAsync } from '@utils/helpers';
+import { isPlatform } from '@utils/platform';
 
 // MD Native Refresher
 // -----------------------------

core/src/components/reorder-group/reorder-group.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, getScrollElement } from '@utils/content';
+import { raf } from '@utils/helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
-import { findClosestIonContent, getScrollElement } from '../../utils/content';
-import { raf } from '../../utils/helpers';
-import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
 
 import type { ItemReorderEventDetail } from './reorder-group-interface';
 

core/src/components/router-link/router-link.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses, openURL } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import { createColorClasses, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 @Component({

core/src/components/router-outlet/route-outlet.tsx

@@ -1,5 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { attachComponent, detachComponent } from '@utils/framework-delegate';
+import { shallowEqualStringMap, hasLazyBuild } from '@utils/helpers';
+import { transition } from '@utils/transition';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -11,10 +15,6 @@ import type {
   FrameworkDelegate,
   Gesture,
 } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
-import { attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { shallowEqualStringMap, hasLazyBuild } from '../../utils/helpers';
-import { transition } from '../../utils/transition';
 import type { RouterOutletOptions, SwipeGestureHandler } from '../nav/nav-interface';
 import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/utils/interface';
 

core/src/components/router/router.tsx

@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Listen, Method, Prop } from '@stencil/core';
+import { debounce } from '@utils/helpers';
 
 import type { AnimationBuilder, BackButtonEvent } from '../../interface';
-import { debounce } from '../../utils/helpers';
 import type { NavigationHookResult } from '../route/route-interface';
 
 import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from './utils/constants';

core/src/components/router/utils/dom.ts

@@ -1,5 +1,6 @@
+import { componentOnReady } from '@utils/helpers';
+
 import type { AnimationBuilder } from '../../../interface';
-import { componentOnReady } from '../../../utils/helpers';
 
 import { ROUTER_INTENT_NONE } from './constants';
 import type { NavOutletElement, RouteChain, RouteID, RouterDirection } from './interface';

core/src/components/searchbar/searchbar.tsx

@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { debounceEvent, raf } from '@utils/helpers';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses } from '@utils/theme';
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail } from '../../interface';
-import { debounceEvent, raf } from '../../utils/helpers';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses } from '../../utils/theme';
 
 import type { SearchbarChangeEventDetail, SearchbarInputEventDetail } from './searchbar-interface';
 

core/src/components/segment-button/segment-button.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core';
+import type { ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
+import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { addEventListener, removeEventListener, inheritAttributes } from '../../utils/helpers';
-import { hostContext } from '../../utils/theme';
 
 import type { SegmentButtonLayout } from './segment-button-interface';
 

core/src/components/segment/segment.tsx

@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import type { Gesture, GestureDetail } from '@utils/gesture';
+import { pointerCoord } from '@utils/helpers';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { Gesture, GestureDetail } from '../../utils/gesture';
-import { pointerCoord } from '../../utils/helpers';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { SegmentChangeEventDetail } from './segment-interface';
 

core/src/components/select-popover/select-popover.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h } from '@stencil/core';
+import { safeCall } from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import { safeCall } from '../../utils/overlays';
-import { getClassMap } from '../../utils/theme';
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
 

core/src/components/select/select.tsx

@@ -1,5 +1,15 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { actionSheetController, alertController, popoverController } from '@utils/overlays';
+import type { OverlaySelect } from '@utils/overlays-interface';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
+import { watchForOptions } from '@utils/watch-options';
 import { caretDownSharp, chevronExpand } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -11,16 +21,6 @@ import type {
   PopoverOptions,
   StyleEventDetail,
 } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { actionSheetController, alertController, popoverController } from '../../utils/overlays';
-import type { OverlaySelect } from '../../utils/overlays-interface';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
-import { watchForOptions } from '../../utils/watch-options';
 import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
 import type { AlertInput } from '../alert/alert-interface';
 import type { SelectPopoverOption } from '../select-popover/select-popover-interface';

core/src/components/skeleton-text/skeleton-text.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { hostContext } from '../../utils/theme';
 
 @Component({
   tag: 'ion-skeleton-text',