@tui/design-system 1.7.0 → 1.9.0

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);
 
@@ -202,4 +208,8 @@
 
 	// Travel Aware Banner
 	@include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
+
+	// Patterns
+	// Edit search
+	@include util.uilib-build-css-vars('edit-search', $uilib-edit-search-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/_grid.scss

@@ -1,11 +1,11 @@
 // grid
 $uilib-grid-size: 0.25rem !default; // 4px
 $uilib-grid-columns: 12 !default;
-$uilib-grid-gutter-width: $uilib-grid-size * 4; // 16px
-$uilib-grid-gutter-height: $uilib-grid-size * 4; // 16px
+$uilib-grid-gutter-width: $uilib-grid-size * 4 !default; // 16px
+$uilib-grid-gutter-height: $uilib-grid-size * 4 !default; // 16px
 
 // layout
-$uilib-layout-max-width: 80rem; // 1280px
+$uilib-layout-max-width: 80rem !default; // 1280px
 $uilib-layout-app-height: 100dvh;
 
 @mixin uilib-grid-base-vars() {

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
 			}
 		}
 	},
@@ -2600,5 +2769,26 @@
 				"description": "Travel Aware banner border radius"
 			}
 		}
+	},
+	"edit-search": {
+		"displayType": "color",
+		"tokens": {
+			"edit-search-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-400",
+				"title": "Edit search border radius",
+				"description": "Edit search border radius"
+			},
+			"edit-search-bg-color": {
+				"primitive": "--uilib-color-core-surface",
+				"title": "Edit search background colour",
+				"description": "Edit search background colour"
+			},
+			"edit-search-text-color": {
+				"primitive": "--uilib-color-text-strong",
+				"title": "Edit search text colour",
+				"description": "Edit search text colour"
+			}
+		}
 	}
 }

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,8 @@
 @forward 'lib/tooltip/variables';
 @forward 'lib/travel-aware-banner/variables';
 @forward 'lib/typography/variables';
+
+// Pattern variables
+@forward 'lib/patterns/edit-search/variables';
+@forward 'lib/patterns/review-card/variables';
+@forward 'lib/patterns/review-summary/variables';

package/types/components.ts

@@ -384,11 +384,18 @@ 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';
 
+export interface ListItem {
+	label?: string;
+	iconSize?: ListIconSize;
+	iconAsset?: string;
+	imageUrl?: string;
+}
+
 export interface ListProps {
 	variant?: ListVariant;
 	textVariant?: ListTextVariant;
@@ -396,10 +403,14 @@ export interface ListProps {
 	layout?: ListLayout;
 	/** @deprecated Use `layout: 'columns'` instead. */
 	columns?: boolean;
+	hint?: boolean;
+	highlight?: boolean;
+	multiline?: boolean;
 	inverse?: boolean;
 	altShape?: boolean;
 	start?: number;
 	theme?: Theme;
+	extraClasses?: string[];
 }
 
 // ─── Loader ────────────────────────────────────────────
@@ -560,6 +571,7 @@ export interface RangeBarProps {
 	/** @deprecated Theme is no longer supported for this component */
 	theme?: Theme;
 	isGroup?: boolean;
+	items?: { label: string; score: number; accessibleLabel?: string }[];
 }
 
 // ─── Ratings: Range icons (Sun/Star/TUI/TripAdvisor/TUI-T) ─
@@ -573,6 +585,8 @@ export interface RangeIconsProps {
 	scoreSun?: number;
 	scoreStar?: number;
 	scoreTripadvisor?: number;
+	scoreHolidaycheck?: number;
+	extraDescription?: string;
 	hasLink?: boolean;
 	hasPlus?: boolean;
 	hasTooltip?: boolean;
@@ -601,7 +615,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 {
@@ -690,6 +704,7 @@ export interface TooltipProps {
 	label?: string;
 	content?: string;
 	isInverse?: boolean;
+	tooltipRoot?: string;
 	theme?: Theme;
 }
 
@@ -712,3 +727,26 @@ export interface SocialProofingProps {
 	hasIcon?: boolean;
 	closeLabel?: string;
 }
+
+// ─── PATTERNS ────────────────────────────────────────────
+// ─── Edit search ────────────────────────────────────────────
+
+export interface EditSearchProps {
+	variant?: 'back' | 'list';
+	heading?: string;
+	listItems?: ListItem[];
+	uniqueId?: string;
+}
+
+// ─── Review Card ───────────────────────────────────────────
+export interface ReviewCardProps {
+	layout?: 'default' | 'compact' | 'dual';
+	switchLayout?: boolean;
+	breakpoint?: number;
+	brand?: 'tripadvisor' | 'customer' | 'holidaycheck';
+}
+
+// ─── Review Summary ────────────────────────────────────────
+export interface ReviewSummaryProps {
+	brand?: 'tripadvisor' | 'customer';
+}