@tui/design-system 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## v1.4.0
+
+### Added
+
+#### [Customer review](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-customer-review--docs)
+
+- Added customer review component that displays individual customer reviews, including overall ratings, category breakdowns, and review content. This
+  component provides social proof and detailed feedback to help users make informed booking decisions.
+
+#### [Social proofing](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-social-proofing--docs)
+
+- Add social proofing messaging for displaying a type of status. It is used to reinforce credibility through evidence of other users’ behaviours.
+
+### Updated
+
+#### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
+
+- Text-only variant JavaScript made more robust in case markup other than text is included, e.g. within customer reviews.
+- Text-only variant focus behaviour has been adjusted so focus is no longer moved on expand or collapse. This prevents screen readers from repeating
+  the content due to the combination of aria-live and focus transfer.
+- Default variant focus transfer to the revealed content now waits for the expand animation to complete. This resolves an issue with NVDA where the
+  screen reader would not automatically begin reading the newly revealed content.
+- Chevron icon after the show more/less button text is now included for both variants. Text-only originally did not include this icon.
+- The show more/less link is now located below the truncated text for both variants. Previously it was located inline directly after the truncated
+  text for the text-only variant.
+
+### Fixed
+
+#### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
+
+- Fix for the erroneous additional spacing above the show more/less link.
+- Fix for focus-state styling issue on text-only variant.
+
 ## v1.3.0
 
 ### Added

package/dist/themes/crystalski/index.css

@@ -447,6 +447,9 @@
   --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
   --uilib-skeleton-color: #d8d8d8;
   --uilib-skeleton-shimmer-color: #f5f5f5;
+  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
+  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
+  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
   --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
   --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
   --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);

package/dist/themes/crystalski/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}

package/dist/themes/firstchoice/index.css

@@ -454,6 +454,9 @@
   --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
   --uilib-skeleton-color: #e3e9e7;
   --uilib-skeleton-shimmer-color: #fff;
+  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
+  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
+  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
   --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
   --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
   --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);

package/dist/themes/firstchoice/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}

package/dist/themes/tui/index.css

@@ -470,6 +470,9 @@
   --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
   --uilib-skeleton-color: #dcdcdc;
   --uilib-skeleton-shimmer-color: #f5f5f5;
+  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
+  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
+  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
   --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
   --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
   --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);

package/dist/themes/tui/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tui/design-system",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"//dependencies": {
@@ -47,7 +47,7 @@
 		"ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.sh",
 		"ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh",
 		"scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
-		"test:sass": "jest --verbose ./test/sass-true"
+		"test:sass": "node --experimental-vm-modules node_modules/.bin/jest --verbose ./test/sass-true"
 	},
 	"files": [
 		"dist",
@@ -67,28 +67,17 @@
 		"url": "git@ssh.source.tui:osp/browse/design-system/uilib.git"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.25.2",
-		"@babel/eslint-parser": "^7.28.5",
-		"@babel/preset-env": "^7.25.2",
-		"@babel/preset-react": "^7.26.3",
-		"@babel/preset-typescript": "^7.28.5",
 		"@commitlint/cli": "^21.0.2",
 		"@commitlint/config-conventional": "^21.0.2",
 		"@eslint/compat": "^2.0.0",
 		"@eslint/js": "^9.38.0",
 		"@figma/code-connect": "^1.4.5",
 		"@jest/globals": "^30.2.0",
-		"@storybook/addon-a11y": "8.6.14",
-		"@storybook/addon-docs": "8.6.14",
-		"@storybook/addon-essentials": "8.6.14",
-		"@storybook/addon-links": "8.6.14",
-		"@storybook/addon-themes": "8.6.14",
-		"@storybook/blocks": "8.6.14",
-		"@storybook/html": "8.6.14",
-		"@storybook/html-webpack5": "8.6.14",
-		"@storybook/manager-api": "8.6.14",
-		"@storybook/preview-api": "8.6.14",
-		"@storybook/theming": "8.6.14",
+		"@storybook/addon-a11y": "10.4.3",
+		"@storybook/addon-docs": "10.4.3",
+		"@storybook/addon-links": "10.4.3",
+		"@storybook/addon-themes": "10.4.3",
+		"@storybook/html-vite": "10.4.3",
 		"@stylistic/eslint-plugin": "^3.1.0",
 		"@tui/cally": "^0.1.0",
 		"@types/js-beautify": "^1.14.3",
@@ -96,9 +85,7 @@
 		"@typescript-eslint/eslint-plugin": "^8.46.2",
 		"@typescript-eslint/parser": "^8.46.2",
 		"aws-cdk-lib": "^2.220.0",
-		"babel-loader": "^10.0.0",
 		"copyfiles": "^2.4.1",
-		"css-loader": "7.1.3",
 		"deepmerge": "^4.3.1",
 		"dotenv": "^17.2.3",
 		"dotenv-cli": "^11.0.0",
@@ -114,6 +101,7 @@
 		"eslint-plugin-prettier": "^5.5.4",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.1",
+		"eslint-plugin-storybook": "10.4.3",
 		"git-format-staged": "4.0.1",
 		"glob": "^13.0.0",
 		"globals": "^17.3.0",
@@ -124,32 +112,28 @@
 		"log-update": "^8.0.0",
 		"node-fetch": "^3.3.2",
 		"npm-run-all2": "^9.0.1",
+		"postcss-import": "^16.1.1",
+		"postcss-preset-env": "^11.3.0",
 		"postcss-scss": "^4.0.6",
 		"prettier": "^3.4.2",
 		"remark-gfm": "^4.0.0",
 		"sass": "^1.93.2",
-		"sass-loader": "^16.0.4",
 		"sass-true": "^10.0.0",
 		"shx": "0.4.0",
 		"source-map-support": "^0.5.21",
-		"storybook": "8.6.14",
-		"storybook-addon-pseudo-states": "^4.0.3",
-		"storybook-addon-tag-badges": "^1.4.0",
-		"storybook-addon-turbo-build": "^2.0.1",
-		"storybook-dark-mode": "^4.0.2",
-		"storybook-preset-inline-svg": "^1.0.1",
-		"style-loader": "4.0.0",
+		"storybook": "10.4.3",
+		"storybook-addon-pseudo-states": "^10.4.3",
+		"storybook-addon-tag-badges": "^3.1.0",
+		"storybook-dark-mode": "^5.0.0",
 		"stylelint": "^17.2.0",
 		"stylelint-config-standard": "^40.0.0",
 		"stylelint-config-standard-scss": "^17.0.0",
 		"stylelint-order": "^8.1.1",
 		"stylelint-scss": "^7.0.0",
 		"stylelint-semantic-groups": "^1.2.1",
-		"ts-loader": "^9.5.2",
 		"ts-node": "^10.9.1",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.46.2",
-		"webpack": "^5.102.1",
 		"zod-validation-error": "^5.0.0"
 	},
 	"lint-staged": {

package/scss/lib/ratings-reviews/customer-review/_index.scss

@@ -0,0 +1,3 @@
+// rating customer review / index
+@use 'mixins' as *;
+@include uilib-ratings-customer-review;

package/scss/lib/ratings-reviews/customer-review/_mixins.scss

@@ -0,0 +1,152 @@
+// rating customer review / _mixins
+@use '../../utility/mixins' as *;
+@use '../../info-tag/mixins' as *;
+@use '../range-icons-group/mixins' as *;
+@use '../../show-more-less/mixins' as *;
+
+$uilib-ratings-customer-review-included: false !default;
+
+// Builds rating customer-review
+@mixin uilib-ratings-customer-review() {
+	@if not $uilib-ratings-customer-review-included {
+		$uilib-ratings-customer-review-included: true !global;
+
+		@include uilib-info-tag;
+		@include uilib-ratings-range-icons-group;
+		@include uilib-show-more-less;
+		@include uilib-ratings-customer-review-master;
+	}
+}
+
+@mixin uilib-ratings-customer-review-master() {
+	.uilib-ratings-customer-review {
+		container-name: uilib-ratings-customer-review;
+		container-type: inline-size;
+
+		display: grid;
+		grid-template-columns: 25% 1fr;
+		gap: 0 var(--uilib-spacing-400);
+
+		width: 100%;
+		margin: var(--uilib-spacing-400) 0;
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&__details {
+			grid-column: 1 / -1;
+
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100) var(--uilib-spacing-200);
+			justify-content: flex-start;
+			align-items: center;
+
+			margin-bottom: var(--uilib-spacing-400);
+
+			&::after {
+				content: '';
+
+				order: 1;
+
+				display: inline-block;
+
+				height: 1em;
+
+				font: var(--uilib-typography-body-medium-strong);
+
+				border-right: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+			}
+		}
+
+		&-standard-rating {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-large);
+
+			&__value {
+				font: var(--uilib-typography-heading-xxlarge);
+			}
+		}
+
+		&__author {
+			font: var(--uilib-typography-body-medium-strong);
+		}
+
+		&__date {
+			order: 2;
+
+			font: var(--uilib-typography-body-medium);
+		}
+
+		&__tag {
+			grid-column: 1 / -1;
+
+			margin-bottom: var(--uilib-spacing-300);
+		}
+
+		&__heading {
+			grid-column: 1 / -1;
+
+			margin-bottom: var(--uilib-spacing-300);
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-large);
+		}
+
+		&__content {
+			grid-column: 1 / -1;
+
+			.uilib-show-more-less {
+				margin: 0;
+
+				&[text-only] .uilib-ratings-range-icons-group:last-child {
+					display: flex;
+				}
+
+				&[text-only][is-open] .uilib-ratings-range-icons-group {
+					margin-bottom: var(--uilib-spacing-400);
+				}
+			}
+
+			p {
+				margin-bottom: var(--uilib-spacing-400);
+			}
+
+			.uilib-ratings-range-icons-group {
+				margin-top: var(--uilib-spacing-400);
+			}
+		}
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@container uilib-ratings-customer-review (min-width: 40rem) {
+		.uilib-ratings-customer-review {
+			&__details {
+				grid-row: 1 / span 99;
+				grid-column: 1;
+
+				flex-flow: column;
+				gap: 0;
+				justify-content: flex-start;
+				align-items: flex-start;
+
+				margin: 0;
+
+				&::after {
+					display: none;
+				}
+			}
+
+			&__rating {
+				margin-bottom: var(--uilib-spacing-200);
+			}
+
+			&__tag,
+			&__heading,
+			&__content {
+				grid-column: 2;
+			}
+		}
+	}
+}

package/scss/lib/show-more-less/_mixins.scss

@@ -20,86 +20,75 @@ $uilib-show-more-less-included: false !default;
 		display: block;
 
 		margin: var(--uilib-spacing-200) 0 var(--uilib-spacing-600);
-	}
 
-	.uilib-show-more-less__intro,
-	.uilib-show-more-less__content {
-		& > *:first-child {
-			margin-top: 0;
-		}
+		&__intro,
+		&__content {
+			& > *:first-child {
+				margin-top: 0;
+			}
 
-		& > *:last-child {
-			margin-bottom: 0;
+			& > *:last-child {
+				margin-bottom: 0;
+			}
 		}
-	}
 
-	.uilib-show-more-less[text-only] .uilib-show-more-less__content {
-		display: inline;
+		&:not([text-only]) {
+			.uilib-show-more-less__content {
+				margin-top: var(--uilib-spacing-400);
+				margin-bottom: 0;
+			}
 
-		margin-right: var(--uilib-spacing-100);
-
-		& > *:last-child {
-			display: inline;
-		}
-	}
+			&[is-hydrated] .uilib-show-more-less__content {
+				block-size: 0;
+				content-visibility: hidden;
 
-	.uilib-show-more-less:not([text-only]) .uilib-show-more-less__content {
-		margin-top: var(--uilib-spacing-400);
-		margin-bottom: var(--uilib-spacing-200);
-	}
+				margin-top: 0;
 
-	.uilib-show-more-less:not([text-only])[is-hydrated] .uilib-show-more-less__content {
-		block-size: 0;
-		content-visibility: hidden;
+				overflow: hidden;
 
-		margin-top: 0;
+				@media (prefers-reduced-motion: no-preference) {
+					transition:
+						block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+						content-visibility var(--uilib-motion-duration-medium) allow-discrete,
+						margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
+			}
 
-		overflow: hidden;
+			&[is-open] .uilib-show-more-less__content {
+				block-size: auto;
+				content-visibility: visible;
 
-		@media (prefers-reduced-motion: no-preference) {
-			transition:
-				block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
-				content-visibility var(--uilib-motion-duration-medium) allow-discrete,
-				margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				margin-top: var(--uilib-spacing-400);
+			}
 		}
-	}
-
-	.uilib-show-more-less:not([text-only])[is-open] .uilib-show-more-less__content {
-		block-size: auto;
-		content-visibility: visible;
-
-		margin-top: var(--uilib-spacing-400);
-	}
-
-	.uilib-show-more-less__button {
-		margin-top: var(--uilib-spacing-200);
-	}
 
-	.uilib-show-more-less__icon {
-		-webkit-mask-image: var(--uilib-show-more-less-icon);
-		mask-image: var(--uilib-show-more-less-icon);
+		&__icon {
+			-webkit-mask-image: var(--uilib-show-more-less-icon);
+			mask-image: var(--uilib-show-more-less-icon);
 
-		transform: rotate(0deg);
+			transform: rotate(0deg);
 
-		@media (prefers-reduced-motion: no-preference) {
-			transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
 		}
-	}
-
-	.uilib-show-more-less[is-open] .uilib-show-more-less__icon {
-		transform: rotate(180deg);
-	}
 
-	.uilib-show-more-less[text-only] .uilib-show-more-less__icon {
-		display: none;
-	}
+		&[is-open] .uilib-show-more-less__icon {
+			transform: rotate(180deg);
+		}
 
-	.uilib-show-more-less--inverse {
-		color: var(--uilib-color-text-inverse);
+		&__button {
+			margin-top: var(--uilib-spacing-200);
+		}
 
-		.uilib-show-more-less__button {
+		/* stylelint-disable-next-line order/order */
+		&--inverse {
 			color: var(--uilib-color-text-inverse);
-			text-decoration-color: var(--uilib-color-text-inverse);
+
+			.uilib-show-more-less__button {
+				color: var(--uilib-color-text-inverse);
+				text-decoration-color: var(--uilib-color-text-inverse);
+			}
 		}
 	}
 }

package/scss/lib/social-proofing/_index.scss

@@ -0,0 +1,3 @@
+// social proofing / index
+@use 'mixins' as *;
+@include uilib-social-proofing;

package/scss/lib/social-proofing/_mixins.scss

@@ -0,0 +1,67 @@
+@use './variables' as *;
+@use '../icon/mixins' as *;
+@use '../icon-button/mixins' as *;
+
+$uilib-social-proofing-included: false !default;
+
+// Builds social proofing
+@mixin uilib-social-proofing() {
+	@if not $uilib-social-proofing-included {
+		$uilib-social-proofing-included: true !global;
+
+		@include uilib-icon;
+		@include uilib-icon-button;
+		@include uilib-social-proofing-master;
+	}
+}
+
+@mixin uilib-social-proofing-master() {
+	.uilib-social-proofing {
+		position: relative;
+
+		display: inline-flex;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		margin: var(--uilib-spacing-400) 0;
+		padding: var(--uilib-spacing-300) var(--uilib-spacing-1000) var(--uilib-spacing-300) var(--uilib-spacing-300);
+
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-label-small);
+
+		border-radius: var(--uilib-social-proofing-radius);
+
+		background: var(--uilib-color-core-neutral);
+
+		box-shadow: var(--uilib-social-proofing-box-shadow);
+
+		&--hidden {
+			display: none;
+		}
+
+		&[nojs] {
+			padding-right: var(--uilib-spacing-300);
+		}
+
+		&__icon {
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+
+		&__button {
+			position: absolute;
+			right: var(--uilib-spacing-100);
+
+			&.uilib-icon-button:focus-visible {
+				position: absolute;
+			}
+		}
+
+		&__close-icon {
+			flex-grow: 0;
+			flex-shrink: 0;
+			-webkit-mask-image: var(--uilib-social-proofing-close-icon);
+			mask-image: var(--uilib-social-proofing-close-icon);
+		}
+	}
+}

package/scss/lib/social-proofing/_variables.scss

@@ -0,0 +1,8 @@
+@use '../../variables/env-variables' as *;
+
+// Social proofing specific variables to allow theming
+$uilib-social-proofing-variables: (
+	radius: var(--uilib-border-radius-300),
+	close-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
+	box-shadow: var(--uilib-elevation-100),
+) !default;

package/scss/mixins.scss

@@ -36,6 +36,7 @@
 @forward 'lib/pagination/mixins';
 @forward 'lib/price/mixins';
 @forward 'lib/promo-tag/mixins';
+@forward 'lib/ratings-reviews/customer-review/mixins';
 @forward 'lib/ratings-reviews/numerical/mixins';
 @forward 'lib/ratings-reviews/percentage/mixins';
 @forward 'lib/ratings-reviews/range-bar/mixins';
@@ -45,6 +46,7 @@
 @forward 'lib/scroller/mixins';
 @forward 'lib/show-more-less/mixins';
 @forward 'lib/skeleton/mixins';
+@forward 'lib/social-proofing/mixins';
 @forward 'lib/tabs/in-page/mixins';
 @forward 'lib/tabs/anchor/mixins';
 @forward 'lib/tooltip/mixins';

package/scss/themes/crystalski/_overrides.scss

@@ -360,3 +360,11 @@ $uilib-crystalski-skeleton-variables: map.merge(
 		shimmer-color: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
 	)
 );
+
+// Social proofing
+$uilib-crystalski-social-proofing-variables: map.merge(
+	$uilib-social-proofing-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/cross.svg'),
+	)
+);

package/scss/themes/crystalski/index.scss

@@ -185,6 +185,9 @@
 	// Skeleton
 	@include util.uilib-build-css-vars('skeleton', $uilib-crystalski-skeleton-variables);
 
+	// Social proofing
+	@include util.uilib-build-css-vars('social-proofing', $uilib-crystalski-social-proofing-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-crystalski-tabs-in-page-variables);
 

package/scss/themes/firstchoice/_overrides.scss

@@ -443,3 +443,11 @@ $uilib-firstchoice-skeleton-variables: map.merge(
 		shimmer-color: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
 	)
 );
+
+// Social proofing
+$uilib-firstchoice-social-proofing-variables: map.merge(
+	$uilib-social-proofing-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/cross.svg'),
+	)
+);

package/scss/themes/firstchoice/index.scss

@@ -185,6 +185,9 @@
 	// Skeleton
 	@include util.uilib-build-css-vars('skeleton', $uilib-firstchoice-skeleton-variables);
 
+	// Social proofing
+	@include util.uilib-build-css-vars('social-proofing', $uilib-firstchoice-social-proofing-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-firstchoice-tabs-in-page-variables);
 

package/scss/themes/tui/index.scss

@@ -185,6 +185,9 @@
 	// Skeleton
 	@include util.uilib-build-css-vars('skeleton', $uilib-skeleton-variables);
 
+	// Social proofing
+	@include util.uilib-build-css-vars('social-proofing', $uilib-social-proofing-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-tabs-in-page-variables);
 

package/scss/variables/base-theme.json

@@ -2373,6 +2373,26 @@
 			}
 		}
 	},
+	"social-proofing": {
+		"tokens": {
+			"social-proofing-radius": {
+				"primitive": "uilib-border-radius-300",
+				"title": "Social proofing container radius",
+				"description": "Social proofing container radius"
+			},
+			"social-proofing-close-icon": {
+				"displayType": "icon",
+				"title": "Close Icon ",
+				"description": "Social proofing close button icon",
+				"longValue": true
+			},
+			"social-proofing-box-shadow": {
+				"primitive": "uilib-elevation-100",
+				"title": "Social proofing Container box shadow",
+				"description": "Social proofing container box shadow"
+			}
+		}
+	},
 	"tabs-in-page": {
 		"tokens": {
 			"tabs-in-page-border-color": {

package/scss/variables.scss

@@ -63,6 +63,7 @@
 @forward 'lib/scroller/variables';
 @forward 'lib/show-more-less/variables';
 @forward 'lib/skeleton/variables';
+@forward 'lib/social-proofing/variables';
 @forward 'lib/tabs/in-page/variables';
 @forward 'lib/tabs/anchor/variables';
 @forward 'lib/tooltip/variables';

package/types/components.ts

@@ -463,6 +463,20 @@ export interface PromoTagProps {
 	theme?: Theme;
 }
 
+// ─── Ratings: Customer review ─────────────────────────
+export interface CustomerReviewProps {
+	type?: NumericalType;
+	variant?: 'brand' | 'tripadvisor';
+	score?: number;
+	name?: string;
+	date?: string;
+	reviewTitle?: string;
+	reviewContent?: string;
+	hasTag?: boolean;
+	includeRatings?: boolean;
+	theme?: Theme;
+}
+
 // ─── Ratings: Numerical (9/10) ─────────────────────────
 export type NumericalType = 'rating' | 'filter';
 export type NumericalVariant = 'brand' | 'alt';
@@ -528,6 +542,7 @@ export interface RangeIconsProps {
 	hasSchema?: boolean;
 	additionalSchemaProps?: SchemaProps;
 	theme?: Theme;
+	listVariant?: boolean;
 }
 
 // ─── Ratings: Range icons group ────────────────────────
@@ -541,6 +556,7 @@ export interface RangeIconsGroupProps {
 	variant?: RangeIconsVariant;
 	size?: RangeIconsSize;
 	items?: RangeIconsGroupItem[];
+	hasSchema?: boolean;
 	theme?: Theme;
 }
 
@@ -647,3 +663,12 @@ export interface TravelAwareBannerProps {
 	linkAccessibilityLabel?: string;
 	isExternal?: boolean;
 }
+
+// ─── Social proofing ───────────────────────────────────────
+export interface SocialProofingProps {
+	theme?: Theme;
+	iconAsset?: string;
+	iconSize?: 'small';
+	hasIcon?: boolean;
+	closeLabel?: string;
+}