@tui/design-system 1.6.0 → 1.8.0

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",
@@ -1913,6 +2066,18 @@
 				"title": "List image radius (alt)",
 				"description": "List image radius (alt)",
 				"displayType": "radius"
+			},
+			"list-multiline-title-font": {
+				"primitive": "uilib-typography-label-medium",
+				"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"
 			}
 		}
 	},
@@ -2093,6 +2258,64 @@
 			}
 		}
 	},
+	"card-promotion": {
+		"tokens": {
+			"card-promotion-elevation": {
+				"primitive": "uilib-elevation-100",
+				"title": "Container elevation",
+				"description": "Box shadow of the banner container",
+				"displayType": "shadow"
+			},
+			"card-promotion-radius": {
+				"primitive": "uilib-border-radius-400",
+				"title": "Container radius",
+				"description": "Border radius of the banner container",
+				"displayType": "radius"
+			},
+			"card-promotion-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Container background color",
+				"description": "Background color of the banner container",
+				"displayType": "color"
+			},
+			"card-promotion-headline-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Headline color",
+				"description": "Text color of the headline",
+				"displayType": "color"
+			},
+			"card-promotion-subcopy-color": {
+				"primitive": "uilib-color-text-body",
+				"title": "Sub-copy color",
+				"description": "Text color of the sub-copy",
+				"displayType": "color"
+			},
+			"card-promotion-subcopy-link-color": {
+				"primitive": "uilib-color-text-link",
+				"title": "Sub-copy link color",
+				"description": "Text color of inline links in the sub-copy",
+				"displayType": "color"
+			},
+			"card-promotion-code-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Promo code color",
+				"description": "Text color of the promo code",
+				"displayType": "color"
+			},
+			"card-promotion-cta-copy-icon": {
+				"displayType": "icon",
+				"title": "CTA copy icon",
+				"description": "Icon used in the Copy code button",
+				"longValue": true
+			},
+			"card-promotion-cta-copied-icon": {
+				"displayType": "icon",
+				"title": "CTA copied icon",
+				"description": "Icon used in the Copied button after a successful copy",
+				"longValue": true
+			}
+		}
+	},
 	"promo-tag": {
 		"tokens": {
 			"promo-tag-radius": {
@@ -2291,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';
@@ -55,6 +57,7 @@
 @forward 'lib/modal/variables';
 @forward 'lib/pagination/variables';
 @forward 'lib/price/variables';
+@forward 'lib/cards/promotion/variables';
 @forward 'lib/promo-tag/variables';
 @forward 'lib/ratings-reviews/numerical/variables';
 @forward 'lib/ratings-reviews/percentage/variables';
@@ -69,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

@@ -66,6 +66,9 @@ export interface AnchorTab {
 
 export interface AnchorTabsProps {
 	icon?: string;
+	tabsLabelledby?: string;
+	tabsLabel?: string;
+	/** @deprecated Use `tabsLabelledby` instead */
 	ariaLabelledby?: string;
 	tabs?: AnchorTab[];
 	sticky?: boolean;
@@ -146,6 +149,9 @@ export interface DatepickerProps {
 	maxDate?: string;
 	previousLabel?: string;
 	nextLabel?: string;
+	announceStart?: string;
+	announceRange?: string;
+	instructions?: string;
 	locale?: string;
 }
 
@@ -247,6 +253,9 @@ export interface InPageTabsProps {
 	variant?: 'left-aligned' | 'full-width';
 	icon?: string;
 	active?: string;
+	tabsLabelledby?: string;
+	tabsLabel?: string;
+	/** @deprecated Use `tabsLabelledby` instead */
 	ariaLabelledby?: string;
 	tabs?: InPageTab[];
 }
@@ -375,15 +384,21 @@ 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 ListProps {
 	variant?: ListVariant;
 	textVariant?: ListTextVariant;
 	iconSize?: ListIconSize;
+	layout?: ListLayout;
+	/** @deprecated Use `layout: 'columns'` instead. */
 	columns?: boolean;
+	hint?: boolean;
+	highlight?: boolean;
+	multiline?: boolean;
 	inverse?: boolean;
 	altShape?: boolean;
 	start?: number;
@@ -458,6 +473,26 @@ export interface PriceBoxProps {
 	footerHtml?: string;
 }
 
+// ─── Card Promotion ───────────────────────────────────────
+export interface CardPromotionProps {
+	type?: 'default' | 'promo-code';
+	condensed?: boolean;
+	headingLevel?: HeadingLevel;
+	headline?: string;
+	scarcityLabel?: string;
+	conditions?: string;
+	linkLabel?: string;
+	icon?: string;
+	code?: string;
+	copied?: boolean;
+	copyLabel?: string;
+	copiedLabel?: string;
+	expired?: boolean;
+	expiredLabel?: string;
+	announcementLabel?: string;
+	theme?: Theme;
+}
+
 // ─── Promo Tag ──────────────────────────────────────────
 export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
 export type PromoTagSize = (typeof PromoTagSizes)[number];
@@ -541,6 +576,8 @@ export interface RangeIconsProps {
 	scoreSun?: number;
 	scoreStar?: number;
 	scoreTripadvisor?: number;
+	scoreHolidaycheck?: number;
+	extraDescription?: string;
 	hasLink?: boolean;
 	hasPlus?: boolean;
 	hasTooltip?: boolean;
@@ -569,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 {