Merge branch 'next' into FW-6912-card

Author: brandyscarney

core/package-lock.json

@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
-    "@stencil/core": "4.33.1",
+    "@stencil/core": "4.38.0",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },

core/package.json

@@ -129,13 +129,6 @@
   background: var(--separator-color);
 }
 
-// Fills
-// --------------------------------------------------
-
-:host(.input-otp-fill-outline) {
-  --background: none;
-}
-
 // States
 // --------------------------------------------------
 

core/src/components/input-otp/input-otp.common.scss

@@ -68,20 +68,24 @@
 // --------------------------------------------------
 
 :host(.input-otp-shape-round) {
-  --border-radius: #{globals.$ion-border-radius-400};
+  --border-radius: #{globals.$ion-round-xl};
 }
 
 :host(.input-otp-shape-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+  --border-radius: #{globals.$ion-soft-xl};
 }
 
 :host(.input-otp-shape-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: #{globals.$ion-rectangular-xl};
 }
 
 // Fills
 // --------------------------------------------------
 
+:host(.input-otp-fill-outline) {
+  --background: #{globals.$ion-bg-input-default};
+}
+
 :host(.input-otp-fill-solid) {
   --border-color: #{globals.$ion-bg-input-bold-default};
   --background: #{globals.$ion-bg-input-bold-default};

core/src/components/input-otp/input-otp.ionic.scss

@@ -71,7 +71,6 @@ slot[name="end"]::slotted(*) {
 
 // Item: Focused
 // --------------------------------------------------
-
 :host(.ion-focused) .item-native::after {
   @include globals.border-radius(inherit);
   @include globals.position(0, 0, 0, 0);
@@ -112,3 +111,14 @@ slot[name="end"]::slotted(*) {
 :host(.item-lines-none) {
   --inner-border-width: #{globals.$ion-border-size-0};
 }
+
+// Item in Select Modal
+// --------------------------------------------------
+:host(.in-select-modal) {
+  --background-focused: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-focused-opacity: 0;
+}
+
+:host(.in-select-modal.ion-focused) .item-native {
+  --border-radius: #{globals.$ion-border-radius-400};
+}

core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png

@@ -407,6 +407,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
             'item-disabled': disabled,
             'in-list': inList,
+            'in-select-modal': hostContext('ion-select-modal', this.el),
             'item-multiple-inputs': this.multipleInputs,
             'ion-activatable': canActivate,
             'ion-focusable': this.focusable,