@tui/design-system 1.6.0 → 1.8.0

package/scss/lib/tabs/in-page/_mixins.scss

@@ -54,52 +54,105 @@ $uilib-tabs-in-page-included: false !default;
 		@include uilib-tabs-in-page-nojs-tab;
 	}
 
-	.#{$prefix} {
-		&--full-width {
-			& > .#{$prefix}__tablist {
-				margin: 0;
-				padding: 0;
+	// ─── Full-width variant ───
 
-				border-bottom: var(--uilib-stroke-size-025) solid var(--uilib-tabs-in-page-border-color);
-				-webkit-mask-image: none;
-				mask-image: none;
-			}
+	// V1: full-width uses flex
+	[version='1'].#{$prefix}--full-width {
+		.#{$prefix}__tablist {
+			flex-wrap: nowrap;
 
-			.#{$prefix}__tablist {
-				flex-wrap: nowrap;
+			margin: 0;
+			padding: 0;
 
-				overflow: visible;
-			}
+			border-bottom: var(--uilib-stroke-size-025) solid var(--uilib-tabs-in-page-border-color);
 
-			.#{$prefix}__tab {
-				flex: 1;
-				justify-content: center;
+			overflow: visible;
+			-webkit-mask-image: none;
+			mask-image: none;
+		}
+
+		.#{$prefix}__tab {
+			flex: 1;
+			justify-content: center;
+
+			max-width: unset;
+		}
+	}
+
+	// V2: full-width uses table
+	[version='2'].#{$prefix}--full-width {
+		.#{$prefix}__tablist {
+			display: table;
+
+			width: 100%;
+			margin: 0;
+			padding: 0;
 
-				max-width: unset;
-			}
+			border-bottom: var(--uilib-stroke-size-025) solid var(--uilib-tabs-in-page-border-color);
 
-			.#{$prefix}__tab-label {
-				-webkit-line-clamp: unset;
-				line-clamp: unset;
+			table-layout: fixed;
 
-				max-height: 2lh;
-			}
+			overflow: visible;
+			-webkit-mask-image: none;
+			mask-image: none;
 		}
 
-		&--vertical &__tablist {
+		.#{$prefix}__tab-outer {
+			display: table-cell;
+
+			vertical-align: bottom;
+		}
+
+		.#{$prefix}__tab {
+			width: 100%;
+			max-width: unset;
+		}
+	}
+
+	// Full-width shared (both versions)
+	.#{$prefix}--full-width .#{$prefix}__tab-label {
+		-webkit-line-clamp: unset;
+		line-clamp: unset;
+
+		max-height: 2lh;
+	}
+
+	// ─── Vertical variant ───
+
+	// V1: vertical uses flex-direction
+	[version='1'].#{$prefix}--vertical {
+		.#{$prefix}__tablist {
 			flex-direction: column;
 			align-items: stretch;
 		}
 
-		&--vertical &__tab {
+		.#{$prefix}__tab {
 			flex: none;
 		}
+	}
+
+	// V2: vertical uses block layout
+	[version='2'].#{$prefix}--vertical {
+		.#{$prefix}__tablist {
+			display: block;
+		}
+
+		.#{$prefix}__tab-outer {
+			display: block;
 
-		&--vertical &__tab-label {
-			-webkit-line-clamp: 2;
-			line-clamp: 2;
+			width: 100%;
+		}
 
-			max-height: unset;
+		.#{$prefix}__tab {
+			width: 100%;
 		}
 	}
+
+	// Vertical shared
+	.#{$prefix}--vertical .#{$prefix}__tab-label {
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+
+		max-height: unset;
+	}
 }

package/scss/lib/tooltip/_mixins.scss

@@ -80,6 +80,8 @@ $uilib-tooltip-included: false !default;
 
 			&--show {
 				opacity: 1;
+
+				pointer-events: auto;
 			}
 
 			@media (prefers-reduced-motion: no-preference) {

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';
@@ -36,6 +38,7 @@
 @forward 'lib/pagination/mixins';
 @forward 'lib/price/mixins';
 @forward 'lib/price-box/mixins';
+@forward 'lib/cards/promotion/mixins';
 @forward 'lib/promo-tag/mixins';
 @forward 'lib/ratings-reviews/customer-review/mixins';
 @forward 'lib/ratings-reviews/numerical/mixins';
@@ -54,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,
@@ -279,6 +296,7 @@ $uilib-crystalski-list-variables: map.merge(
 	$uilib-list-variables,
 	(
 		bullet-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/list-item.svg'),
+		multiline-title-font: var(--uilib-typography-label-medium-strong),
 	)
 );
 
@@ -299,6 +317,15 @@ $uilib-crystalski-pagination-variables: map.merge(
 	)
 );
 
+// Promo banner
+$uilib-crystalski-card-promotion-variables: map.merge(
+	$uilib-card-promotion-variables,
+	(
+		cta-copy-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/copy.svg'),
+		cta-copied-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/checkmark-circled-filled.svg'),
+	)
+);
+
 // Ratings and Reviews - Numerical
 $uilib-crystalski-ratings-numerical-variables: map.merge(
 	$uilib-ratings-numerical-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);
 
@@ -161,6 +167,9 @@
 	// Price
 	@include util.uilib-build-css-vars('price', $uilib-price-variables);
 
+	// Promo banner
+	@include util.uilib-build-css-vars('card-promotion', $uilib-crystalski-card-promotion-variables);
+
 	// Promo tag
 	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-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": {
@@ -227,6 +234,13 @@
 			}
 		}
 	},
+	"list": {
+		"tokens": {
+			"list-multiline-title-font": {
+				"primitive": "uilib-typography-label-medium-strong"
+			}
+		}
+	},
 	"ratings-numerical": {
 		"tokens": {
 			"ratings-numerical-brand-color": {

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,
@@ -354,6 +373,7 @@ $uilib-firstchoice-list-variables: map.merge(
 	$uilib-list-variables,
 	(
 		bullet-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/list-item.svg'),
+		multiline-title-font: var(--uilib-typography-label-medium-strong),
 	)
 );
 
@@ -382,6 +402,15 @@ $uilib-firstchoice-price-variables: map.merge(
 	)
 );
 
+// Promo banner
+$uilib-firstchoice-card-promotion-variables: map.merge(
+	$uilib-card-promotion-variables,
+	(
+		cta-copy-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/copy.svg'),
+		cta-copied-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/checkmark-circled-filled.svg'),
+	)
+);
+
 // Ratings and Reviews - Numerical
 $uilib-firstchoice-ratings-numerical-variables: map.merge(
 	$uilib-ratings-numerical-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);
 
@@ -161,6 +167,9 @@
 	// Price
 	@include util.uilib-build-css-vars('price', $uilib-firstchoice-price-variables);
 
+	// Promo banner
+	@include util.uilib-build-css-vars('card-promotion', $uilib-firstchoice-card-promotion-variables);
+
 	// Promo tag
 	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-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": {
@@ -312,6 +325,13 @@
 			}
 		}
 	},
+	"list": {
+		"tokens": {
+			"list-multiline-title-font": {
+				"primitive": "uilib-typography-label-medium-strong"
+			}
+		}
+	},
 	"pagination": {
 		"tokens": {
 			"pagination-icon-color": {

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);
 
@@ -161,6 +164,9 @@
 	// Price
 	@include util.uilib-build-css-vars('price', $uilib-price-variables);
 
+	// Promo banner
+	@include util.uilib-build-css-vars('card-promotion', $uilib-card-promotion-variables);
+
 	// Promo tag
 	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-variables);
 
@@ -188,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,