@tui/design-system 1.7.0 → 1.8.0

package/scss/mixins.scss

@@ -6,6 +6,7 @@
 @forward 'lib/button/mixins';
 @forward 'lib/cards/card/mixins';
 @forward 'lib/cards/article/mixins';
+@forward 'lib/cards/carousel/mixins';
 @forward 'lib/cards/icon/mixins';
 @forward 'lib/cards/search/mixins';
 @forward 'lib/cards/selectable/mixins';
@@ -25,6 +26,7 @@
 @forward 'lib/forms/input-text/mixins';
 @forward 'lib/grid/mixins';
 @forward 'lib/hero/mixins';
+@forward 'lib/highlight-panel/mixins';
 @forward 'lib/icon/mixins';
 @forward 'lib/icon-button/mixins';
 @forward 'lib/image/mixins';
@@ -55,3 +57,4 @@
 @forward 'lib/travel-aware-banner/mixins';
 @forward 'lib/typography/mixins';
 @forward 'lib/utility/mixins';
+@forward 'lib/patterns/review-card/mixins';

package/scss/themes/crystalski/_overrides.scss

@@ -109,6 +109,15 @@ $uilib-crystalski-card-article-variables: map.merge(
 	)
 );
 
+// Card - carousel
+$uilib-crystalski-carousel-variables: map.merge(
+	$uilib-carousel-variables,
+	(
+		prev-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-left.svg'),
+		next-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
+	)
+);
+
 // Card - icon
 $uilib-crystalski-card-icon-variables: map.merge(
 	$uilib-card-icon-variables,
@@ -223,6 +232,14 @@ $uilib-crystalski-input-text-variables: map.merge(
 	)
 );
 
+// Highlight panel
+$uilib-crystalski-highlight-panel-variables: map.merge(
+	$uilib-highlight-panel-variables,
+	(
+		header-font-color-brand: var(--uilib-color-text-body),
+	)
+);
+
 // Icon button
 $uilib-crystalski-icon-button-variables: map.merge(
 	$uilib-icon-button-variables,

package/scss/themes/crystalski/index.scss

@@ -77,6 +77,9 @@
 	// Card - article
 	@include util.uilib-build-css-vars('card-article', $uilib-crystalski-card-article-variables);
 
+	// Card - carousel
+	@include util.uilib-build-css-vars('carousel', $uilib-crystalski-carousel-variables);
+
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-crystalski-card-icon-variables);
 
@@ -131,6 +134,9 @@
 	// Hero
 	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
 
+	// Highlight panel
+	@include util.uilib-build-css-vars('highlight-panel', $uilib-crystalski-highlight-panel-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-crystalski-icon-button-variables);
 

package/scss/themes/crystalski/theme.json

@@ -203,6 +203,13 @@
 			}
 		}
 	},
+	"highlight-panel": {
+		"tokens": {
+			"highlight-panel-header-font-color-brand": {
+				"primitive": "uilib-color-text-body"
+			}
+		}
+	},
 	"input-checkbox": {
 		"tokens": {
 			"input-checkbox-text-color-strong": {

package/scss/themes/firstchoice/_overrides.scss

@@ -176,6 +176,15 @@ $uilib-firstchoice-card-article-variables: map.merge(
 	)
 );
 
+// Card - carousel
+$uilib-firstchoice-carousel-variables: map.merge(
+	$uilib-carousel-variables,
+	(
+		prev-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-left.svg'),
+		next-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
+	)
+);
+
 // Card - icon
 $uilib-firstchoice-card-icon-variables: map.merge(
 	$uilib-card-icon-variables,
@@ -293,6 +302,16 @@ $uilib-firstchoice-input-text-variables: map.merge(
 	)
 );
 
+// Highlight panel
+$uilib-firstchoice-highlight-panel-variables: map.merge(
+	$uilib-highlight-panel-variables,
+	(
+		radius: var(--uilib-border-radius-200),
+		header-font-color-brand: var(--uilib-color-text-strong),
+		header-icon-color-brand: var(--uilib-color-text-strong),
+	)
+);
+
 // Icon button
 $uilib-firstchoice-icon-button-variables: map.merge(
 	$uilib-icon-button-variables,

package/scss/themes/firstchoice/index.scss

@@ -77,6 +77,9 @@
 	// Card - article
 	@include util.uilib-build-css-vars('card-article', $uilib-firstchoice-card-article-variables);
 
+	// Card - carousel
+	@include util.uilib-build-css-vars('carousel', $uilib-firstchoice-carousel-variables);
+
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-firstchoice-card-icon-variables);
 
@@ -131,6 +134,9 @@
 	// Hero
 	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
 
+	// Highlight panel
+	@include util.uilib-build-css-vars('highlight-panel', $uilib-firstchoice-highlight-panel-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-firstchoice-icon-button-variables);
 

package/scss/themes/firstchoice/theme.json

@@ -265,6 +265,19 @@
 			}
 		}
 	},
+	"highlight-panel": {
+		"tokens": {
+			"highlight-panel-radius": {
+				"primitive": "uilib-border-radius-200"
+			},
+			"highlight-panel-header-font-color-brand": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"highlight-panel-header-icon-color-brand": {
+				"primitive": "uilib-color-text-strong"
+			}
+		}
+	},
 	"icon-button": {
 		"tokens": {
 			"icon-button-radius": {

package/scss/themes/tui/_overrides.scss

@@ -22,6 +22,25 @@ $uilib-tui-card-search-variables: map.merge(
 	)
 );
 
+// Highlight panel
+$uilib-tui-highlight-panel-variables: map.merge(
+	$uilib-highlight-panel-variables,
+	(
+		header-bg-overlay-brand: radial-gradient(
+				circle farthest-corner at 99.91% 0%,
+				rgb(255 255 255 / 0%) 0%,
+				rgb(255 255 255 / 20%) 20%,
+				rgb(255 255 255 / 0%) 20%,
+				rgb(255 255 255 / 20%) 40%,
+				rgb(255 255 255 / 0%) 40%,
+				rgb(255 255 255 / 20%) 60%,
+				rgb(255 255 255 / 0%) 60%,
+				rgb(255 255 255 / 20%) 80%,
+				rgb(255 255 255 / 0%) 80%
+			),
+	)
+);
+
 // Ratings and Reviews - Numerical
 $uilib-tui-ratings-numerical-variables: map.merge(
 	$uilib-ratings-numerical-variables,

package/scss/themes/tui/index.scss

@@ -77,6 +77,9 @@
 	// Card - article
 	@include util.uilib-build-css-vars('card-article', $uilib-card-article-variables);
 
+	// Card - carousel
+	@include util.uilib-build-css-vars('carousel', $uilib-carousel-variables);
+
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-card-icon-variables);
 
@@ -191,6 +194,9 @@
 	// Social proofing
 	@include util.uilib-build-css-vars('social-proofing', $uilib-social-proofing-variables);
 
+	// Highlight panel
+	@include util.uilib-build-css-vars('highlight-panel', $uilib-tui-highlight-panel-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-tabs-in-page-variables);
 

package/scss/themes/tui/theme.json

@@ -154,5 +154,13 @@
 				"primitive": "uilib-color-brand-musement"
 			}
 		}
+	},
+	"highlight-panel": {
+		"tokens": {
+			"highlight-panel-header-bg-overlay-brand": {
+				"primitive": "radial-gradient",
+				"longValue": true
+			}
+		}
 	}
 }

package/scss/variables/_primitives.scss

@@ -80,6 +80,9 @@ $uilib-primitives: (
 	color-brand-tripadvisor-green-60: #00b747,
 	color-brand-tripadvisor-pine-green: #002b11,
 	color-brand-paypal-blue: #253b80,
+	color-brand-holidaycheck-blue: #0e55cd,
+	color-brand-holidaycheck-yellow: #ffca3a,
+	color-brand-holidaycheck-lightblue: #c7d5ed,
 
 	// 11px
 	font-size-40: 0.6875rem,

package/scss/variables/base-theme.json

@@ -1163,6 +1163,58 @@
 			}
 		}
 	},
+	"carousel": {
+		"tokens": {
+			"carousel-gap": {
+				"displayType": "size",
+				"primitive": "uilib-spacing-400",
+				"title": "Item gap",
+				"description": "Gap between carousel items and slides"
+			},
+			"carousel-viewport-padding": {
+				"displayType": "size",
+				"primitive": "uilib-spacing-200",
+				"title": "Viewport padding",
+				"description": "Applied as block padding on the viewport (preserves item shadow overflow) and inline padding on slides and footer (aligns content with the viewport edge)"
+			},
+			"carousel-prev-icon": {
+				"displayType": "icon",
+				"title": "Previous control icon",
+				"description": "Previous control icon",
+				"longValue": true
+			},
+			"carousel-next-icon": {
+				"displayType": "icon",
+				"title": "Next control icon",
+				"description": "Next control icon",
+				"longValue": true
+			},
+			"carousel-counter-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-body",
+				"title": "Counter colour",
+				"description": "Text colour of the counter indicator"
+			},
+			"carousel-counter-font": {
+				"displayType": "font",
+				"primitive": "uilib-typography-body-medium",
+				"title": "Counter font",
+				"description": "Typography of the counter indicator"
+			},
+			"carousel-motion-duration": {
+				"displayType": "other",
+				"primitive": "300ms",
+				"title": "Motion duration",
+				"description": "Slide transition duration (CSS time value, e.g. 300ms)"
+			},
+			"carousel-motion-easing": {
+				"displayType": "other",
+				"primitive": "ease-out",
+				"title": "Motion easing",
+				"description": "Slide transition easing function (CSS easing keyword or cubic-bezier)"
+			}
+		}
+	},
 	"flight-details": {
 		"tokens": {
 			"flight-details-icon": {
@@ -1281,6 +1333,106 @@
 			}
 		}
 	},
+	"highlight-panel": {
+		"tokens": {
+			"highlight-panel-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-400",
+				"title": "Panel radius",
+				"description": "Border radius for the panel container"
+			},
+			"highlight-panel-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-card",
+				"title": "Border colour",
+				"description": "Border colour for the panel"
+			},
+			"highlight-panel-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-canvas-default",
+				"title": "Background colour",
+				"description": "Background colour for the panel content"
+			},
+			"highlight-panel-header-font": {
+				"displayType": "font",
+				"primitive": "uilib-typography-component-heading-medium",
+				"title": "Header font",
+				"description": "Font for the header title"
+			},
+			"highlight-panel-header-font-brand": {
+				"displayType": "font",
+				"primitive": "uilib-typography-component-heading-large-strong",
+				"title": "Header font (brand)",
+				"description": "Font for the header title in brand variant"
+			},
+			"highlight-panel-header-font-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-strong",
+				"title": "Header font colour",
+				"description": "Font colour for the header title in default variant"
+			},
+			"highlight-panel-header-font-color-strong": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-inverse",
+				"title": "Header font colour (strong)",
+				"description": "Font colour for the header title in strong variant"
+			},
+			"highlight-panel-header-font-color-brand": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-strong",
+				"title": "Header font colour (brand)",
+				"description": "Font colour for the header title in brand variant"
+			},
+			"highlight-panel-header-icon-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Header icon colour",
+				"description": "Icon colour for the header toggle in default variant"
+			},
+			"highlight-panel-header-icon-color-strong": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-inverse",
+				"title": "Header icon colour (strong)",
+				"description": "Icon colour for the header toggle in strong variant"
+			},
+			"highlight-panel-header-icon-color-brand": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Header icon colour (brand)",
+				"description": "Icon colour for the header toggle in brand variant"
+			},
+			"highlight-panel-header-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-surface",
+				"title": "Header background",
+				"description": "Background colour for the default variant header"
+			},
+			"highlight-panel-header-bg-color-strong": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-brand-strong",
+				"title": "Header background (strong)",
+				"description": "Background colour for the strong variant header"
+			},
+			"highlight-panel-header-bg-color-brand": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-brand",
+				"title": "Header background (brand)",
+				"description": "Background colour for the brand variant header"
+			},
+			"highlight-panel-header-bg-overlay-brand": {
+				"displayType": "color",
+				"primitive": "none",
+				"title": "Header background overlay (brand)",
+				"description": "Background overlay for the brand variant header"
+			},
+			"highlight-panel-toggle-icon": {
+				"displayType": "icon",
+				"title": "Toggle icon",
+				"description": "Chevron icon used for the collapsible open/close indicator",
+				"longValue": true
+			}
+		}
+	},
 	"icon-button": {
 		"displayType": "color",
 		"tokens": {
@@ -1900,7 +2052,8 @@
 			"list-bullet-icon": {
 				"title": "List bullet icon",
 				"description": "List bullet icon",
-				"displayType": "icon"
+				"displayType": "icon",
+				"longValue": true
 			},
 			"list-image-radius": {
 				"primitive": "uilib-border-radius-100",
@@ -1919,6 +2072,12 @@
 				"title": "List multiline title font",
 				"description": "List multiline title font",
 				"displayType": "font"
+			},
+			"list-highlight-color": {
+				"primitive": "uilib-color-text-promotion",
+				"title": "List highlight text color",
+				"description": "List highlight text color",
+				"displayType": "color"
 			}
 		}
 	},
@@ -2355,6 +2514,16 @@
 				"description": "TripAdvisor logo as leading image on ratings (inverse)",
 				"longValue": true,
 				"displayType": "image"
+			},
+			"ratings-range-icons-holidaycheck-rating-icon": {
+				"title": "HolidayCheck unchecked rating icon",
+				"description": "HolidayCheck unchecked rating single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-holidaycheck-rating-checked-icon": {
+				"title": "HolidayCheck checked rating icon",
+				"description": "HolidayCheck checked rating single tile background-image",
+				"longValue": true
 			}
 		}
 	},

package/scss/variables.scss

@@ -24,6 +24,7 @@
 @forward 'lib/button/variables';
 @forward 'lib/cards/card/variables';
 @forward 'lib/cards/article/variables';
+@forward 'lib/cards/carousel/variables';
 @forward 'lib/cards/icon/variables';
 @forward 'lib/cards/search/variables';
 @forward 'lib/cards/selectable/variables';
@@ -44,6 +45,7 @@
 @forward 'lib/forms/input-text/variables';
 @forward 'lib/grid/variables';
 @forward 'lib/hero/variables';
+@forward 'lib/highlight-panel/variables';
 @forward 'lib/icon/variables';
 @forward 'lib/icon-button/variables';
 @forward 'lib/image/variables';
@@ -70,3 +72,6 @@
 @forward 'lib/tooltip/variables';
 @forward 'lib/travel-aware-banner/variables';
 @forward 'lib/typography/variables';
+
+// pattern variables
+@forward 'lib/patterns/review-card/variables';

package/types/components.ts

@@ -384,7 +384,7 @@ export interface LinkProps {
 }
 
 // ─── List ──────────────────────────────────────────────
-export type ListVariant = 'bulleted' | 'numbered' | 'icon' | 'image';
+export type ListVariant = 'bulleted' | 'numbered' | 'icon' | 'image' | 'plain';
 export type ListTextVariant = 'default' | 'strong' | 'label';
 export type ListIconSize = 'small' | 'medium' | 'large';
 export type ListLayout = 'default' | 'columns' | 'horizontal';
@@ -396,6 +396,9 @@ export interface ListProps {
 	layout?: ListLayout;
 	/** @deprecated Use `layout: 'columns'` instead. */
 	columns?: boolean;
+	hint?: boolean;
+	highlight?: boolean;
+	multiline?: boolean;
 	inverse?: boolean;
 	altShape?: boolean;
 	start?: number;
@@ -573,6 +576,8 @@ export interface RangeIconsProps {
 	scoreSun?: number;
 	scoreStar?: number;
 	scoreTripadvisor?: number;
+	scoreHolidaycheck?: number;
+	extraDescription?: string;
 	hasLink?: boolean;
 	hasPlus?: boolean;
 	hasTooltip?: boolean;
@@ -601,7 +606,7 @@ export interface RangeIconsGroupProps {
 }
 
 // ─── Ratings: shared ───────────────────────────────────
-export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t' | 'customer';
+export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t' | 'customer' | 'holidaycheck';
 export type RangeIconsSize = 'medium' | 'large';
 
 export interface SchemaProps {