@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

package/dist/cjs/{overlays-Hci_7vw_.js → overlays-H4z8xPi9.js}

@@ -3,10 +3,9 @@
  */
 'use strict';
 
-var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
-var helpers = require('./helpers-DJYxKN5U.js');
-var index = require('./index-CzcLEdQ5.js');
-var frameworkDelegate = require('./framework-delegate-Dx9FrqAC.js');
+var ionicGlobal = require('./ionic-global-DMWqcBn0.js');
+var focusVisible = require('./index-BDthk8R7.js');
+var frameworkDelegate = require('./framework-delegate-C1LqXDzY.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**
@@ -92,7 +91,7 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
             radioGroup.setFocus();
         }
         else {
-            helpers.focusVisibleElement(elementToFocus);
+            focusVisible.focusVisibleElement(elementToFocus);
         }
     }
     else {
@@ -184,7 +183,7 @@ const createOverlay = (tagName, opts) => {
             Object.assign(element, Object.assign(Object.assign({}, opts), { hasController: true }));
             // append the overlay element to the document body
             getAppRoot(document).appendChild(element);
-            return new Promise((resolve) => helpers.componentOnReady(element, resolve));
+            return focusVisible.waitForComponentReady(element);
         });
     }
     return Promise.resolve();
@@ -211,7 +210,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
         elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
     }
     if (elementToFocus) {
-        helpers.focusVisibleElement(elementToFocus);
+        focusVisible.focusVisibleElement(elementToFocus);
     }
     else {
         // Focus overlay instead of letting focus escape
@@ -291,7 +290,7 @@ const trapKeyboardFocus = (ev, doc) => {
              * We do not want to focus the traps, so get the overlay
              * wrapper element as the traps live outside of the wrapper.
              */
-            const overlayRoot = helpers.getElementRoot(lastOverlay);
+            const overlayRoot = focusVisible.getElementRoot(lastOverlay);
             if (!overlayRoot.contains(target)) {
                 return;
             }
@@ -464,11 +463,11 @@ const connectListeners = (doc) => {
                 if (shadowRoot) {
                     const innerFocusable = shadowRoot.querySelector(focusableQueryString);
                     if (innerFocusable && typeof element.setFocus !== 'function') {
-                        helpers.focusVisibleElement(innerFocusable);
+                        focusVisible.focusVisibleElement(innerFocusable);
                         return;
                     }
                 }
-                helpers.focusVisibleElement(element);
+                focusVisible.focusVisibleElement(element);
             };
             if (ev.shiftKey) {
                 // Shift+Tab: previous element, wrap to last if at first
@@ -658,7 +657,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionic
             ? ionicEnterAnimation
             : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : index.config.get(name, selectedAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : focusVisible.config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -779,7 +778,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         const mode = ionicGlobal.getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
-            : index.config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
+            : focusVisible.config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
         // If dismissed via gesture, no need to play leaving animation again
         if (role !== GESTURE) {
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
@@ -807,13 +806,13 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         }
     }
     catch (err) {
-        index.printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
+        focusVisible.printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
     return true;
 };
 const getAppRoot = (doc) => {
-    const appRootSelector = index.config.get('appRootSelector', 'ion-app');
+    const appRootSelector = focusVisible.config.get('appRootSelector', 'ion-app');
     return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
@@ -821,7 +820,7 @@ const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     baseEl.classList.remove('overlay-hidden');
     const aniRoot = overlay.el;
     const animation = animationBuilder(aniRoot, opts);
-    if (!overlay.animated || !index.config.getBoolean('animated', true)) {
+    if (!overlay.animated || !focusVisible.config.getBoolean('animated', true)) {
         animation.duration(0);
     }
     if (overlay.keyboardClose) {
@@ -847,10 +846,10 @@ const eventMethod = (element, eventName) => {
 };
 const onceEvent = (element, eventName, callback) => {
     const handler = (ev) => {
-        helpers.removeEventListener(element, eventName, handler);
+        focusVisible.removeEventListener(element, eventName, handler);
         callback(ev);
     };
-    helpers.addEventListener(element, eventName, handler);
+    focusVisible.addEventListener(element, eventName, handler);
 };
 const isCancel = (role) => {
     return role === 'cancel' || role === BACKDROP;
@@ -865,7 +864,7 @@ const defaultGate = (h) => h();
  */
 const safeCall = (handler, arg) => {
     if (typeof handler === 'function') {
-        const jmp = index.config.get('_zoneGate', defaultGate);
+        const jmp = focusVisible.config.get('_zoneGate', defaultGate);
         return jmp(() => {
             try {
                 return handler(arg);
@@ -987,7 +986,7 @@ const createTriggerController = () => {
         removeClickListener();
         const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
         if (!triggerEl) {
-            index.printIonWarning(`[${el.tagName.toLowerCase()}] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
+            focusVisible.printIonWarning(`[${el.tagName.toLowerCase()}] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
             return;
         }
         const configureTriggerInteraction = (targetEl, overlayEl) => {

package/dist/cjs/{select-option-render-C7klBX2H.js → select-option-render-CZtiyFs7.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-CzcLEdQ5.js');
-var index$1 = require('./index-BJlwOs11.js');
+var focusVisible = require('./index-BDthk8R7.js');
+var index = require('./index-BbhXd9Zs.js');
 
 /**
  * Cache that maps rendered span elements to the source HTMLElement
@@ -30,14 +30,14 @@ const contentCache = new WeakMap();
  */
 const renderClonedContent = (id, content, className, useSpan = false) => {
     const Tag = useSpan ? 'span' : 'div';
-    return (index.h(Tag, { class: className, key: `${className}-${id}`, ref: (el) => {
+    return (focusVisible.h(Tag, { class: className, key: `${className}-${id}`, ref: (el) => {
             if (el) {
                 const cached = contentCache.get(el);
                 // Skip if this element already has clones from the same source
                 if (cached === content) {
                     return;
                 }
-                const sanitized = index$1.sanitizeDOMString(content.innerHTML);
+                const sanitized = index.sanitizeDOMString(content.innerHTML);
                 el.innerHTML = sanitized !== null && sanitized !== void 0 ? sanitized : '';
                 contentCache.set(el, content);
             }
@@ -62,20 +62,20 @@ const renderOptionLabel = (option, className, useSpan = false) => {
     const Tag = useSpan ? 'span' : 'div';
     // Render simple string label if there is no rich content to display
     if (!hasRichContent && (typeof label === 'string' || !label)) {
-        return (index.h(Tag, { class: className, key: `${className}-${id}` }, label));
+        return (focusVisible.h(Tag, { class: className, key: `${className}-${id}` }, label));
     }
     // Render the main label
     const labelEl = typeof label === 'string' || !label ? (
     // Label is a simple string or undefined
-    index.h(Tag, { key: `${className}-label-${id}` }, label)) : (
+    focusVisible.h(Tag, { key: `${className}-label-${id}` }, label)) : (
     // Label is an HTMLElement with potential rich content
     renderClonedContent(id, label, `${className}-text`, useSpan));
     // No rich content, render just the label
     if (!hasRichContent) {
-        return (index.h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
+        return (focusVisible.h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
     }
     // Render label with rich content (start, end, description)
-    return (index.h(Tag, { class: className, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), index.h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (index.h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
+    return (focusVisible.h(Tag, { class: className, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), focusVisible.h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (focusVisible.h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
 };
 
 exports.renderOptionLabel = renderOptionLabel;

package/dist/cjs/{status-tap-CTY2dMsZ.js → status-tap-CPZvSRKr.js}

@@ -3,25 +3,23 @@
  */
 'use strict';
 
-var index = require('./index-CzcLEdQ5.js');
-var index$1 = require('./index-BJrpF9T3.js');
-var helpers = require('./helpers-DJYxKN5U.js');
-require('./focus-visible-BIj-I3-C.js');
+var focusVisible = require('./index-BDthk8R7.js');
+var index = require('./index-DhXmkpe3.js');
 
 const startStatusTap = () => {
     const win = window;
     win.addEventListener('statusTap', () => {
-        index.readTask(() => {
+        focusVisible.readTask(() => {
             const width = win.innerWidth;
             const height = win.innerHeight;
             const el = document.elementFromPoint(width / 2, height / 2);
             if (!el) {
                 return;
             }
-            const contentEl = index$1.findClosestIonContent(el);
+            const contentEl = index.findClosestIonContent(el);
             if (contentEl) {
-                new Promise((resolve) => helpers.componentOnReady(contentEl, resolve)).then(() => {
-                    index.writeTask(async () => {
+                focusVisible.waitForComponentReady(contentEl).then(() => {
+                    focusVisible.writeTask(async () => {
                         /**
                          * If scrolling and user taps status bar,
                          * only calling scrollToTop is not enough
@@ -30,7 +28,7 @@ const startStatusTap = () => {
                          * any in-progress momentum scrolling.
                          */
                         contentEl.style.setProperty('--overflow', 'hidden');
-                        await index$1.scrollToTop(contentEl, 300);
+                        await index.scrollToTop(contentEl, 300);
                         contentEl.style.removeProperty('--overflow');
                     });
                 });

package/dist/cjs/{swipe-back-jJFi5KCB.js → swipe-back-CMubrxt-.js}

@@ -3,11 +3,9 @@
  */
 'use strict';
 
-var helpers = require('./helpers-DJYxKN5U.js');
+var focusVisible = require('./index-BDthk8R7.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var index = require('./index-CAvQ7Tka.js');
-require('./focus-visible-BIj-I3-C.js');
-require('./index-CzcLEdQ5.js');
 require('./gesture-controller-dtqlP_q4.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
@@ -62,7 +60,7 @@ const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandl
             const dur = missingDistance / Math.abs(velocity);
             realDur = Math.min(dur, 540);
         }
-        onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : helpers.clamp(0, stepValue, 0.9999), realDur);
+        onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : focusVisible.clamp(0, stepValue, 0.9999), realDur);
     };
     return index.createGesture({
         el,

package/dist/collection/collection-manifest.json

@@ -32,8 +32,6 @@
     "components/fab-button/fab-button.js",
     "components/fab-list/fab-list.js",
     "components/footer/footer.js",
-    "components/gallery/gallery.js",
-    "components/gallery-item/gallery-item.js",
     "components/grid/grid.js",
     "components/header/header.js",
     "components/img/img.js",
@@ -145,11 +143,6 @@
         "ion-chip"
       ]
     },
-    {
-      "components": [
-        "ion-gallery"
-      ]
-    },
     {
       "components": [
         "ion-input"

package/dist/collection/components/action-sheet/action-sheet.ionic.css

@@ -243,7 +243,6 @@
   flex-shrink: 2;
   overscroll-behavior-y: contain;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   pointer-events: all;
   background: var(--background);
 }
@@ -565,7 +564,6 @@
   flex-shrink: 2;
   overscroll-behavior-y: contain;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   pointer-events: all;
   background: var(--background);
 }
@@ -660,7 +658,7 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -737,7 +735,7 @@
   --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: 0.12;
-  --button-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --button-color: var(--ion-text-color-step-150, #262626);
   --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -237,7 +237,6 @@
   flex-shrink: 2;
   overscroll-behavior-y: contain;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   pointer-events: all;
   background: var(--background);
 }
@@ -332,7 +331,7 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -398,7 +397,7 @@
  * }
  */
 :host {
-  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
+  --background: var(--ion-overlay-background-color, var(--ion-background-color-step-100, #f9f9f9));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;
   --button-background-activated: var(--ion-text-color, #000);
@@ -407,11 +406,11 @@
   --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: 0.12;
-  --button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));
+  --button-background-selected: var(--ion-background-color-step-150, var(--ion-background-color, #fff));
   --button-background-selected-opacity: 1;
-  --button-color: var(--ion-color-primary, #0054e9);
-  --button-color-disabled: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
-  --color: var(--ion-color-step-400, var(--ion-text-color-step-600, #999999));
+  --button-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --button-color-disabled: var(--ion-text-color-step-150, #262626);
+  --color: var(--ion-text-color-step-600, #999999);
   text-align: center;
 }
 
@@ -492,7 +491,7 @@
   padding-inline-end: 10px;
   padding-top: 14px;
   padding-bottom: 13px;
-  color: var(--color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
+  color: var(--color, var(--ion-text-color-step-600, #999999));
   font-size: max(13px, 0.8125rem);
   font-weight: 400;
   text-align: center;
@@ -549,11 +548,11 @@
 .action-sheet-destructive,
 .action-sheet-destructive.ion-activated,
 .action-sheet-destructive.ion-focused {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, var(--ion-color-danger-bold));
 }
 
 @media (any-hover: hover) {
   .action-sheet-destructive:hover {
-    color: var(--ion-color-danger, #c5000f);
+    color: var(--ion-color-danger, var(--ion-color-danger-bold));
   }
 }

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -237,7 +237,6 @@
   flex-shrink: 2;
   overscroll-behavior-y: contain;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   pointer-events: all;
   background: var(--background);
 }
@@ -332,7 +331,7 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -409,7 +408,7 @@
   --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: 0.12;
-  --button-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --button-color: var(--ion-text-color-step-150, #262626);
   --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }

package/dist/collection/components/alert/alert.ionic.css

@@ -214,7 +214,6 @@
 .alert-message,
 .alert-input-group {
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
@@ -295,7 +294,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  background: var(--ion-background-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -579,7 +578,6 @@ textarea.alert-input {
 .alert-message,
 .alert-input-group {
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
@@ -660,7 +658,7 @@ textarea.alert-input {
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  background: var(--ion-background-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -744,7 +742,7 @@ textarea.alert-input {
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -919,7 +917,7 @@ textarea.alert-input {
   padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-text-color-step-450, #737373);
 }
 
 .alert-message {
@@ -952,11 +950,11 @@ textarea.alert-input {
   margin-right: 0;
   margin-top: 5px;
   margin-bottom: 5px;
-  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  border-bottom: 1px solid var(--ion-background-color-step-150, #d9d9d9);
   color: var(--ion-text-color, #000);
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
+  color: var(--ion-placeholder-color, var(--ion-text-color-step-600, #999999));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -966,14 +964,14 @@ textarea.alert-input {
 
 .alert-input:focus {
   margin-bottom: 4px;
-  border-bottom: 2px solid var(--ion-color-primary, #0054e9);
+  border-bottom: 2px solid var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
-  border-top: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  border-top: 1px solid var(--ion-background-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-background-color-step-150, #d9d9d9);
   overflow: auto;
 }
 
@@ -1001,7 +999,7 @@ textarea.alert-input {
   padding-top: 13px;
   padding-bottom: 13px;
   flex: 1;
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
   font-size: 1rem;
 }
 
@@ -1014,7 +1012,7 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  border-color: var(--ion-background-color-step-550, #737373);
 }
 .alert-radio-icon {
   inset-inline-start: 26px;
@@ -1028,18 +1026,18 @@ textarea.alert-input {
   height: 10px;
   transform: scale3d(0, 0, 0);
   transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--ion-color-primary, #0054e9);
+  background-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 .alert-radio-inner {
   inset-inline-start: 3px;
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
 }
 
 [aria-checked=true] .alert-radio-icon {
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 [aria-checked=true] .alert-radio-inner {
@@ -1055,7 +1053,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
   font-size: 1rem;
 }
 
@@ -1067,7 +1065,7 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  border-color: var(--ion-background-color-step-550, #737373);
   contain: strict;
 }
 .alert-checkbox-icon {
@@ -1075,8 +1073,8 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  background-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -1089,7 +1087,7 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary-contrast, #fff);
+  border-color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
 }
 [aria-checked=true] .alert-checkbox-inner {
   inset-inline-start: 3px;
@@ -1123,7 +1121,7 @@ textarea.alert-input {
   padding-bottom: 10px;
   position: relative;
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
   font-weight: 500;
   text-align: end;
   text-transform: uppercase;