@tui/design-system 1.8.0 → 1.10.0

package/scss/lib/grid/_column.scss

@@ -47,6 +47,27 @@
 	#{$uilib-grid-selector-column}--order#{$prefix}-reset {
 		@include uilib-grid-col-order-reset;
 	}
+
+	// Dividers
+	#{$uilib-grid-selector-column}--divider#{$prefix}-left {
+		@include uilib-grid-col-divider-left;
+	}
+
+	#{$uilib-grid-selector-column}--divider#{$prefix}-top {
+		@include uilib-grid-col-divider-top;
+	}
+
+	#{$uilib-grid-selector-column}--divider#{$prefix}-left-none {
+		@include uilib-grid-col-divider-left-none;
+	}
+
+	#{$uilib-grid-selector-column}--divider#{$prefix}-top-none {
+		@include uilib-grid-col-divider-top-none;
+	}
+
+	#{$uilib-grid-selector-column}--divider#{$prefix}-none {
+		@include uilib-grid-col-divider-none;
+	}
 }
 
 @include uilib-generate-grid-for-resolution;

package/scss/lib/grid/_mixins.scss

@@ -130,3 +130,92 @@
 @mixin uilib-grid-col-order-reset {
 	order: 0;
 }
+
+/* --- Grid Column Dividers ------- */
+
+/// Adds a vertical divider (left edge) to a grid column using ::after.
+/// Positioned in the centre of the column gap.
+/// Can be combined with uilib-grid-col-divider-top on the same element.
+///
+/// @example scss - Usage
+/// .my-col { @include uilib-grid-col-divider-left; }
+///
+/// @example scss - Both dividers on the same column
+/// .my-col {
+///   @include uilib-grid-col-divider-left;
+///   @include uilib-grid-col-divider-top;
+/// }
+
+@mixin uilib-grid-col-divider-left {
+	position: relative;
+
+	&::after {
+		position: absolute;
+		top: 0;
+		left: calc(var(--uilib-grid-gutter-width) / -2);
+		bottom: 0;
+		content: '';
+
+		border-left: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+
+		pointer-events: none;
+	}
+}
+
+/// Adds a horizontal divider (top edge) to a grid column using ::before.
+/// Positioned in the centre of the row gap.
+/// Can be combined with uilib-grid-col-divider-left on the same element.
+///
+/// @example scss - Usage
+/// .my-col { @include uilib-grid-col-divider-top; }
+
+@mixin uilib-grid-col-divider-top {
+	position: relative;
+
+	&::before {
+		position: absolute;
+		top: calc(var(--uilib-grid-gutter-height) / -2);
+		left: 0;
+		right: 0;
+		content: '';
+
+		border-top: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+
+		pointer-events: none;
+	}
+}
+
+/// Removes the left (vertical) divider from a grid column.
+
+@mixin uilib-grid-col-divider-left-none {
+	&::after {
+		content: none;
+	}
+}
+
+/// Removes the top (horizontal) divider from a grid column.
+
+@mixin uilib-grid-col-divider-top-none {
+	&::before {
+		content: none;
+	}
+}
+
+/// Removes both dividers from a grid column.
+///
+/// @example scss - Remove all dividers at a breakpoint
+/// .my-col {
+///   @include uilib-grid-col-divider-left;
+///   @include uilib-grid-col-divider-top;
+///   @include uilib-breakpoint(md) { @include uilib-grid-col-divider-none; }
+/// }
+
+@mixin uilib-grid-col-divider-none {
+	&::after {
+		content: none;
+	}
+
+	&::before {
+		content: none;
+	}
+}

package/scss/lib/info-tag/_mixins.scss

@@ -47,6 +47,8 @@ $uilib-info-tag-list-included: false !default;
 	}
 
 	.uilib-info-tag__content {
+		min-width: 0;
+
 		line-height: 1rem;
 		overflow-wrap: break-word;
 	}

package/scss/lib/patterns/edit-search/_index.scss

@@ -0,0 +1,3 @@
+// Edit search / index
+@use 'mixins' as *;
+@include uilib-edit-search;

package/scss/lib/patterns/edit-search/_mixins.scss

@@ -0,0 +1,98 @@
+// Edit search / _mixins
+@use 'sass:map';
+@use 'variables' as *;
+@use '../../../variables/breakpoints' as *;
+@use '../../utility/mixins' as *;
+@use '../../button/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../list/mixins' as *;
+
+$uilib-edit-search-included: false !default;
+
+@mixin uilib-edit-search() {
+	@if not $uilib-edit-search-included {
+		$uilib-edit-search-included: true !global;
+
+		@include uilib-button;
+		@include uilib-link;
+		@include uilib-list;
+		@include uilib-edit-search-master;
+	}
+}
+
+@mixin uilib-edit-search-master() {
+	.uilib-edit-search {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-600);
+		justify-content: space-between;
+		align-items: center;
+
+		padding: var(--uilib-spacing-200) var(--uilib-spacing-200) var(--uilib-spacing-200) var(--uilib-spacing-400);
+
+		color: var(--uilib-edit-search-text-color);
+
+		border-radius: var(--uilib-edit-search-radius);
+
+		background: var(--uilib-edit-search-bg-color);
+
+		&__content {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-100);
+		}
+
+		&__heading {
+			font: var(--uilib-typography-label-medium-strong);
+
+			&--hidden {
+				@include uilib-visually-hidden;
+			}
+		}
+
+		&__link:visited {
+			color: var(--uilib-color-text-link);
+			text-decoration-color: var(--uilib-link-decoration-color);
+		}
+
+		&__button {
+			align-self: flex-end;
+		}
+
+		&__list {
+			margin: 0;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@media (max-width: #{map.get($uilib-breakpoints, md)}) {
+			&__list {
+				display: -webkit-box;
+
+				text-align: left;
+				text-overflow: ellipsis;
+
+				overflow: hidden;
+				-webkit-line-clamp: 2;
+				line-clamp: 2;
+				-webkit-box-orient: vertical;
+
+				> li {
+					display: inline;
+
+					padding-left: 0;
+
+					&::before,
+					.uilib-icon {
+						display: none;
+					}
+
+					&:not(:last-child)::after {
+						content: ' | ';
+
+						display: inline;
+					}
+				}
+			}
+		}
+	}
+}

package/scss/lib/patterns/edit-search/_variables.scss

@@ -0,0 +1,7 @@
+// Edit search / _variables
+
+$uilib-edit-search-variables: (
+	radius: var(--uilib-border-radius-400),
+	bg-color: var(--uilib-color-core-surface),
+	text-color: var(--uilib-color-text-strong),
+) !default;

package/scss/lib/patterns/reasons-to-book/_index.scss

@@ -0,0 +1,3 @@
+// Reasons to book / index
+@use 'mixins' as *;
+@include uilib-reasons-to-book;

package/scss/lib/patterns/reasons-to-book/_mixins.scss

@@ -0,0 +1,86 @@
+// Reasons to book / _mixins
+@use 'variables' as *;
+@use '../../link/mixins' as *;
+@use '../../cards/carousel/mixins' as *;
+
+$uilib-reasons-to-book-included: false !default;
+
+@mixin uilib-reasons-to-book() {
+	@if not $uilib-reasons-to-book-included {
+		$uilib-reasons-to-book-included: true !global;
+
+		@include uilib-link;
+		@include uilib-carousel;
+		@include uilib-reasons-to-book-master;
+	}
+}
+
+@mixin uilib-reasons-to-book-master() {
+	.uilib-reasons-to-book {
+		container-name: uilib-reasons-to-book;
+		container-type: inline-size;
+
+		&__heading {
+			margin: 0 0 var(--uilib-spacing-400);
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-xxlarge);
+		}
+
+		// Reason cards keep their own natural (content-driven) width and simply overflow/scroll
+		// rather than being evenly redivided to fill the viewport — unlike the generic Carousel
+		// `item` slide, which defaults to `flex: 0 0 calc(100cqw / visible)`. The trailing divider
+		// line is a `::after` pseudo-element on the slide itself (not a separate Divider element),
+		// so this internal `gap` (not the track gap, which Embla would mismeasure) provides the
+		// space between the reason content and its line — and the line is automatically omitted on
+		// the last slide via `:not(:last-child)`, with no JS "is this the last item" check needed.
+		.uilib-carousel__slide {
+			flex: 0 0 auto;
+			gap: var(--uilib-spacing-400);
+
+			&:not(:last-child)::after {
+				content: '';
+
+				flex: 0 0 auto;
+				align-self: stretch;
+
+				border-inline-end: var(--uilib-stroke-size-025) solid var(--uilib-color-border-divider);
+			}
+		}
+
+		&__reason {
+			display: flex;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+		}
+
+		&__pictogram {
+			flex: 0 0 auto;
+
+			width: 4.5rem; /* 72 / 16 — fixed pictogram size per Figma, no matching icon-size token */
+			height: 4.5rem;
+		}
+
+		&__text {
+			max-width: 9.875rem; /* 158 / 16 — keeps the ~238px card pitch from Figma; wraps to 2 lines */
+			margin: 0;
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-small-strong);
+		}
+
+		// Compact reflow: below this container width the reason card centres its text and stacks
+		// the pictogram above it. Driven by the pattern's own width, not the viewport, so it works
+		// the same whether the carousel is full-bleed or nested in a narrower column.
+		// 34.1875rem = 547px — the top of the Compact range in Figma (288–547px); Static/Scrollable
+		// (548px+) stay above it.
+		/* stylelint-disable-next-line order/order */
+		@container uilib-reasons-to-book (max-width: 34.1875rem) {
+			.uilib-reasons-to-book__reason {
+				flex-direction: column;
+
+				text-align: center;
+			}
+		}
+	}
+}

package/scss/lib/patterns/reasons-to-book/_variables.scss

@@ -0,0 +1,3 @@
+// Reasons to book / _variables
+
+$uilib-reasons-to-book-variables: () !default;

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

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

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

@@ -0,0 +1,156 @@
+// Review summary / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../../divider/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../ratings-reviews/range-bar/mixins' as *;
+@use '../../ratings-reviews/range-icons/mixins' as *;
+@use '../../ratings-reviews/range-icons-group/mixins' as *;
+
+$uilib-review-summary-included: false !default;
+
+@mixin uilib-review-summary() {
+	@if not $uilib-review-summary-included {
+		$uilib-review-summary-included: true !global;
+
+		@include uilib-divider;
+		@include uilib-link;
+		@include uilib-ratings-range-bar;
+		@include uilib-ratings-range-icons;
+		@include uilib-ratings-range-icons-group;
+		@include uilib-review-summary-master;
+	}
+}
+
+@mixin uilib-review-summary-master() {
+	.uilib-review-summary {
+		container-name: uilib-review-summary;
+		container-type: inline-size;
+
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: var(--uilib-spacing-400) var(--uilib-spacing-200);
+		align-items: center;
+
+		&__title {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-small);
+		}
+
+		&__logo {
+			height: 1.125rem; /* 18 / 16 */
+		}
+
+		&__overall-rating,
+		&__divider,
+		&__breakdown,
+		&__link {
+			grid-column: 1 / -1;
+		}
+
+		&__overall-rating {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+			align-items: start;
+
+			max-width: max-content;
+
+			.uilib-ratings-range-icons__value {
+				grid-row: 1 / span 3;
+
+				font: var(--uilib-typography-heading-xxlarge);
+			}
+
+			.uilib-ratings-range-icons__score {
+				grid-row: unset;
+			}
+
+			.uilib-ratings-range-icons__details {
+				grid-column: unset;
+			}
+		}
+
+		&__divider {
+			width: 100%;
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&__breakdown {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-800) var(--uilib-spacing-1600);
+			align-items: flex-start;
+
+			width: 100%;
+
+			.uilib-ratings-range-bar-group,
+			.uilib-ratings-range-icons-group {
+				width: 100%;
+				max-width: 20rem; /* 320 / 16 */
+				margin: 0;
+			}
+		}
+
+		&__link {
+			margin-top: var(--uilib-spacing-200);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-review-summary (min-width: 22rem) {
+			&__overall-rating {
+				.uilib-ratings-range-icons__value {
+					min-width: 3ex; /* 52px / 16 */
+				}
+			}
+
+			&__breakdown {
+				display: grid;
+				grid-template-columns: auto 1fr;
+				gap: var(--uilib-spacing-800) var(--uilib-spacing-400);
+				align-items: start;
+
+				&::before {
+					grid-row: 1 / span 2;
+					grid-column: 1;
+
+					content: '';
+
+					display: block;
+
+					width: 3ex; /* 52px / 16 */
+					height: 100%;
+
+					font: var(--uilib-typography-heading-xxlarge);
+				}
+
+				.uilib-ratings-range-bar-group,
+				.uilib-ratings-range-icons-group {
+					grid-column: 2;
+				}
+			}
+		}
+
+		@container uilib-review-summary (min-width: 42rem) {
+			&__breakdown {
+				grid-template-columns: auto 1fr 1fr;
+				gap: var(--uilib-spacing-1600);
+
+				max-width: 44.5rem;
+
+				&::before {
+					grid-row: 1 / span 1;
+
+					margin-right: calc(var(--uilib-spacing-1200) * -1);
+				}
+
+				.uilib-ratings-range-icons-group {
+					grid-column: 3;
+				}
+			}
+		}
+	}
+}

package/scss/lib/patterns/review-summary/_variables.scss

@@ -0,0 +1,3 @@
+// Review summary / _variables
+
+$uilib-review-summary-variables: () !default;

package/scss/lib/ratings-reviews/range-bar/_mixins.scss

@@ -133,9 +133,10 @@ $uilib-ratings-range-bar-included: false !default;
 		}
 
 		&__bar {
+			$margin: calc((1rem * var(--uilib-line-height-body)) - 1rem);
 			width: var(--uilib-ratings-range-bar-bar-width);
-			height: calc(1rem - var(--uilib-stroke-size-050));
-			margin-top: var(--uilib-spacing-050);
+			height: 1rem;
+			margin: calc(#{$margin} / 2) 0;
 
 			border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-ratings-range-bar-bar-color);
 			border-radius: var(--uilib-border-radius-pill);

package/scss/mixins.scss

@@ -57,4 +57,9 @@
 @forward 'lib/travel-aware-banner/mixins';
 @forward 'lib/typography/mixins';
 @forward 'lib/utility/mixins';
+
+// Pattern mixins
+@forward 'lib/patterns/edit-search/mixins';
+@forward 'lib/patterns/reasons-to-book/mixins';
 @forward 'lib/patterns/review-card/mixins';
+@forward 'lib/patterns/review-summary/mixins';

package/scss/themes/crystalski/index.scss

@@ -208,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/firstchoice/index.scss

@@ -208,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/index.scss

@@ -208,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/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/base-theme.json

@@ -2769,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

@@ -73,5 +73,8 @@
 @forward 'lib/travel-aware-banner/variables';
 @forward 'lib/typography/variables';
 
-// pattern variables
+// Pattern variables
+@forward 'lib/patterns/edit-search/variables';
+@forward 'lib/patterns/reasons-to-book/variables';
 @forward 'lib/patterns/review-card/variables';
+@forward 'lib/patterns/review-summary/variables';

package/types/components.ts

@@ -132,6 +132,7 @@ export interface CardSelectableProps {
 	selectedIndex?: number;
 	clickableArea?: 'input' | 'card';
 	includeImage?: boolean;
+	includeTag?: boolean;
 }
 
 // ─── Datepicker ────────────────────────────────────────
@@ -389,6 +390,13 @@ 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;
@@ -403,6 +411,7 @@ export interface ListProps {
 	altShape?: boolean;
 	start?: number;
 	theme?: Theme;
+	extraClasses?: string[];
 }
 
 // ─── Loader ────────────────────────────────────────────
@@ -563,6 +572,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) ─
@@ -695,6 +705,7 @@ export interface TooltipProps {
 	label?: string;
 	content?: string;
 	isInverse?: boolean;
+	tooltipRoot?: string;
 	theme?: Theme;
 }
 
@@ -717,3 +728,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';
+}