@tui/design-system 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # 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
+
+#### [Global border radius](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-border-radius--docs)
+
+- Added new border radius token `--uilib-border-radius-300` (12px) to fill the gap between `--uilib-border-radius-200` (8px) and
+  `--uilib-border-radius-400` (16px). Aligns with Figma Core Primitives.
+
+#### [Input radio scroll](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio-scroll--docs)
+
+- Added input radio scroll to provide a horizontally scrollable group of radio options designed for situations where multiple choices need to be
+  presented in a compact space. Instead of wrapping onto multiple lines, options are displayed in a single horizontal row that can be navigated using
+  carousel controls, drag interactions, or touch gestures.
+
+#### [Travel Aware banner](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-travel-aware-banner--docs)
+
+- Added Travel Aware banner, a contextual UI banner that provides a link to information on staying safe and healthy when abroad.
+
+### Fixed
+
+##### [Input Chip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-chip--docs)
+
+- Fix for selected disabled styling of input chips
+
 ## v1.2.0
 
 ### Updated
@@ -76,7 +134,7 @@ The following markup shows the previous implementation that included the now-dep
 
 #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
 
-- Fix modal heading size and colour.
+- Correct modal heading size and colour.
 
 ## v1.1.0
 
@@ -90,7 +148,7 @@ The following markup shows the previous implementation that included the now-dep
 
 #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
 
-- Added the flyout component is an overlay panel that emerges from a control like a button or menu item. The flyout is shown on-click/tap of the
+- Added the flyout component — an overlay panel that emerges from a control like a button or menu item. The flyout is shown on click/tap of the
   control and is used primarily on desktop and tablet devices.
 
 ### Updated

package/dist/themes/crystalski/index.css

@@ -14,6 +14,7 @@
   --uilib-border-radius-none: 0;
   --uilib-border-radius-100: 0.25rem;
   --uilib-border-radius-200: 0.5rem;
+  --uilib-border-radius-300: 0.75rem;
   --uilib-border-radius-400: 1rem;
   --uilib-border-radius-600: 1.5rem;
   --uilib-border-radius-1000: 2.5rem;
@@ -275,6 +276,8 @@
   --uilib-input-count-font: var(--uilib-typography-body-medium-strong);
   --uilib-input-count-size: var(--uilib-spacing-800);
   --uilib-input-radio-text-color-strong: var(--uilib-color-text-body);
+  --uilib-input-radio-scroll-previous-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
+  --uilib-input-radio-scroll-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
   --uilib-input-select-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-updown.svg");
   --uilib-input-stepper-increment-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/plus.svg");
   --uilib-input-stepper-decrement-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/minus.svg");
@@ -444,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);
@@ -463,6 +469,7 @@
   --uilib-tooltip-radius: var(--uilib-border-radius-100);
   --uilib-tooltip-bg-color: var(--uilib-color-text-body);
   --uilib-tooltip-text-color: var(--uilib-color-text-inverse);
+  --uilib-travel-aware-banner-radius: var(--uilib-border-radius-400);
 }
 
 /*# sourceMappingURL=index.css.map */

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;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","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

@@ -15,6 +15,7 @@
   --uilib-border-radius-none: 0;
   --uilib-border-radius-100: 0.25rem;
   --uilib-border-radius-200: 0.5rem;
+  --uilib-border-radius-300: 0.75rem;
   --uilib-border-radius-400: 1rem;
   --uilib-border-radius-600: 1.5rem;
   --uilib-border-radius-1000: 2.5rem;
@@ -282,6 +283,8 @@
   --uilib-input-count-font: var(--uilib-typography-body-medium-strong);
   --uilib-input-count-size: var(--uilib-spacing-800);
   --uilib-input-radio-text-color-strong: var(--uilib-color-text-strong);
+  --uilib-input-radio-scroll-previous-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
+  --uilib-input-radio-scroll-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
   --uilib-input-select-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-updown.svg");
   --uilib-input-stepper-increment-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/plus.svg");
   --uilib-input-stepper-decrement-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/minus.svg");
@@ -451,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);
@@ -470,6 +476,7 @@
   --uilib-tooltip-radius: var(--uilib-border-radius-100);
   --uilib-tooltip-bg-color: var(--uilib-color-text-body);
   --uilib-tooltip-text-color: var(--uilib-color-text-inverse);
+  --uilib-travel-aware-banner-radius: var(--uilib-border-radius-400);
 }
 
 /*# sourceMappingURL=index.css.map */

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;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","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

@@ -21,6 +21,7 @@
   --uilib-border-radius-none: 0;
   --uilib-border-radius-100: 0.25rem;
   --uilib-border-radius-200: 0.5rem;
+  --uilib-border-radius-300: 0.75rem;
   --uilib-border-radius-400: 1rem;
   --uilib-border-radius-600: 1.5rem;
   --uilib-border-radius-1000: 2.5rem;
@@ -298,6 +299,8 @@
   --uilib-input-count-font: var(--uilib-typography-body-medium-strong);
   --uilib-input-count-size: var(--uilib-spacing-800);
   --uilib-input-radio-text-color-strong: var(--uilib-color-text-strong);
+  --uilib-input-radio-scroll-previous-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
+  --uilib-input-radio-scroll-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
   --uilib-input-select-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-updown.svg");
   --uilib-input-slider-track-color: var(--uilib-color-other-disabled-strong);
   --uilib-input-slider-track-selected-color: var(--uilib-color-core-interaction);
@@ -467,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);
@@ -486,6 +492,7 @@
   --uilib-tooltip-radius: var(--uilib-border-radius-100);
   --uilib-tooltip-bg-color: var(--uilib-color-text-body);
   --uilib-tooltip-text-color: var(--uilib-color-text-inverse);
+  --uilib-travel-aware-banner-radius: var(--uilib-border-radius-400);
 }
 
 /*# sourceMappingURL=index.css.map */

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;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","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.2.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,38 +67,25 @@
 		"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": "^20.1.0",
-		"@commitlint/config-conventional": "^20.0.0",
+		"@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.0.0",
+		"@tui/cally": "^0.1.0",
 		"@types/js-beautify": "^1.14.3",
 		"@types/node": "^25.2.3",
 		"@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",
@@ -123,33 +111,29 @@
 		"lint-staged": "^17.0.2",
 		"log-update": "^8.0.0",
 		"node-fetch": "^3.3.2",
-		"npm-run-all2": "^8.0.4",
+		"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/cards/selectable/_mixins.scss

@@ -220,11 +220,11 @@ $uilib-card-selectable-included: false !default;
 			@include uilib-focus;
 		}
 
-		&:not(:has(.uilib-card-selectable__input-hidden:disabled)):hover {
+		&:has(.uilib-card-selectable__input-hidden):not(:has(.uilib-card-selectable__input-hidden:disabled)):hover {
 			box-shadow: var(--uilib-card-hover-elevation);
 		}
 
-		&:not(&--selected):has(.uilib-input-radio__label:hover) {
+		&:not(&--selected):has(.uilib-input-radio__label:hover):not(:has(.uilib-input-radio__input:disabled)) {
 			box-shadow: var(--uilib-card-hover-elevation);
 		}
 

package/scss/lib/forms/form-row/_mixins.scss

@@ -14,6 +14,7 @@ $uilib-form-row-included: false !default;
 
 @mixin uilib-form-row-master() {
 	.uilib-form-row {
+		min-width: 0;
 		margin: var(--uilib-spacing-400) 0;
 		padding: 0;
 

package/scss/lib/forms/input-checkbox/_mixins.scss

@@ -16,6 +16,8 @@ $uilib-input-checkbox-included: false !default;
 
 @mixin uilib-input-checkbox-master() {
 	.uilib-input-checkbox {
+		position: relative;
+
 		&__input {
 			@include uilib-visually-hidden;
 		}

package/scss/lib/forms/input-chip/_mixins.scss

@@ -17,28 +17,28 @@ $uilib-input-chip-included: false !default;
 
 @mixin uilib-input-chip-master() {
 	.uilib-input-chip {
-		&__input {
-			appearance: none;
+		position: relative;
 
+		&__input {
 			@include uilib-visually-hidden;
 
-			&:hover + .uilib-input-chip__label {
-				background-color: var(--uilib-input-chip-hover-bg-color);
-			}
-
 			&:focus-visible + .uilib-input-chip__label {
 				@include uilib-focus;
 			}
 
 			&:disabled + .uilib-input-chip__label,
 			&:disabled:checked + .uilib-input-chip__label {
-				color: var(--uilib-input-chip-disabled-color);
+				color: var(--uilib-color-text-body);
 
 				background: var(--uilib-input-chip-disabled-bg-color);
 
 				cursor: default;
 			}
 
+			&:disabled:checked + .uilib-input-chip__label {
+				border-color: var(--uilib-color-other-disabled-strong);
+			}
+
 			&:checked + .uilib-input-chip__label {
 				border-color: var(--uilib-input-chip-active-border-color);
 
@@ -46,10 +46,10 @@ $uilib-input-chip-included: false !default;
 
 				box-shadow: var(--uilib-elevation-200);
 			}
+		}
 
-			&:checked:hover + .uilib-input-chip__label {
-				background: var(--uilib-input-chip-active-hover-bg-color);
-			}
+		&:has(&__input:checked:not(:disabled)) &__label:hover {
+			background: var(--uilib-input-chip-active-hover-bg-color);
 		}
 
 		&__label {
@@ -83,6 +83,10 @@ $uilib-input-chip-included: false !default;
 					background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
 					color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast);
 			}
+
+			&:hover {
+				background-color: var(--uilib-input-chip-hover-bg-color);
+			}
 		}
 
 		&.uilib-input-chip--choice label {

package/scss/lib/forms/input-count/_mixins.scss

@@ -16,6 +16,8 @@ $uilib-input-count-included: false !default;
 
 @mixin uilib-input-count-master() {
 	.uilib-input-count {
+		position: relative;
+
 		display: flex;
 		flex-flow: row wrap;
 		gap: var(--uilib-spacing-200);

package/scss/lib/forms/input-radio/_mixins.scss

@@ -16,6 +16,8 @@ $uilib-input-radio-included: false !default;
 
 @mixin uilib-input-radio-master() {
 	.uilib-input-radio {
+		position: relative;
+
 		&__input {
 			@include uilib-visually-hidden;
 		}

package/scss/lib/forms/input-radio-scroll/_index.scss

@@ -0,0 +1,3 @@
+// radio scroll / index
+@use 'mixins' as *;
+@include uilib-input-radio-scroll;

package/scss/lib/forms/input-radio-scroll/_mixins.scss

@@ -0,0 +1,185 @@
+// radio scroll / _mixins
+@use '../../utility/mixins' as *;
+@use '../../cards/selectable/mixins' as *;
+@use '../form-row/mixins' as *;
+@use '../input-chip/mixins' as *;
+@use '../../icon/mixins' as *;
+@use '../../icon-button/mixins' as *;
+@use '../../link/mixins' as *;
+
+$uilib-input-radio-scroll-included: false !default;
+
+// Builds radio scroll
+@mixin uilib-input-radio-scroll() {
+	@if not $uilib-input-radio-scroll-included {
+		$uilib-input-radio-scroll-included: true !global;
+
+		@include uilib-form-row;
+		@include uilib-input-chip;
+		@include uilib-card-selectable;
+		@include uilib-icon;
+		@include uilib-icon-button;
+		@include uilib-link;
+		@include uilib-input-radio-scroll-master;
+	}
+}
+
+@mixin uilib-input-radio-scroll-master() {
+	@property --uilib-input-radio-scroll-start-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@property --uilib-input-radio-scroll-end-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@keyframes uilib-input-radio-scroll-scrollfade {
+		0% {
+			--uilib-input-radio-scroll-start-fade: 0;
+		}
+
+		10%,
+		100% {
+			--uilib-input-radio-scroll-start-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		0%,
+		90% {
+			--uilib-input-radio-scroll-end-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		100% {
+			--uilib-input-radio-scroll-end-fade: 0;
+		}
+	}
+
+	.uilib-input-radio-scroll {
+		$uilib-input-radio-scroll-mask-horizontal: linear-gradient(
+			to right,
+			#0000,
+			#fff var(--uilib-input-radio-scroll-start-fade) calc(100% - var(--uilib-input-radio-scroll-end-fade)),
+			#0000
+		);
+
+		.uilib-form-row__label {
+			font: var(--uilib-typography-heading-xlarge);
+		}
+
+		.uilib-form-row__hint {
+			margin-top: var(--uilib-spacing-200);
+		}
+
+		.uilib-form-row__input {
+			display: grid;
+			grid-template-columns: 1fr fit-content;
+			gap: var(--uilib-spacing-400);
+
+			margin: var(--uilib-spacing-400) 0;
+
+			&:has(.uilib-input-chip-list:focus-visible),
+			&:has(.uilib-card-selectable-list:focus-visible) {
+				@include uilib-focus();
+
+				/* stylelint-disable-next-line order/order */
+				border-radius: var(--uilib-border-radius-200);
+			}
+		}
+
+		.uilib-input-chip-list,
+		.uilib-card-selectable-list {
+			grid-column: 1 / span 2;
+
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-200);
+			align-items: stretch;
+
+			min-width: 0;
+			margin: calc(var(--uilib-spacing-200) * -1);
+			padding: var(--uilib-spacing-200) 0;
+
+			overflow-x: auto;
+
+			animation: uilib-input-radio-scroll-scrollfade;
+			scroll-behavior: smooth;
+
+			-webkit-mask: #{$uilib-input-radio-scroll-mask-horizontal};
+			mask: #{$uilib-input-radio-scroll-mask-horizontal};
+			animation-timeline: --uilib-input-radio-scroll-scrollfade;
+			scroll-timeline: --uilib-input-radio-scroll-scrollfade x;
+
+			&::before,
+			&::after {
+				content: '';
+
+				display: block;
+			}
+
+			&:focus-visible::before {
+				position: static;
+
+				box-shadow: none;
+			}
+		}
+
+		.uilib-input-chip,
+		.uilib-card-selectable-list__item {
+			flex: 0 0 var(--card-width, var(--card-default-width, 18rem));
+		}
+
+		.uilib-input-chip__label {
+			width: 100%;
+		}
+
+		&__link {
+			grid-row: 2;
+			grid-column: 1;
+
+			place-self: flex-start flex-start;
+		}
+
+		&__button-container {
+			grid-row: 2;
+			grid-column: 2;
+
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-400);
+			justify-self: end;
+			align-items: flex-start;
+		}
+
+		&__button-previous .uilib-icon {
+			mask-image: var(--uilib-input-radio-scroll-previous-icon);
+		}
+
+		&__button-next .uilib-icon {
+			mask-image: var(--uilib-input-radio-scroll-next-icon);
+		}
+
+		&:not(:has(&__button-container)) {
+			.uilib-input-chip-list,
+			.uilib-card-selectable-list {
+				-webkit-mask: none;
+				mask: none;
+			}
+		}
+
+		&__accessible-instructions {
+			@include uilib-visually-hidden;
+		}
+
+		&[is-hydrated] {
+			.uilib-input-chip-list,
+			.uilib-card-selectable-list {
+				scrollbar-width: none;
+			}
+		}
+	}
+}