@tui/design-system 1.12.0 → 1.14.0

package/scss/lib/patterns/card-with-list/_mixins.scss

@@ -0,0 +1,86 @@
+// Card with list / _mixins
+@use '../../cards/card/mixins' as *;
+@use '../../highlight-panel/mixins' as *;
+@use '../../list/mixins' as *;
+
+$uilib-card-with-list-included: false !default;
+$uilib-card-with-list-highlight-included: false !default;
+$uilib-card-with-list-master-included: false !default;
+
+// Builds card with list
+@mixin uilib-card-with-list() {
+	@if not $uilib-card-with-list-included {
+		$uilib-card-with-list-included: true !global;
+
+		@include uilib-card;
+		@include uilib-list;
+		@include uilib-card-with-list-master;
+	}
+}
+
+@mixin uilib-card-with-list-highlight() {
+	@if not $uilib-card-with-list-highlight-included {
+		$uilib-card-with-list-highlight-included: true !global;
+
+		@include uilib-highlight-panel;
+		@include uilib-list;
+		@include uilib-card-with-list-master;
+	}
+}
+
+@mixin uilib-card-with-list-master() {
+	@if not $uilib-card-with-list-master-included {
+		$uilib-card-with-list-master-included: true !global;
+
+		.uilib-card-with-list {
+			container-name: uilib-card-with-list;
+			container-type: inline-size;
+
+			&__content {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uilib-spacing-600);
+			}
+
+			&__heading {
+				margin: 0;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-component-heading-xlarge-strong);
+			}
+
+			&__description {
+				margin: 0 0 var(--uilib-spacing-200);
+				padding-bottom: var(--uilib-spacing-200);
+
+				border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+			}
+
+			&__value {
+				font: var(--uilib-typography-body-medium-strong);
+			}
+
+			&__list {
+				margin-bottom: 0;
+
+				@container uilib-card-with-list (min-width: 36.25rem) {
+					display: block;
+					column-gap: calc(var(--uilib-grid-gutter-width) * 2);
+
+					column-count: 2;
+					column-rule: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+
+					> li {
+						margin-bottom: var(--uilib-list-row-gap);
+
+						break-inside: avoid;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/scss/lib/patterns/holiday-summary/_index.scss

@@ -0,0 +1,3 @@
+// Holiday summary / index
+@use 'mixins' as *;
+@include uilib-holiday-summary;

package/scss/lib/patterns/holiday-summary/_mixins.scss

@@ -0,0 +1,94 @@
+// Holiday summary / _mixins
+@use '../../utility/mixins' as *;
+@use '../../alert/mixins' as *;
+@use '../../button/mixins' as *;
+@use '../../highlight-panel/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../list/mixins' as *;
+@use '../../price-box/mixins' as *;
+@use '../../skeleton/mixins' as *;
+
+$uilib-holiday-summary-included: false !default;
+$uilib-holiday-summary-skeleton-included: false !default;
+
+@mixin uilib-holiday-summary() {
+	@if not $uilib-holiday-summary-included {
+		$uilib-holiday-summary-included: true !global;
+
+		@include uilib-alert;
+		@include uilib-button;
+		@include uilib-highlight-panel;
+		@include uilib-link;
+		@include uilib-list;
+		@include uilib-price-box;
+		@include uilib-holiday-summary-master;
+	}
+}
+
+@mixin uilib-holiday-summary-skeleton() {
+	@if not $uilib-holiday-summary-skeleton-included {
+		$uilib-holiday-summary-skeleton-included: true !global;
+
+		@include uilib-skeleton;
+		@include uilib-holiday-summary-skeleton-master;
+	}
+}
+
+@mixin uilib-holiday-summary-master() {
+	.uilib-holiday-summary {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-300);
+
+		.uilib-list,
+		.uilib-alert {
+			margin: 0;
+		}
+
+		&__extras-link {
+			display: block;
+
+			width: max-content;
+			max-width: 100%;
+		}
+
+		&__footer {
+			padding-top: var(--uilib-spacing-200);
+
+			&:not(.uilib-price-box) .uilib-button {
+				width: 100%;
+			}
+		}
+	}
+
+	.uilib-highlight-panel:has(.uilib-holiday-summary) .uilib-highlight-panel__content--divider::after {
+		margin-top: var(--uilib-spacing-400);
+	}
+}
+
+@mixin uilib-holiday-summary-skeleton-master() {
+	.uilib-holiday-summary {
+		&__loading {
+			@include uilib-visually-hidden;
+		}
+
+		&__skeleton-header {
+			width: calc(100% + var(--uilib-spacing-400) * 2);
+			height: var(--uilib-spacing-1000);
+			margin: calc(var(--uilib-spacing-400) * -1) calc(var(--uilib-spacing-400) * -1) 0;
+
+			border-radius: 0;
+		}
+
+		&__skeleton-indent {
+			padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-200));
+		}
+	}
+
+	// Clips the bled header placeholder to the panel's own top corners instead of duplicating
+	// Highlight panel's radius token on a skeleton-owned element — stays correct even if that
+	// radius ever changes, since the panel's `__content` already carries it when there's no header.
+	.uilib-highlight-panel:has(.uilib-holiday-summary__skeleton-header) .uilib-highlight-panel__content {
+		overflow: hidden;
+	}
+}

package/scss/lib/patterns/review-card/_mixins.scss

@@ -235,6 +235,8 @@ $uilib-review-card-included: false !default;
 
 			.uilib-ratings-range-icons__details {
 				grid-column: unset;
+
+				flex-basis: unset;
 			}
 
 			.uilib-card__content-container {
@@ -245,12 +247,8 @@ $uilib-review-card-included: false !default;
 				}
 			}
 
-			.uilib-ratings-range-icons__details {
-				flex-basis: unset;
-			}
-
 			.uilib-ratings-range-icons-group {
-				display: none;
+				display: flex;
 			}
 
 			.uilib-ratings-range-icons__description {
@@ -259,10 +257,6 @@ $uilib-review-card-included: false !default;
 				display: block;
 				flex-basis: unset;
 			}
-
-			.uilib-ratings-range-icons-group {
-				display: flex;
-			}
 		}
 	}
 }

package/scss/mixins.scss

@@ -62,7 +62,9 @@
 @forward 'lib/utility/mixins';
 
 // Pattern mixins
+@forward 'lib/patterns/card-with-list/mixins';
 @forward 'lib/patterns/edit-search/mixins';
+@forward 'lib/patterns/holiday-summary/mixins';
 @forward 'lib/patterns/reasons-to-book/mixins';
 @forward 'lib/patterns/review-card/mixins';
 @forward 'lib/patterns/review-summary/mixins';

package/scss/themes/firstchoice/_colors.scss

@@ -11,7 +11,7 @@ $uilib-color-semantic-firstchoice: (
 	core-neutral: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
 	text-strong: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
 	text-body: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
-	text-link: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
+	text-link: map.get($uilib-firstchoice-primitives, 'color-pink-75'),
 	text-link-visited: map.get($uilib-firstchoice-primitives, 'color-purple-60'),
 	text-link-visited-inverse: map.get($uilib-firstchoice-primitives, 'color-purple-30'),
 	text-inverse: map.get($uilib-firstchoice-primitives, 'color-sand-10'),

package/scss/themes/firstchoice/_primitives.scss

@@ -7,6 +7,7 @@ $uilib-firstchoice-primitives: map.merge(
 		color-pink-100: #55031b,
 		color-pink-90: #770a2a,
 		color-pink-80: #99143b,
+		color-pink-75: #b8194d,
 		color-pink-70: #d61d5f,
 		color-pink-60: #ff467c,
 		color-pink-50: #ff7ea3,

package/scss/themes/firstchoice/theme.json

@@ -28,7 +28,7 @@
 					"primitive": "color-greenpalm-100"
 				},
 				"color-text-link": {
-					"primitive": "color-pink-70"
+					"primitive": "color-pink-75"
 				},
 				"color-text-link-visited": {
 					"primitive": "color-purple-60"

package/scss/variables/_colors.scss

@@ -51,6 +51,7 @@ $uilib-color-semantic: (
 	brand-tripadvisor-pine-green: map.get($uilib-primitives, 'color-brand-tripadvisor-pine-green'),
 	brand-tripadvisor-inverse: map.get($uilib-primitives, 'color-brand-tripadvisor-trip-green'),
 	brand-paypal: map.get($uilib-primitives, 'color-brand-paypal-blue'),
+	brand-platinum: map.get($uilib-primitives, 'color-brand-platinum-grey'),
 	other-scroll-handle: map.get($uilib-primitives, 'color-neutral-50'),
 	/* Deprecated */ brand-trip-advisor: map.get($uilib-primitives, 'color-brand-tripadvisor-green-60'),
 );

package/scss/variables/_primitives.scss

@@ -80,6 +80,7 @@ $uilib-primitives: (
 	color-brand-tripadvisor-green-60: #00b747,
 	color-brand-tripadvisor-pine-green: #002b11,
 	color-brand-paypal-blue: #253b80,
+	color-brand-platinum-grey: #4b5560,
 	color-brand-holidaycheck-blue: #0e55cd,
 	color-brand-holidaycheck-yellow: #ffca3a,
 	color-brand-holidaycheck-lightblue: #c7d5ed,

package/scss/variables/base-theme.json

@@ -246,6 +246,11 @@
 					"primitive": "color-brand-paypal-blue",
 					"title": "PayPal",
 					"darkColor": true
+				},
+				"color-brand-platinum": {
+					"primitive": "color-brand-platinum-grey",
+					"title": "Platinum",
+					"darkColor": true
 				}
 			}
 		}
@@ -1464,6 +1469,12 @@
 				"title": "Button radius",
 				"description": "Button radius"
 			},
+			"icon-button-text-color": {
+				"primitive": "uilib-color-core-interaction",
+				"displayType": "color",
+				"title": "Label text colour",
+				"description": "Label text colour"
+			},
 			"icon-button-ghost-color": {
 				"primitive": "uilib-color-core-interaction",
 				"title": "Ghost text colour",
@@ -1672,6 +1683,16 @@
 				"title": "Local product background colour",
 				"description": "Local product background colour"
 			},
+			"info-tag-platinum-bg-color": {
+				"primitive": "uilib-color-brand-platinum",
+				"title": "Platinum background colour",
+				"description": "Platinum background colour"
+			},
+			"info-tag-platinum-text-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Platinum text colour",
+				"description": "Platinum text colour"
+			},
 			"info-tag-neutral-bg-color": {
 				"primitive": "uilib-color-core-neutral",
 				"title": "Neutral background colour",

package/types/components.ts

@@ -3,8 +3,10 @@
 
 export type Theme = 'tui' | 'firstchoice' | 'crystalski';
 export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+export type Size = 'small' | 'medium' | 'large';
 export type IconPosition = 'none' | 'leading' | 'trailing';
 export type ButtonVariantBase = 'primary' | 'secondary' | 'promotion' | 'search';
+export type IconButtonVariant = ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
 export type HeadingLevel = '2' | '3' | '4' | '5' | '6';
 
 // ═══════════════════════════════════════════════════════════
@@ -87,12 +89,32 @@ export interface ButtonProps {
 
 // ─── Cards ─────────────────────────────────────────────
 
+// ─── Card ──────────────────────────────────────
+export interface CardProps {
+	extraClasses?: string[];
+	extraAttributes?: string[];
+	link?: boolean;
+	iconButton?: boolean;
+	iconButtonLabel?: boolean;
+	iconButtonLabelText?: string;
+	linkText?: string;
+	linkHref?: string;
+	supplementaryContainer?: boolean;
+	cardContent?: string;
+	supplementaryContent?: string;
+	theme?: Theme;
+}
+
 // ─── Card Article ──────────────────────────────────────
 export interface CardArticleProps {
 	type?: 'static' | 'link' | 'multi-link';
+	iconButton?: boolean;
+	iconButtonLabel?: boolean;
+	iconButtonLabelText?: string;
 	elementType?: 'anchor' | 'button';
 	content?: 'short' | 'medium' | 'long' | 'rich';
 	headingText?: string;
+	theme?: Theme;
 }
 
 // ─── Card Icon ─────────────────────────────────────────
@@ -339,6 +361,7 @@ export interface InputSliderProps {
 	value?: number | null;
 	minLabel?: string;
 	maxLabel?: string;
+	valueTextTemplate?: string;
 	disabled?: boolean;
 }
 
@@ -420,10 +443,12 @@ export interface IconProps {
 
 // ─── Icon Button ─────────────────────────────────────────
 export interface IconButtonProps {
-	element?: 'a' | 'button';
-	variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
-	size?: 'small' | 'medium' | 'large';
+	element?: 'a' | 'button' | 'div';
+	variant?: IconButtonVariant;
+	size?: Size;
 	isDisabled?: boolean;
+	visibleLabel?: boolean;
+	labelRight?: boolean;
 	label?: string;
 	iconAsset?: string;
 	selected?: boolean;
@@ -436,8 +461,31 @@ export interface ImageSrcItem {
 	size: string;
 }
 
+// prettier-ignore
 export type ImageFocalPoint =
-	'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+	| 'top-left'
+	| 'top-center'
+	| 'top-right'
+	| 'center-left'
+	| 'center'
+	| 'center-right'
+	| 'bottom-left'
+	| 'bottom-center'
+	| 'bottom-right';
+
+/**
+ * Responsive focal points, keyed by breakpoint (matching the library's
+ * breakpoint scale). `base` applies below the `xs` breakpoint; any breakpoint
+ * may be omitted — omitted breakpoints inherit the next smallest defined value
+ * (base → xs → sm → md → lg), falling back to `center`.
+ */
+export interface ImageResponsiveFocalPoint {
+	base?: ImageFocalPoint;
+	xs?: ImageFocalPoint;
+	sm?: ImageFocalPoint;
+	md?: ImageFocalPoint;
+	lg?: ImageFocalPoint;
+}
 
 export interface ImageProps {
 	altText: string;
@@ -445,12 +493,16 @@ export interface ImageProps {
 	srcset?: ImageSrcItem[];
 	ratio?: 'landscape' | 'panoramic' | 'portrait' | 'square' | 'wide';
 	shape?: 'rectangle' | 'rounded';
-	focalPoint?: ImageFocalPoint;
+	/**
+	 * Focal point for the image. Accepts a single value applied at all breakpoints,
+	 * or an object with per-breakpoint values for responsive focal points.
+	 */
+	focalPoint?: ImageFocalPoint | ImageResponsiveFocalPoint;
 }
 
 // ─── Info Tag ───────────────────────────────────────────
 export interface InfoTagProps {
-	variant?: 'info' | 'neutral' | 'scarcity' | 'local-product';
+	variant?: 'info' | 'neutral' | 'scarcity' | 'local-product' | 'platinum';
 	size?: 'small' | 'medium';
 	label?: string;
 	leadingIcon?: boolean;
@@ -477,6 +529,7 @@ 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 type ListDensity = 'compact' | 'default' | 'spacious';
 
 export interface ListItem {
 	label?: string;
@@ -490,6 +543,7 @@ export interface ListProps {
 	textVariant?: ListTextVariant;
 	iconSize?: ListIconSize;
 	layout?: ListLayout;
+	density?: ListDensity;
 	/** @deprecated Use `layout: 'columns'` instead. */
 	columns?: boolean;
 	hint?: boolean;
@@ -504,7 +558,7 @@ export interface ListProps {
 
 // ─── Loader ────────────────────────────────────────────
 export interface LoaderProps {
-	size?: 'small' | 'medium' | 'large';
+	size?: Size;
 	message?: string;
 	messageVisible?: boolean;
 	theme?: Theme;
@@ -523,7 +577,7 @@ export interface MediaButtonProps {
 // ─── Modal ─────────────────────────────────────────────
 export interface ModalProps {
 	header?: string;
-	size?: 'small' | 'medium' | 'large';
+	size?: Size;
 	primaryButtonLabel?: string;
 	secondaryButtonLabel?: string;
 	closeButtonLabel?: string;
@@ -544,7 +598,7 @@ export const Currencies = ['GBP', 'EUR', 'USD', 'SEK', 'NOK', 'DKK', 'CHF'] as c
 export type Currency = (typeof Currencies)[number];
 
 export interface PriceProps {
-	size?: 'small' | 'medium' | 'large';
+	size?: Size;
 	currency?: Currency;
 	mainUnit?: string;
 	subUnit?: string;
@@ -568,6 +622,9 @@ export interface PriceBoxProps {
 	divider?: boolean;
 	footer?: boolean;
 	footerHtml?: string;
+	ctaLabel?: string;
+	price?: Partial<PriceProps>;
+	extraClasses?: string[];
 }
 
 // ─── Promo Tag ──────────────────────────────────────────
@@ -838,6 +895,26 @@ export interface TravelAwareBannerProps {
 // PATTERNS
 // ═══════════════════════════════════════════════════════════
 
+// ─── Card With List ────────────────────────────────────
+export interface CardWithListItem {
+	label?: string;
+	hint?: string;
+	hintHref?: string;
+}
+
+export interface CardWithListProps {
+	variant?: 'basic' | 'highlight';
+	heading?: string;
+	headingLevel?: HeadingLevel;
+	description?: string;
+	density?: ListDensity;
+	items?: CardWithListItem[];
+	collapsible?: boolean;
+	open?: boolean;
+	icon?: string;
+	theme?: Theme;
+}
+
 // ─── Edit Search ────────────────────────────────────────
 export interface EditSearchProps {
 	variant?: 'back' | 'list';
@@ -846,6 +923,49 @@ export interface EditSearchProps {
 	uniqueId?: string;
 }
 
+// ─── Holiday Summary ────────────────────────────────────
+export interface HolidaySummaryRow {
+	icon: string;
+	label: string;
+	detail?: string | string[];
+	editable?: boolean;
+	extrasLink?: boolean;
+}
+
+export interface HolidaySummaryNote {
+	text: string;
+	strong?: boolean;
+}
+
+export interface HolidaySummaryProps {
+	title?: string;
+	open?: boolean;
+	collapsible?: boolean;
+	rows?: HolidaySummaryRow[];
+	extrasCount?: number;
+	extrasHref?: string;
+	extrasLabel?: string;
+	promoTags?: boolean;
+	currency?: Currency;
+	pricePrefix?: boolean;
+	priceMainUnit?: string;
+	priceSubUnit?: string;
+	priceSuffix?: string;
+	totalPriceValue?: string;
+	showPrice?: boolean;
+	supportingText?: HolidaySummaryNote[];
+	ctaLabel?: string;
+	footerText?: string;
+	footerLinkLabel?: string;
+	footerLinkHref?: string;
+	editLabel?: string;
+	state?: 'default' | 'skeleton';
+	content?: string;
+	loadingLabel?: string;
+	skeletonRows?: number;
+	theme?: Theme;
+}
+
 // ─── Reasons To Book ───────────────────────────────────
 export interface ReasonToBookItem {
 	pictogram: string;