Merge branch 'master' into atoledano-playroom-ai

CHANGELOG.md

@@ -1,3 +1,28 @@
+# [16.4.0](https://github.com/Telefonica/mistica-web/compare/v16.3.1...v16.4.0) (2024-11-04)
+
+
+### Bug Fixes
+
+* **TextField:** adjust position of maxLength's screen reader label ([#1283](https://github.com/Telefonica/mistica-web/issues/1283)) ([fda424e](https://github.com/Telefonica/mistica-web/commit/fda424e2874328be37a5566e57d0d3b87518b483))
+* **TextField:** avoid right helper text from wrapping, fix spacing and aria label for maxCount text when multiline is true ([#1272](https://github.com/Telefonica/mistica-web/issues/1272)) ([85fcb31](https://github.com/Telefonica/mistica-web/commit/85fcb31caf82bca1cf41bf87d60a978d06d0c611))
+* **useDisableBodyScroll:** avoid affecting body's height ([#1279](https://github.com/Telefonica/mistica-web/issues/1279)) ([b68f317](https://github.com/Telefonica/mistica-web/commit/b68f317a1e0da272c227d11bfba8dc41bf448223))
+
+
+### Features
+
+* **PhoneNumberFieldLite:** Phone number field with simple formatting to reduce bundle size ([#1276](https://github.com/Telefonica/mistica-web/issues/1276)) ([a141b97](https://github.com/Telefonica/mistica-web/commit/a141b97e600efb30e37167990cb1b7ae23f16352))
+* **Row:** allow aria-label in informative rows ([#1269](https://github.com/Telefonica/mistica-web/issues/1269)) ([65b5d42](https://github.com/Telefonica/mistica-web/commit/65b5d4232a19c481535d65e7aa98aa6040918e61))
+* **Rows, Cards, FeedbackScreen, FormFields, Buttons:** add test ids for components and their internal elements ([#1270](https://github.com/Telefonica/mistica-web/issues/1270)) ([fc63201](https://github.com/Telefonica/mistica-web/commit/fc632019375e5b124fbf75d1a399b9ec4c05422d))
+* **Spinner:** improve a11y ([#1274](https://github.com/Telefonica/mistica-web/issues/1274)) ([5267ad5](https://github.com/Telefonica/mistica-web/commit/5267ad5c1a579e3e8aa9f1587356016426f426f0))
+* **Switch, RadioButton, Checkbox, ProgressBar, ProgressBarStepped, Slider:** create inverse variant ([#1277](https://github.com/Telefonica/mistica-web/issues/1277)) ([3129fb9](https://github.com/Telefonica/mistica-web/commit/3129fb9edc12a6b0be23e648053388a775fc34d7))
+
+## [16.3.1](https://github.com/Telefonica/mistica-web/compare/v16.3.0...v16.3.1) (2024-10-21)
+
+
+### Bug Fixes
+
+* **AdvancedDataCard:** make container of extra content expand to fit container's width ([#1275](https://github.com/Telefonica/mistica-web/issues/1275)) ([486c605](https://github.com/Telefonica/mistica-web/commit/486c605934ee80413b829395eac914ed385763c1))
+
 # [16.3.0](https://github.com/Telefonica/mistica-web/compare/v16.2.0...v16.3.0) (2024-10-16)
 
 

css/blau.css

@@ -110,11 +110,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
     --mistica-color-controlError: var(--mistica-blau-blauRed);
     --mistica-color-barTrack: var(--mistica-blau-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
     --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
     --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
     --mistica-color-iosControlKnob: var(--mistica-blau-white);
+    --mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-divider: var(--mistica-blau-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
@@ -304,11 +306,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-controlError: var(--mistica-blau-blauRed);
     --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
     --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
     --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
     --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
@@ -446,11 +450,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-controlError: var(--mistica-blau-blauRed);
         --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
         --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
         --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
         --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
@@ -584,11 +590,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
         --mistica-color-controlError: var(--mistica-blau-blauRed);
         --mistica-color-barTrack: var(--mistica-blau-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
         --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
         --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
         --mistica-color-iosControlKnob: var(--mistica-blau-white);
+        --mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-divider: var(--mistica-blau-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);

css/movistar.css

@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
     --mistica-color-controlError: var(--mistica-movistar-pepper55);
     --mistica-color-barTrack: var(--mistica-movistar-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-divider: var(--mistica-movistar-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-controlError: var(--mistica-movistar-pepper45);
     --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -463,11 +467,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-controlError: var(--mistica-movistar-pepper45);
         --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -601,11 +607,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
         --mistica-color-controlError: var(--mistica-movistar-pepper55);
         --mistica-color-barTrack: var(--mistica-movistar-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-divider: var(--mistica-movistar-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);

css/o2-new.css

@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
     --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
     --mistica-color-divider: var(--mistica-o2-new-grey30);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
     --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
     --mistica-color-badge: var(--mistica-o2-new-o2Red65);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -457,11 +461,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
         --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -605,11 +611,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
         --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);

css/o2.css

@@ -110,11 +110,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
     --mistica-color-iosControlKnob: var(--mistica-o2-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
     --mistica-color-divider: var(--mistica-o2-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
@@ -304,11 +306,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
     --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
     --mistica-color-badge: var(--mistica-o2-pepper60);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -443,11 +447,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
         --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -581,11 +587,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
         --mistica-color-iosControlKnob: var(--mistica-o2-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);