@tui/design-system 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # Changelog
 
+## v1.8.0
+
+### Added
+
+#### [Card Carousel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-carousel--docs)
+
+- New carousel component for horizontally navigating consumer-provided content items such as product cards, image galleries, or promotional banners.
+  Enhances static, natively scrollable markup into an Embla-driven carousel with `page` and `item` variants, and remains usable without JavaScript via
+  native horizontal scrolling.
+
+#### [Highlight Panel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-highlight-panel--docs)
+
+- Added the Highlight Panel which is a structural component for presenting content with elevated prominence. It provides a header, a collapsible
+  (optional) detail area, and an optional footer — suitable for summarised overviews, key information panels, or any context that benefits from a
+  clear visual hierarchy between a condensed summary and expandable detail.
+
+#### [Review card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-review-card--docs)
+
+- Added the Review card to display aggregated third-party ratings (e.g. Tripadvisor) in a compact card format. It shows an overall score, rating
+  descriptor, review count, per-category breakdowns, and a link to the full review source. The component is brand-agnostic and adapts to different
+  review providers across markets.
+
+### Updated
+
+#### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
+
+- Added `uilib-list--plain` variant for lists without any leading bullet, icon, number, or image. Useful when the list semantics are needed but no
+  visual indicator is required.
+- Added `uilib-list__hint` class for right-aligned content within a list item (e.g. edit links, prices). Uses CSS grid to pin the hint to the right
+  while leaving the rest of the list item content unaffected.
+- Added highlighted list item styling (`uilib-list__highlight-item`) for promoting a single item within a list, e.g. discount or coupon code.
+
+#### [Numerical rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs)
+
+- Rating scale changed from 1–10 to 1–5 to align with the updated TUI customer review scoring system
+- Added `author` organization (TUI) to schema output to identify the rating source
+- Schema now uses `Place` instead of `Hotel` and `reviewCount` instead of `ratingCount`
+- Schema values now use numeric types instead of strings
+
+#### [Percentage rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
+
+- Updated schema example to use `Place` with `AggregateRating` pattern and corrected property types
+- Added `author` organization (HolidayCheck) to schema output to identify the rating source
+- Schema values now use numeric types instead of strings
+
+#### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs)
+
+- Updated schema documentation to use `Place` with `AggregateRating` pattern including `reviewAspect` for aspect-level ratings
+- Added `author` organization to schema output to identify the rating source
+- Range bar group now has a single consolidated JSON-LD block for all category schemas instead of individual schemas per bar
+
+#### [Range icons](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs)
+
+- Added HolidayCheck rating variant (`uilib-ratings-range-icons--holidaycheck`) with a 0–6 scale in 1 increments. HolidayCheck variant displays a
+  numerical score preceding the icon range, consistent with Customer and TripAdvisor variants
+- Added `uilib-ratings-range-icons__description` element for an optional descriptive label (e.g. "Excellent") displayed alongside the score. For use
+  with [Review Card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-review-card--docs)
+- Added `author` organization to schema output to identify the rating source (TUI, TripAdvisor, HolidayCheck)
+
+#### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
+
+- Added HolidayCheck variant support to the range icons group component
+- Schema output consolidated into a single JSON-LD block per group using `additionalProperty` for aspect ratings, instead of individual schemas per
+  child range icon
+- Added `author` organization to schema output to identify the rating source
+- Schema `value` and `maxValue` now use numeric types instead of strings
+
 ## v1.7.0
 
 ### Added
@@ -410,7 +477,7 @@ The following markup shows the previous implementation that included the now-dep
 
 #### [Range icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs)
 
-- Added customer rating variant `uilib-ratings-range-icons--tui`.
+- Added customer rating variant `uilib-ratings-range-icons--customer`.
 - Added inverse support for TripAdvisor variant.
 - Added rating score that precedes the customer and TripAdvisor icon ranges for better clarity.
 - Spacing between the logo, value, score and details elements has been adjusted to be consistently spacing-200 (8px).

package/dist/themes/crystalski/index.css

@@ -231,6 +231,14 @@
   --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
   --uilib-card-article-radius: var(--uilib-border-radius-600);
   --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/arrow-right.svg");
+  --uilib-carousel-gap: var(--uilib-spacing-400);
+  --uilib-carousel-viewport-padding: var(--uilib-spacing-200);
+  --uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
+  --uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
+  --uilib-carousel-counter-color: var(--uilib-color-text-body);
+  --uilib-carousel-counter-font: var(--uilib-typography-body-medium);
+  --uilib-carousel-motion-duration: 300ms;
+  --uilib-carousel-motion-easing: ease-out;
   --uilib-card-icon-small-radius: var(--uilib-card-radius);
   --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
   --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
@@ -321,6 +329,22 @@
   --uilib-hero-flagship-content-bg-color: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent);
   --uilib-hero-flagship-content-text-color: var(--uilib-color-text-inverse);
   --uilib-hero-flagship-content-text-highlight-color: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-radius: var(--uilib-border-radius-400);
+  --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
+  --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
+  --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
+  --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
+  --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
+  --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-body);
+  --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
+  --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-core-interaction);
+  --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
+  --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
+  --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
+  --uilib-highlight-panel-header-bg-overlay-brand: none;
+  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
   --uilib-icon-button-radius: var(--uilib-border-radius-pill);
   --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
   --uilib-icon-button-ghost-bg-color: transparent;
@@ -375,6 +399,7 @@
   --uilib-list-image-radius: var(--uilib-border-radius-100);
   --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
   --uilib-list-multiline-title-font: var(--uilib-typography-label-medium-strong);
+  --uilib-list-highlight-color: var(--uilib-color-text-promotion);
   --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/crystalski/loader.svg");
   --uilib-loader-small: 3.75rem;
   --uilib-loader-medium: 7.5rem;
@@ -444,6 +469,8 @@
   --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
   --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
   --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
+  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
+  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
   --uilib-ratings-range-bar-bar-width: 11.25rem;
   --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
   --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);

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;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;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;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;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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

@@ -237,6 +237,14 @@
   --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
   --uilib-card-article-radius: var(--uilib-border-radius-200);
   --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/arrow-right.svg");
+  --uilib-carousel-gap: var(--uilib-spacing-400);
+  --uilib-carousel-viewport-padding: var(--uilib-spacing-200);
+  --uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
+  --uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
+  --uilib-carousel-counter-color: var(--uilib-color-text-body);
+  --uilib-carousel-counter-font: var(--uilib-typography-body-medium);
+  --uilib-carousel-motion-duration: 300ms;
+  --uilib-carousel-motion-easing: ease-out;
   --uilib-card-icon-small-radius: var(--uilib-border-radius-200);
   --uilib-card-icon-large-radius: var(--uilib-border-radius-200);
   --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
@@ -328,6 +336,22 @@
   --uilib-hero-flagship-content-bg-color: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent);
   --uilib-hero-flagship-content-text-color: var(--uilib-color-text-inverse);
   --uilib-hero-flagship-content-text-highlight-color: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-radius: var(--uilib-border-radius-200);
+  --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
+  --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
+  --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
+  --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
+  --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
+  --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-strong);
+  --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
+  --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-text-strong);
+  --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
+  --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
+  --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
+  --uilib-highlight-panel-header-bg-overlay-brand: none;
+  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
   --uilib-icon-button-radius: var(--uilib-border-radius-200);
   --uilib-icon-button-ghost-color: var(--uilib-color-text-strong);
   --uilib-icon-button-ghost-bg-color: transparent;
@@ -382,6 +406,7 @@
   --uilib-list-image-radius: var(--uilib-border-radius-100);
   --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
   --uilib-list-multiline-title-font: var(--uilib-typography-label-medium-strong);
+  --uilib-list-highlight-color: var(--uilib-color-text-promotion);
   --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/firstchoice/loader.svg");
   --uilib-loader-small: 3.75rem;
   --uilib-loader-medium: 7.5rem;
@@ -451,6 +476,8 @@
   --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
   --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
   --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
+  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
+  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
   --uilib-ratings-range-bar-bar-width: 11.25rem;
   --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
   --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);

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;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;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;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;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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

@@ -254,6 +254,14 @@
   --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
   --uilib-card-article-radius: var(--uilib-border-radius-600);
   --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/arrow-right.svg");
+  --uilib-carousel-gap: var(--uilib-spacing-400);
+  --uilib-carousel-viewport-padding: var(--uilib-spacing-200);
+  --uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
+  --uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
+  --uilib-carousel-counter-color: var(--uilib-color-text-body);
+  --uilib-carousel-counter-font: var(--uilib-typography-body-medium);
+  --uilib-carousel-motion-duration: 300ms;
+  --uilib-carousel-motion-easing: ease-out;
   --uilib-card-icon-small-radius: var(--uilib-card-radius);
   --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
   --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
@@ -398,6 +406,7 @@
   --uilib-list-image-radius: var(--uilib-border-radius-100);
   --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
   --uilib-list-multiline-title-font: var(--uilib-typography-label-medium);
+  --uilib-list-highlight-color: var(--uilib-color-text-promotion);
   --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/tui/loader.svg");
   --uilib-loader-small: 3.75rem;
   --uilib-loader-medium: 7.5rem;
@@ -467,6 +476,8 @@
   --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
   --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
   --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
+  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
+  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
   --uilib-ratings-range-bar-bar-width: 11.25rem;
   --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
   --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
@@ -486,6 +497,22 @@
   --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-highlight-panel-radius: var(--uilib-border-radius-400);
+  --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
+  --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
+  --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
+  --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
+  --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
+  --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-strong);
+  --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
+  --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
+  --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-core-interaction);
+  --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
+  --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
+  --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
+  --uilib-highlight-panel-header-bg-overlay-brand: radial-gradient(circle farthest-corner at 99.91% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 80%);
+  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
   --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;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;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;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;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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.7.0",
+	"version": "1.8.0",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"//dependencies": {
@@ -73,11 +73,11 @@
 		"@eslint/js": "^9.38.0",
 		"@figma/code-connect": "^1.4.5",
 		"@jest/globals": "^30.2.0",
-		"@storybook/addon-a11y": "^10.4.5",
-		"@storybook/addon-docs": "^10.4.5",
-		"@storybook/addon-links": "^10.4.5",
-		"@storybook/addon-themes": "^10.4.5",
-		"@storybook/html-vite": "^10.4.5",
+		"@storybook/addon-a11y": "~10.4.5",
+		"@storybook/addon-docs": "~10.4.5",
+		"@storybook/addon-links": "~10.4.5",
+		"@storybook/addon-themes": "~10.4.5",
+		"@storybook/html-vite": "~10.4.5",
 		"@stylistic/eslint-plugin": "^3.1.0",
 		"@tui/cally": "1.0.0",
 		"@types/js-beautify": "^1.14.3",
@@ -89,6 +89,7 @@
 		"deepmerge": "^4.3.1",
 		"dotenv": "^17.2.3",
 		"dotenv-cli": "^11.0.0",
+		"embla-carousel": "^8.6.0",
 		"esbuild": "^0.28.1",
 		"eslint": "^9.38.0",
 		"eslint-config-airbnb-extended": "^3.0.1",
@@ -101,7 +102,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.5",
+		"eslint-plugin-storybook": "~10.4.5",
 		"git-format-staged": "4.0.1",
 		"glob": "^13.0.0",
 		"globals": "^17.3.0",
@@ -121,8 +122,8 @@
 		"sass-true": "^10.0.0",
 		"shx": "0.4.0",
 		"source-map-support": "^0.5.21",
-		"storybook": "^10.4.5",
-		"storybook-addon-pseudo-states": "^10.4.5",
+		"storybook": "~10.4.5",
+		"storybook-addon-pseudo-states": "~10.4.5",
 		"storybook-addon-tag-badges": "^3.1.0",
 		"storybook-dark-mode": "^5.0.0",
 		"stylelint": "^17.2.0",

package/scss/lib/accordion/_mixins.scss

@@ -4,6 +4,7 @@
 @use '../icon/mixins' as *;
 
 $uilib-accordion-included: false !default;
+$uilib-accordion-group-included: false !default;
 
 // Builds accordion
 @mixin uilib-accordion() {
@@ -15,6 +16,16 @@ $uilib-accordion-included: false !default;
 	}
 }
 
+@mixin uilib-accordion-group() {
+	@if not $uilib-accordion-group-included {
+		$uilib-accordion-group-included: true !global;
+
+		@include uilib-link;
+		@include uilib-accordion;
+		@include uilib-accordion-group-master;
+	}
+}
+
 @mixin uilib-accordion-master() {
 	.uilib-accordion {
 		position: relative;
@@ -155,9 +166,7 @@ $uilib-accordion-included: false !default;
 	}
 }
 
-@mixin uilib-accordion-group() {
-	@include uilib-link;
-
+@mixin uilib-accordion-group-master() {
 	.uilib-accordion-group {
 		display: flex;
 		flex-direction: column;

package/scss/lib/cards/carousel/_index.scss

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

package/scss/lib/cards/carousel/_mixins.scss

@@ -0,0 +1,164 @@
+// Carousel / _mixins
+@use 'sass:map';
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../../icon-button/mixins' as *;
+
+$uilib-carousel-included: false !default;
+
+@mixin uilib-carousel() {
+	@if not $uilib-carousel-included {
+		$uilib-carousel-included: true !global;
+
+		@include uilib-icon-button;
+		@include uilib-carousel-master;
+	}
+}
+
+@mixin uilib-carousel-master() {
+	.uilib-carousel {
+		position: relative;
+
+		display: block;
+
+		margin: var(--uilib-spacing-400) 0;
+	}
+
+	.uilib-carousel__viewport {
+		// `overflow-x: auto` forces `overflow-y` to `auto`, clipping card shadows and
+		// focus rings. The block padding (+ matching negative margin) gives shadow/focus
+		// room without changing height.
+		margin-block: calc(-1 * var(--uilib-carousel-viewport-padding));
+		padding-block: var(--uilib-carousel-viewport-padding);
+
+		overflow-x: auto;
+		overscroll-behavior-x: contain;
+
+		// Sizes `.uilib-carousel__slide` via `cqw` against the visible frame, not the
+		// track's own (overflowing) intrinsic width.
+		container-type: inline-size;
+	}
+
+	// Once enhanced, the prev/next controls and drag/swipe are wired up as a replacement
+	// for native scrolling, so the native scrollbar is hidden. Before that (no-JS or
+	// init-failure fallback) the scrollbar stays visible — it's the only affordance that
+	// the content scrolls, since the controls don't work without the behaviour.
+	.uilib-carousel--enhanced .uilib-carousel__viewport {
+		// Embla drives movement via a transform, so native scrolling is disabled: a leftover
+		// `scrollLeft` after a resize would combine with the transform and reveal slivers of
+		// adjacent cards. `clip` (not `hidden`) keeps `overflow-y` visible for shadows.
+		overflow-x: clip;
+
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.uilib-carousel__track {
+		display: flex;
+
+		// Slides carry their own spacing via padding (see __slide) — a track `gap` here
+		// would be mismeasured by Embla and clip the trailing slide.
+		gap: 0;
+
+		@media (prefers-reduced-motion: no-preference) {
+			transition: transform var(--uilib-carousel-motion-duration) var(--uilib-carousel-motion-easing);
+		}
+	}
+
+	// One item per slide, always — the behaviour never re-parents consumer content; grouping
+	// N slides into one page (page variant) is done via Embla's `slidesToScroll`, not DOM
+	// wrapping. Each slide fills 1/N of the frame (`--uilib-carousel-visible`, set by the
+	// behaviour; 1 without JS), so N whole, equal-width cards are always shown.
+	.uilib-carousel__slide {
+		display: flex;
+		flex: 0 0 calc(100cqw / var(--uilib-carousel-visible, 1));
+
+		min-width: 0;
+		padding-inline: calc(var(--uilib-carousel-gap) / 2);
+	}
+
+	.uilib-carousel__item {
+		flex: 1;
+	}
+
+	.uilib-carousel__control--prev .uilib-icon {
+		-webkit-mask-image: var(--uilib-carousel-prev-icon);
+		mask-image: var(--uilib-carousel-prev-icon);
+	}
+
+	.uilib-carousel__control--next .uilib-icon {
+		-webkit-mask-image: var(--uilib-carousel-next-icon);
+		mask-image: var(--uilib-carousel-next-icon);
+	}
+
+	.uilib-carousel__counter {
+		color: var(--uilib-carousel-counter-color);
+		font: var(--uilib-carousel-counter-font);
+		white-space: nowrap;
+	}
+
+	.uilib-carousel--page,
+	.uilib-carousel--item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-400);
+	}
+
+	// Bleeds the viewport back out by the slide's own inline padding (see __slide) so
+	// cards land flush with the grid edge. Width must grow by the same amount the margin
+	// pulls in to actually bleed on a flex item.
+	// `position: relative` is load-bearing for the page (loop) variant: Embla measures
+	// slide/container positions with `offsetLeft` (relative to the offsetParent). Without
+	// it, the offsetParent is the outer `.uilib-carousel` (position:relative), and the
+	// bleed offsets the track by -gap/2 relative to it. On init the track has no transform
+	// so slides share that offsetParent and Embla's snap is 0 (correct); after a resize
+	// reInit the track already carries Embla's transform, which makes the track itself the
+	// slides' offsetParent — so Embla re-reads the slides at 0 while the track is still at
+	// -gap/2, shifting every snap by -gap/2 and knocking the cards off the grid (revealing
+	// a sliver of the next card at the right edge). Making the viewport the offsetParent
+	// keeps that reference stable across init and reInit, so the snap stays 0 either way.
+	.uilib-carousel--page .uilib-carousel__viewport,
+	.uilib-carousel--item .uilib-carousel__viewport {
+		position: relative;
+
+		width: calc(100% + var(--uilib-carousel-gap));
+		margin-inline: calc(var(--uilib-carousel-gap) / -2);
+	}
+
+	.uilib-carousel--page {
+		align-items: center;
+	}
+
+	.uilib-carousel__controls {
+		display: flex;
+		gap: var(--uilib-spacing-400);
+		justify-content: center;
+		align-items: center;
+	}
+
+	// The viewport's negative inline margin already brings the cards back to the true
+	// grid edge (see __viewport), so the footer needs no inset of its own to stay aligned.
+	.uilib-carousel__footer {
+		display: flex;
+		gap: var(--uilib-spacing-400);
+		align-items: center;
+	}
+
+	.uilib-carousel--item .uilib-carousel__controls {
+		gap: var(--uilib-spacing-200);
+
+		margin-left: auto;
+	}
+
+	// Behaviour toggles this when everything fits (a single scroll snap): nothing to scroll.
+	.uilib-carousel--controls-hidden .uilib-carousel__controls {
+		display: none;
+	}
+
+	.uilib-carousel__announcement {
+		@include uilib-visually-hidden;
+	}
+}

package/scss/lib/cards/carousel/_variables.scss

@@ -0,0 +1,13 @@
+@use '../../../variables/env-variables' as *;
+
+// Carousel specific variables to allow theming
+$uilib-carousel-variables: (
+	gap: var(--uilib-spacing-400),
+	viewport-padding: var(--uilib-spacing-200),
+	prev-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-left.svg'),
+	next-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+	counter-color: var(--uilib-color-text-body),
+	counter-font: var(--uilib-typography-body-medium),
+	motion-duration: 300ms,
+	motion-easing: ease-out,
+) !default;

package/scss/lib/highlight-panel/_index.scss

@@ -0,0 +1,2 @@
+@use 'mixins' as *;
+@include uilib-highlight-panel;