@tui/design-system 1.9.0 → 1.11.0

package/scss/lib/forms/input-select/_mixins.scss

@@ -22,12 +22,10 @@ $uilib-input-select-included: false !default;
 
 		display: flex;
 		flex-flow: row nowrap;
-		gap: var(--uilib-spacing-200);
 		align-items: center;
 
 		width: 100%;
 		height: 2.5rem;
-		padding: 0 var(--uilib-spacing-200);
 
 		color: var(--uilib-color-text-body);
 
@@ -39,6 +37,9 @@ $uilib-input-select-included: false !default;
 		cursor: pointer;
 
 		&::after {
+			position: absolute;
+			top: 50%;
+			right: var(--uilib-spacing-200);
 			content: '';
 
 			display: flex;
@@ -54,6 +55,8 @@ $uilib-input-select-included: false !default;
 			-webkit-mask-size: cover;
 			mask-size: cover;
 
+			transform: translateY(-50%);
+
 			pointer-events: none;
 		}
 
@@ -67,6 +70,9 @@ $uilib-input-select-included: false !default;
 
 		&__select {
 			width: 100%;
+			height: calc(2.5rem - var(--uilib-stroke-size-050));
+			padding: var(--uilib-spacing-200);
+			padding-right: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-400));
 
 			color: var(--uilib-color-text-body);
 			font: var(--uilib-typography-body-medium);
@@ -74,6 +80,7 @@ $uilib-input-select-included: false !default;
 			text-overflow: ellipsis;
 
 			border: 0;
+			border-radius: var(--uilib-border-radius-100);
 
 			background: none;
 
@@ -91,9 +98,21 @@ $uilib-input-select-included: false !default;
 		}
 
 		&__icon {
+			position: absolute;
+			top: 50%;
+			left: var(--uilib-spacing-200);
+
 			flex-shrink: 0;
 
 			background-color: var(--uilib-color-status-info-icon);
+
+			transform: translateY(-50%);
+
+			pointer-events: none;
+		}
+
+		&:has(&__icon) &__select {
+			padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-400));
 		}
 
 		&:has(select[disabled]),

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/highlight-panel/_mixins.scss

@@ -112,17 +112,31 @@ $uilib-highlight-panel-included: false !default;
 		&__collapsible::details-content {
 			block-size: 0;
 
+			visibility: hidden;
+
 			overflow: hidden;
 
+			content-visibility: visible;
+
 			@media (prefers-reduced-motion: no-preference) {
 				transition:
-					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
-					content-visibility var(--uilib-motion-duration-medium) allow-discrete;
+					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-in),
+					visibility 0s var(--uilib-motion-duration-medium);
 			}
 		}
 
 		&__collapsible[open]::details-content {
 			block-size: auto;
+
+			visibility: visible;
+
+			content-visibility: visible;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+					visibility 0s;
+			}
 		}
 
 		&__header-text {

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/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/show-more-less/_mixins.scss

@@ -40,25 +40,36 @@ $uilib-show-more-less-included: false !default;
 
 			&[is-hydrated] .uilib-show-more-less__content {
 				block-size: 0;
-				content-visibility: hidden;
-
 				margin-top: 0;
 
+				visibility: hidden;
+
 				overflow: hidden;
 
+				content-visibility: visible;
+
 				@media (prefers-reduced-motion: no-preference) {
 					transition:
 						block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
-						content-visibility var(--uilib-motion-duration-medium) allow-discrete,
+						visibility 0s var(--uilib-motion-duration-medium),
 						margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
 				}
 			}
 
 			&[is-open] .uilib-show-more-less__content {
 				block-size: auto;
+				margin-top: var(--uilib-spacing-400);
+
+				visibility: visible;
+
 				content-visibility: visible;
 
-				margin-top: var(--uilib-spacing-400);
+				@media (prefers-reduced-motion: no-preference) {
+					transition:
+						block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+						visibility 0s,
+						margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
 			}
 		}
 

package/scss/lib/skeleton/_mixins.scss

@@ -37,15 +37,16 @@ $uilib-skeleton-included: false !default;
 
 		background: linear-gradient(
 			90deg,
-			var(--uilib-skeleton-color) 0%,
-			var(--uilib-skeleton-shimmer-color) 4%,
-			var(--uilib-skeleton-color) 8%,
-			var(--uilib-skeleton-color) 32%,
-			var(--uilib-skeleton-shimmer-color) 36%,
-			var(--uilib-skeleton-color) 40%,
-			var(--uilib-skeleton-color) 62%,
-			var(--uilib-skeleton-shimmer-color) 66%,
-			var(--uilib-skeleton-color) 70%
+			var(--uilib-skeleton-shimmer-color) 0%,
+			var(--uilib-skeleton-shimmer-color) 1%,
+			var(--uilib-skeleton-color) 5%,
+			var(--uilib-skeleton-color) 45%,
+			var(--uilib-skeleton-shimmer-color) 49%,
+			var(--uilib-skeleton-shimmer-color) 51%,
+			var(--uilib-skeleton-color) 55%,
+			var(--uilib-skeleton-color) 95%,
+			var(--uilib-skeleton-shimmer-color) 99%,
+			var(--uilib-skeleton-shimmer-color) 100%
 		);
 		background-position-x: calc(var(--uilib-skeleton-position) * 100%);
 		background-size: 200% 100%;
@@ -73,12 +74,15 @@ $uilib-skeleton-included: false !default;
 		}
 
 		&--circle {
+			flex-grow: 0;
 			flex-shrink: 0;
 
-			width: var(--uilib-spacing-500);
+			width: auto;
 			height: var(--uilib-spacing-500);
 
-			border-radius: 50%;
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			border-radius: var(--uilib-border-radius-circle);
 		}
 
 		&--card {
@@ -89,6 +93,23 @@ $uilib-skeleton-included: false !default;
 			}
 		}
 
+		&--product-card {
+			display: grid;
+
+			&::before {
+				content: '';
+
+				display: block;
+
+				aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container (min-width: 35rem) {
+				grid-template-columns: 45% 55%;
+			}
+		}
+
 		&--container {
 			padding: var(--uilib-spacing-400);
 		}
@@ -116,7 +137,7 @@ $uilib-skeleton-included: false !default;
 		}
 
 		@media (prefers-reduced-motion: no-preference) {
-			animation: shimmer 4s linear infinite;
+			animation: shimmer 3.5s linear infinite;
 		}
 
 		// Width utilities

package/scss/lib/timeline/_index.scss

@@ -0,0 +1,2 @@
+@use 'mixins' as *;
+@include uilib-timeline;

package/scss/lib/timeline/_mixins.scss

@@ -0,0 +1,87 @@
+@use '../icon/mixins' as *;
+
+$uilib-timeline-included: false !default;
+
+@mixin uilib-timeline() {
+	@if not $uilib-timeline-included {
+		$uilib-timeline-included: true !global;
+
+		@include uilib-icon;
+		@include uilib-timeline-master;
+	}
+}
+
+@mixin uilib-timeline-master() {
+	.uilib-timeline {
+		display: flex;
+		flex-direction: column;
+
+		margin: 0;
+		padding: 0;
+
+		list-style: none;
+
+		&--gap {
+			gap: var(--uilib-spacing-400);
+
+			.uilib-timeline__marker::after {
+				bottom: calc(var(--uilib-spacing-700) * -1);
+			}
+		}
+
+		&--gap &__item--gap:not(:last-child) {
+			margin-bottom: 0;
+		}
+
+		&__item {
+			display: grid;
+			grid-template-columns: var(--uilib-spacing-500) 1fr;
+			gap: var(--uilib-spacing-200);
+
+			&--gap:not(:last-child) {
+				margin-bottom: var(--uilib-spacing-400);
+
+				.uilib-timeline__marker::after {
+					bottom: calc(var(--uilib-spacing-700) * -1);
+				}
+			}
+
+			&:not(:last-child) .uilib-timeline__marker::after {
+				content: '';
+			}
+		}
+
+		&__marker {
+			position: relative;
+
+			display: flex;
+			justify-content: center;
+			align-items: flex-start;
+
+			&::after {
+				position: absolute;
+				top: calc(var(--uilib-spacing-400) + var(--uilib-icon-size-small));
+				left: 50%;
+				bottom: calc(var(--uilib-spacing-300) * -1);
+				content: none;
+
+				border-left: var(--uilib-stroke-size-050) var(--uilib-stroke-style-dashed) var(--uilib-color-border-dashed);
+
+				transform: translateX(-50%);
+			}
+		}
+
+		&__icon {
+			margin-top: calc(var(--uilib-spacing-300) + var(--uilib-spacing-050)); /* 12 + 2 */
+
+			background: var(--uilib-color-status-info-icon);
+		}
+
+		&__content {
+			align-content: flex-end;
+
+			min-width: 0;
+			min-height: calc(var(--uilib-spacing-400) + var(--uilib-icon-size-small));
+		}
+	}
+}

package/scss/mixins.scss

@@ -4,11 +4,14 @@
 @forward 'lib/breadcrumb/mixins';
 @forward 'lib/alert/mixins';
 @forward 'lib/button/mixins';
-@forward 'lib/cards/card/mixins';
 @forward 'lib/cards/article/mixins';
+@forward 'lib/cards/card/mixins';
 @forward 'lib/cards/carousel/mixins';
 @forward 'lib/cards/icon/mixins';
+@forward 'lib/cards/promotion/mixins';
 @forward 'lib/cards/search/mixins';
+@forward 'lib/cards/product/mixins';
+@forward 'lib/cards/promotion/mixins';
 @forward 'lib/cards/selectable/mixins';
 @forward 'lib/divider/mixins';
 @forward 'lib/flight-details/mixins';
@@ -38,7 +41,6 @@
 @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';
@@ -53,6 +55,7 @@
 @forward 'lib/social-proofing/mixins';
 @forward 'lib/tabs/in-page/mixins';
 @forward 'lib/tabs/anchor/mixins';
+@forward 'lib/timeline/mixins';
 @forward 'lib/tooltip/mixins';
 @forward 'lib/travel-aware-banner/mixins';
 @forward 'lib/typography/mixins';
@@ -60,5 +63,6 @@
 
 // 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/reset.scss

@@ -124,10 +124,14 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
+	border-radius: inherit;
+
 	background-color: transparent;
 
 	-webkit-box-shadow: none;
 	-webkit-text-fill-color: var(--uilib-color-text-body);
+
+	transition: background-color 9999s ease-in-out 0s !important;
 }
 
 /* Remove spinner arrows from number input */

package/scss/themes/crystalski/_overrides.scss

@@ -126,6 +126,23 @@ $uilib-crystalski-card-icon-variables: map.merge(
 	)
 );
 
+// Card - product
+$uilib-crystalski-card-product-variables: map.merge(
+	$uilib-card-product-variables,
+	(
+		highlights-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-down.svg'),
+	)
+);
+
+// Card - promotion
+$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'),
+	)
+);
+
 // Card - selectable
 $uilib-crystalski-card-selectable-variables: map.merge(
 	$uilib-card-selectable-variables,
@@ -317,15 +334,6 @@ $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,
@@ -361,6 +369,14 @@ $uilib-crystalski-show-more-less-variables: map.merge(
 	)
 );
 
+// Social proofing
+$uilib-crystalski-social-proofing-variables: map.merge(
+	$uilib-social-proofing-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/cross.svg'),
+	)
+);
+
 // Tabs - in-page
 $uilib-crystalski-tabs-in-page-variables: map.merge(
 	$uilib-tabs-in-page-variables,
@@ -378,20 +394,3 @@ $uilib-crystalski-tabs-anchor-variables: map.merge(
 		scroll-right-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
 	)
 );
-
-// Skeleton
-$uilib-crystalski-skeleton-variables: map.merge(
-	$uilib-skeleton-variables,
-	(
-		color: map.get($uilib-color-semantic-crystalski, 'other-skeleton-loading'),
-		shimmer-color: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
-	)
-);
-
-// Social proofing
-$uilib-crystalski-social-proofing-variables: map.merge(
-	$uilib-social-proofing-variables,
-	(
-		close-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/cross.svg'),
-	)
-);