@tui/design-system 1.1.1 → 1.3.0

package/scss/lib/forms/input-radio-scroll/_mixins.scss

@@ -0,0 +1,185 @@
+// radio scroll / _mixins
+@use '../../utility/mixins' as *;
+@use '../../cards/selectable/mixins' as *;
+@use '../form-row/mixins' as *;
+@use '../input-chip/mixins' as *;
+@use '../../icon/mixins' as *;
+@use '../../icon-button/mixins' as *;
+@use '../../link/mixins' as *;
+
+$uilib-input-radio-scroll-included: false !default;
+
+// Builds radio scroll
+@mixin uilib-input-radio-scroll() {
+	@if not $uilib-input-radio-scroll-included {
+		$uilib-input-radio-scroll-included: true !global;
+
+		@include uilib-form-row;
+		@include uilib-input-chip;
+		@include uilib-card-selectable;
+		@include uilib-icon;
+		@include uilib-icon-button;
+		@include uilib-link;
+		@include uilib-input-radio-scroll-master;
+	}
+}
+
+@mixin uilib-input-radio-scroll-master() {
+	@property --uilib-input-radio-scroll-start-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@property --uilib-input-radio-scroll-end-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@keyframes uilib-input-radio-scroll-scrollfade {
+		0% {
+			--uilib-input-radio-scroll-start-fade: 0;
+		}
+
+		10%,
+		100% {
+			--uilib-input-radio-scroll-start-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		0%,
+		90% {
+			--uilib-input-radio-scroll-end-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		100% {
+			--uilib-input-radio-scroll-end-fade: 0;
+		}
+	}
+
+	.uilib-input-radio-scroll {
+		$uilib-input-radio-scroll-mask-horizontal: linear-gradient(
+			to right,
+			#0000,
+			#fff var(--uilib-input-radio-scroll-start-fade) calc(100% - var(--uilib-input-radio-scroll-end-fade)),
+			#0000
+		);
+
+		.uilib-form-row__label {
+			font: var(--uilib-typography-heading-xlarge);
+		}
+
+		.uilib-form-row__hint {
+			margin-top: var(--uilib-spacing-200);
+		}
+
+		.uilib-form-row__input {
+			display: grid;
+			grid-template-columns: 1fr fit-content;
+			gap: var(--uilib-spacing-400);
+
+			margin: var(--uilib-spacing-400) 0;
+
+			&:has(.uilib-input-chip-list:focus-visible),
+			&:has(.uilib-card-selectable-list:focus-visible) {
+				@include uilib-focus();
+
+				/* stylelint-disable-next-line order/order */
+				border-radius: var(--uilib-border-radius-200);
+			}
+		}
+
+		.uilib-input-chip-list,
+		.uilib-card-selectable-list {
+			grid-column: 1 / span 2;
+
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-200);
+			align-items: stretch;
+
+			min-width: 0;
+			margin: calc(var(--uilib-spacing-200) * -1);
+			padding: var(--uilib-spacing-200) 0;
+
+			overflow-x: auto;
+
+			animation: uilib-input-radio-scroll-scrollfade;
+			scroll-behavior: smooth;
+
+			-webkit-mask: #{$uilib-input-radio-scroll-mask-horizontal};
+			mask: #{$uilib-input-radio-scroll-mask-horizontal};
+			animation-timeline: --uilib-input-radio-scroll-scrollfade;
+			scroll-timeline: --uilib-input-radio-scroll-scrollfade x;
+
+			&::before,
+			&::after {
+				content: '';
+
+				display: block;
+			}
+
+			&:focus-visible::before {
+				position: static;
+
+				box-shadow: none;
+			}
+		}
+
+		.uilib-input-chip,
+		.uilib-card-selectable-list__item {
+			flex: 0 0 var(--card-width, var(--card-default-width, 18rem));
+		}
+
+		.uilib-input-chip__label {
+			width: 100%;
+		}
+
+		&__link {
+			grid-row: 2;
+			grid-column: 1;
+
+			place-self: flex-start flex-start;
+		}
+
+		&__button-container {
+			grid-row: 2;
+			grid-column: 2;
+
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-400);
+			justify-self: end;
+			align-items: flex-start;
+		}
+
+		&__button-previous .uilib-icon {
+			mask-image: var(--uilib-input-radio-scroll-previous-icon);
+		}
+
+		&__button-next .uilib-icon {
+			mask-image: var(--uilib-input-radio-scroll-next-icon);
+		}
+
+		&:not(:has(&__button-container)) {
+			.uilib-input-chip-list,
+			.uilib-card-selectable-list {
+				-webkit-mask: none;
+				mask: none;
+			}
+		}
+
+		&__accessible-instructions {
+			@include uilib-visually-hidden;
+		}
+
+		&[is-hydrated] {
+			.uilib-input-chip-list,
+			.uilib-card-selectable-list {
+				scrollbar-width: none;
+			}
+		}
+	}
+}

package/scss/lib/forms/input-radio-scroll/_variables.scss

@@ -0,0 +1,7 @@
+@use '../../../variables/env-variables' as *;
+
+// Input radio scroll specific variables to allow theming
+$uilib-input-radio-scroll-variables: (
+	previous-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-left.svg'),
+	next-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+) !default;

package/scss/lib/grid/_mixins.scss

@@ -33,7 +33,7 @@
 @mixin uilib-container-breakpoint($size, $container-name: null, $logic: null) {
 	/* stylelint-disable container-name-pattern */
 	$breakpoint: map.get($uilib-breakpoints, $size);
-	$has-logic: $logic != null and $logic != false and #{$logic} != '';
+	$has-logic: $logic != null and $logic != false and $logic != '';
 
 	// Expect `$logic` like "(max-width: 47.5rem)" or "(max-width: 47.5rem) and (prefers-reduced-motion: no-preference)"
 	$logic-suffix: '';

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

@@ -1,6 +1,5 @@
 @use '../../utility/mixins' as *;
 @use './variables' as *;
-@use '../../icon/mixins' as *;
 
 $uilib-ratings-range-bar-included: false !default;
 
@@ -9,7 +8,6 @@ $uilib-ratings-range-bar-included: false !default;
 	@if not $uilib-ratings-range-bar-included {
 		$uilib-ratings-range-bar-included: true !global;
 
-		@include uilib-icon;
 		@include uilib-ratings-range-bar-master;
 	}
 }
@@ -20,7 +18,10 @@ $uilib-ratings-range-bar-included: false !default;
 		--percentage: 0;
 
 		display: inline-flex;
-		flex-direction: column;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-100) var(--uilib-spacing-600);
+
+		max-width: 100%;
 
 		/* Visually hidden helper */
 		&--hidden {
@@ -28,13 +29,8 @@ $uilib-ratings-range-bar-included: false !default;
 		}
 
 		// /* Variant-specific configurations */
-		&--tripadvisor {
-			flex-direction: row;
-			gap: var(--uilib-spacing-600);
-		}
-
 		&--tripadvisor &__bar {
-			width: calc(var(--uilib-ratings-range-bar-tripadvisor-bar-width));
+			border-color: var(--uilib-ratings-range-bar-tripadvisor-bar-color);
 
 			background: var(--uilib-ratings-range-bar-tripadvisor-bar-bg-color);
 
@@ -43,17 +39,68 @@ $uilib-ratings-range-bar-included: false !default;
 			}
 		}
 
-		&--tripadvisor &__content {
-			gap: var(--uilib-spacing-200);
-		}
-
 		&-group {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uilib-spacing-300);
+			display: grid;
+			grid-template-columns: fit-content(45%) max-content minmax(0, var(--uilib-ratings-range-bar-bar-width));
+			gap: var(--uilib-spacing-200) var(--uilib-spacing-300);
+
+			max-width: 100%;
+			margin: var(--uilib-spacing-400) 0;
+
+			container-type: inline-size;
+			container-name: uilib-rating-range-bar-group;
+
+			@media (max-width: 16rem) {
+				grid-template-columns: 1fr;
+			}
+
+			&:has(.uilib-ratings-range-bar__bar + .uilib-ratings-range-bar__score) {
+				grid-template-columns: fit-content(45%) minmax(0, var(--uilib-ratings-range-bar-bar-width)) max-content;
+			}
+
+			.uilib-ratings-range-bar,
+			.uilib-ratings-range-bar__content {
+				display: contents;
+			}
+
+			.uilib-ratings-range-bar__bar {
+				width: auto;
+				max-width: unset;
+			}
 
-			&:has(.uilib-ratings-range-bar--tripadvisor) {
-				gap: var(--uilib-spacing-100);
+			.uilib-ratings-range-bar__label {
+				padding-right: var(--uilib-spacing-300);
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-rating-range-bar-group (max-width: 16rem) {
+				.uilib-ratings-range-bar {
+					grid-column: 1 / -1;
+
+					display: block;
+				}
+
+				.uilib-ratings-range-bar__label {
+					padding-right: 0;
+				}
+
+				.uilib-ratings-range-bar__content {
+					display: flex;
+					justify-content: flex-start;
+				}
+
+				.uilib-ratings-range-bar__bar {
+					order: 0;
+
+					flex-grow: 1;
+
+					width: auto;
+					max-width: calc(100% - (var(--uilib-spacing-300) + 4ex));
+				}
+
+				.uilib-ratings-range-bar__score {
+					order: 1;
+				}
 			}
 		}
 
@@ -62,24 +109,36 @@ $uilib-ratings-range-bar-included: false !default;
 			gap: var(--uilib-spacing-200);
 			align-items: center;
 
-			font-size: 0.875rem;
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-small-strong);
+		}
+
+		&__score {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-small-strong);
+			text-align: right;
 		}
 
 		&__icon {
-			color: var(--uilib-ratings-range-bar-icon-color);
+			display: none;
 		}
 
 		&__content {
 			display: flex;
 			gap: var(--uilib-spacing-300);
+			justify-content: flex-end;
 			align-items: center;
+
+			min-width: 0;
 		}
 
 		&__bar {
 			width: var(--uilib-ratings-range-bar-bar-width);
-			height: 14px;
+			height: calc(1rem - var(--uilib-stroke-size-050));
+			margin-top: var(--uilib-spacing-050);
 
-			border-radius: var(--uilib-border-radius-100);
+			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);
 
 			background: var(--uilib-ratings-range-bar-bar-bg-color);
 

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

@@ -4,13 +4,13 @@
 
 // Range icons rating specific variables to allow theming
 $uilib-ratings-range-bar-variables: (
-	bar-width: 11.5rem,
-	// 184px / 16
+	bar-width: 11.25rem,
+	// 180 / 16
 	bar-color: var(--uilib-color-core-brand),
-	bar-bg-color: var(--uilib-color-core-surface),
-	tripadvisor-bar-width: 6.5625rem,
-	// 105px / 16
+	bar-bg-color: var(--uilib-color-core-neutral),
 	tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor),
-	tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft),
+	tripadvisor-bar-bg-color: var(--uilib-color-core-neutral),
+	// Below are deprecated
+	tripadvisor-bar-width: 6.5625rem,
 	icon-color: var(--uilib-color-status-info-icon),
 ) !default;

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

@@ -21,6 +21,7 @@ $uilib-ratings-range-icons-included: false !default;
 		@if $score-key <= 5 {
 			.uilib-ratings-range-icons--star,
 			.uilib-ratings-range-icons--sun,
+			.uilib-ratings-range-icons--customer,
 			.uilib-ratings-range-icons--tripadvisor {
 				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
 					&::after {
@@ -61,6 +62,8 @@ $uilib-ratings-range-icons-included: false !default;
 
 		display: inline-flex;
 		flex-wrap: wrap;
+		gap: 0 var(--uilib-spacing-200);
+		align-content: center;
 		align-items: center;
 
 		/* Visually hidden helper */
@@ -87,7 +90,17 @@ $uilib-ratings-range-icons-included: false !default;
 			--rating-max: 6;
 		}
 
+		&--customer {
+			--tile-color: var(--uilib-ratings-range-icons-customer-color);
+			--tile-inverse-color: var(--uilib-ratings-range-icons-customer-inverse-color);
+			--tile-bg-icon: var(--uilib-ratings-range-icons-customer-rating-icon);
+			--tile-bg-checked-icon: var(--uilib-ratings-range-icons-customer-rating-checked-icon);
+			--rating-max: 5;
+		}
+
 		&--tripadvisor {
+			--tile-color: var(--uilib-ratings-range-icons-tripadvisor-color);
+			--tile-inverse-color: var(--uilib-ratings-range-icons-tripadvisor-inverse-color);
 			--tile-bg-icon: var(--uilib-ratings-range-icons-tripadvisor-rating-icon);
 			--tile-bg-checked-icon: var(--uilib-ratings-range-icons-tripadvisor-rating-checked-icon);
 			--rating-max: 5;
@@ -116,10 +129,6 @@ $uilib-ratings-range-icons-included: false !default;
 				}
 			}
 
-			.uilib-ratings-range-icons__caption {
-				margin-left: var(--uilib-spacing-050);
-			}
-
 			/* Plus label */
 			.uilib-ratings-range-icons__plus {
 				position: relative;
@@ -128,7 +137,7 @@ $uilib-ratings-range-icons-included: false !default;
 				align-items: center;
 
 				inline-size: auto;
-				margin: 0 var(--uilib-spacing-050) 0 var(--uilib-spacing-100);
+				margin-left: calc((var(--uilib-spacing-100) + var(--uilib-spacing-050)) * -1);
 
 				color: var(--uilib-ratings-range-icons-tui-t-plus-color);
 				font-weight: var(--uilib-font-weight-bold);
@@ -136,24 +145,65 @@ $uilib-ratings-range-icons-included: false !default;
 
 				background: none;
 			}
+		}
+
+		&--inverse {
+			.uilib-ratings-range-icons__value,
+			.uilib-ratings-range-icons__plus,
+			.uilib-ratings-range-icons__label {
+				color: var(--uilib-color-text-inverse);
+			}
+
+			&.uilib-ratings-range-icons--tripadvisor .uilib-ratings-range-icons__leading-image {
+				background-image: var(--uilib-ratings-range-icons-tripadvisor-logo-inverse);
+			}
+		}
 
-			&.uilib-ratings-range-icons--inverse {
-				.uilib-ratings-range-icons__plus,
-				.uilib-ratings-range-icons__label {
-					color: var(--uilib-color-text-inverse);
+		&--customer,
+		&--tripadvisor {
+			.uilib-ratings-range-icons__score {
+				&::before,
+				&::after {
+					background-color: var(--tile-color);
+					background-image: none;
+					-webkit-mask: var(--tile-bg-icon) repeat-x left center;
+					mask: var(--tile-bg-icon) repeat-x left center;
+					-webkit-mask-size: var(--icon-size) 100%;
+					mask-size: var(--icon-size) 100%;
+				}
+
+				&::after {
+					background-image: none;
+					mask-image: var(--tile-bg-checked-icon);
 				}
 			}
 		}
 
+		&--customer#{&}--inverse,
+		&--tripadvisor#{&}--inverse {
+			.uilib-ratings-range-icons__score {
+				&::before,
+				&::after {
+					background-color: var(--tile-inverse-color);
+				}
+			}
+		}
+
+		&__value {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-small-strong);
+		}
+
 		&__details {
 			display: flex;
 			flex-wrap: wrap;
 			gap: var(--uilib-spacing-100);
 			align-items: baseline;
-		}
 
-		&__label {
-			margin-left: var(--uilib-spacing-050);
+			/* Remove the space from the flex gap if all text is details is hidden */
+			&:not(:has(> :not(.uilib-ratings-range-icons--hidden))) {
+				margin-left: calc(var(--uilib-spacing-200) * -1);
+			}
 		}
 
 		/* Score element styling */
@@ -202,7 +252,6 @@ $uilib-ratings-range-icons-included: false !default;
 
 			width: var(--uilib-icon-size-medium);
 			height: calc(var(--uilib-font-size-root) * var(--uilib-line-height-body));
-			margin-right: var(--uilib-spacing-100);
 
 			background-image: var(--uilib-ratings-range-icons-tripadvisor-logo);
 			background-repeat: no-repeat;

package/scss/lib/ratings-reviews/range-icons/_variables.scss

@@ -4,13 +4,20 @@
 
 // Range icons rating specific variables to allow theming
 $uilib-ratings-range-icons-variables: (
+	tripadvisor-color: var(--uilib-color-brand-tripadvisor),
+	tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse),
 	tripadvisor-logo: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-logo-small.svg'),
+	tripadvisor-logo-inverse: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-logo-small-white.svg'),
 	tripadvisor-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-unchecked.svg'),
 	tripadvisor-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-checked.svg'),
 	sun-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-unchecked.svg'),
 	sun-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-checked.svg'),
 	star-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-unchecked.svg'),
 	star-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-checked.svg'),
+	customer-color: var(--uilib-color-core-brand),
+	customer-inverse-color: var(--uilib-color-core-brand),
+	customer-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/customer-unchecked.svg'),
+	customer-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/customer-checked.svg'),
 	tui-t-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-t.svg'),
 	tui-t-plus-color: map.get($uilib-primitives, 'color-blue-100'),
 ) !default;

package/scss/lib/ratings-reviews/range-icons-group/_mixins.scss

@@ -17,11 +17,15 @@ $uilib-ratings-range-icons-group-included: false !default;
 	.uilib-ratings-range-icons-group {
 		display: flex;
 		flex-direction: column;
-		gap: var(--uilib-spacing-100);
+		gap: var(--uilib-spacing-200);
 
 		max-width: max-content;
+		margin: var(--uilib-spacing-400) 0;
 
 		&__category {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-small-strong);
+
 			@include uilib-text-truncate;
 		}
 
@@ -33,6 +37,8 @@ $uilib-ratings-range-icons-group-included: false !default;
 		}
 
 		.uilib-ratings-range-icons {
+			flex-wrap: nowrap;
+
 			margin: 0;
 		}
 	}

package/scss/lib/scroller/_mixins.scss

@@ -49,10 +49,10 @@ $uilib-scroller-included: false !default;
 	}
 
 	.uilib-scroller {
-		$mask-vertical:
+		$uilib-scroller-mask-vertical:
 			linear-gradient(to bottom, #0000, #ffff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
 			linear-gradient(to right, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
-		$mask-horizontal:
+		$uilib-scroller-mask-horizontal:
 			linear-gradient(to right, #0000, #fff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
 			linear-gradient(to bottom, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
 
@@ -83,9 +83,10 @@ $uilib-scroller-included: false !default;
 			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
 			overflow-y: auto;
 
+			-webkit-mask: #{$uilib-scroller-mask-vertical};
+			mask: #{$uilib-scroller-mask-vertical};
+
 			animation: uilib-scrollfade;
-			-webkit-mask: #{$mask-vertical};
-			mask: #{$mask-vertical};
 			animation-timeline: --uilib-scrollfade;
 			scroll-timeline: --uilib-scrollfade y;
 
@@ -131,8 +132,8 @@ $uilib-scroller-included: false !default;
 			overflow-x: auto;
 			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
 			overflow-y: hidden;
-			-webkit-mask: #{$mask-horizontal};
-			mask: #{$mask-horizontal};
+			-webkit-mask: #{$uilib-scroller-mask-horizontal};
+			mask: #{$uilib-scroller-mask-horizontal};
 
 			scroll-timeline: --uilib-scrollfade x;
 		}

package/scss/lib/tabs/_mixins.scss

@@ -48,7 +48,7 @@
 
 		&__scroll-wrapper,
 		& > &__tablist {
-			border-bottom: var(--uilib-stroke-size-025) solid var(--#{$prefix}-border-color);
+			border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--#{$prefix}-border-color);
 		}
 
 		&__scroll-button.uilib-icon-button {
@@ -116,7 +116,7 @@
 
 				width: 100%;
 
-				border-bottom: 0.1875rem solid var(--#{$prefix}-active-color);
+				border-bottom: var(--uilib-stroke-size-075) var(--uilib-stroke-style-solid) var(--#{$prefix}-active-color);
 			}
 
 			@include uilib-tab-base($prefix);

package/scss/lib/tabs/anchor/_mixins.scss

@@ -19,7 +19,7 @@ $uilib-tabs-anchor-included: false !default;
 @mixin uilib-tabs-anchor-nojs($prefix: 'uilib-tabs-anchor') {
 	display: flex;
 
-	border-bottom: var(--uilib-stroke-size-025) solid var(--#{$prefix}-border-color);
+	border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--#{$prefix}-border-color);
 
 	[slot='link'] {
 		display: inline-flex;

package/scss/lib/travel-aware-banner/_index.scss

@@ -0,0 +1,3 @@
+// travel aware banner / mixins
+@use 'mixins' as *;
+@include uilib-travel-aware-banner;

package/scss/lib/travel-aware-banner/_mixins.scss

@@ -0,0 +1,58 @@
+// Travel Aware Banner / _mixins
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+$uilib-travel-aware-banner-included: false !default;
+
+// Builds travel aware banner
+@mixin uilib-travel-aware-banner() {
+	@if not $uilib-travel-aware-banner-included {
+		$uilib-travel-aware-banner-included: true !global;
+
+		@include uilib-travel-aware-banner-master;
+	}
+}
+
+@mixin uilib-travel-aware-banner-master() {
+	.uilib-travel-aware-banner {
+		display: inline-flex;
+		gap: var(--uilib-spacing-400);
+		align-items: center;
+
+		width: 100%;
+		max-width: 100%;
+		padding: var(--uilib-spacing-400);
+
+		border-radius: var(--uilib-travel-aware-banner-radius);
+
+		background-color: var(--uilib-color-core-surface);
+
+		@include uilib-breakpoint(xs) {
+			width: auto;
+		}
+
+		&__heading {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-medium);
+		}
+
+		&__content {
+			display: flex;
+
+			// calculate from 230px in figma
+			flex: 1 1 14.375rem;
+			flex-direction: column;
+			gap: var(--uilib-spacing-100);
+		}
+
+		&__logo {
+			flex-grow: 0;
+			flex-shrink: 0;
+
+			height: auto;
+
+			// set logo W=65.776px from figma design
+			max-width: 4.111rem;
+		}
+	}
+}