@tui/design-system 1.0.0 → 1.1.1

package/scss/lib/cards/selectable/_variables.scss

@@ -6,8 +6,6 @@ $uilib-card-selectable-variables: (
 	default-border-color: var(--uilib-color-border-card),
 	dashed-border-color: var(--uilib-color-border-dashed),
 	selected-border-color: var(--uilib-color-border-interaction),
-	disabled-text-color: var(--uilib-color-other-disabled-soft),
-	disabled-bg-color: var(--uilib-color-core-neutral),
 	selected-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-filled.svg'),
 	selected-icon-shape: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-solid.svg'),
 ) !default;

package/scss/lib/flyout-dropdown/_mixins.scss

@@ -1,4 +1,9 @@
+@use 'sass:map';
+@use '../grid/mixins' as *;
+@use '../../variables/breakpoints' as *;
+@use '../button/mixins' as *;
 @use '../divider/mixins' as *;
+@use '../link/mixins' as *;
 @use '../icon/mixins' as *;
 @use '../icon-button/mixins' as *;
 @use '../scroller/mixins' as *;
@@ -9,7 +14,9 @@ $uilib-flyout-dropdown-included: false !default;
 	@if not $uilib-flyout-dropdown-included {
 		$uilib-flyout-dropdown-included: true !global;
 
+		@include uilib-button;
 		@include uilib-divider;
+		@include uilib-link;
 		@include uilib-icon;
 		@include uilib-icon-button;
 		@include uilib-scroller;
@@ -18,98 +25,160 @@ $uilib-flyout-dropdown-included: false !default;
 }
 
 @mixin uilib-flyout-dropdown-master() {
-	.uilib-flyout-dropdown {
-		@include uilib-flyout-dropdown-basic;
-	}
-
-	::before {
-		left: 50%;
-	}
+	@keyframes slide-up {
+		from {
+			transform: translateY(100%);
+		}
 
-	.uilib-flyout-dropdown--left {
-		&::before {
-			left: 2.8125rem; /* 45px/16 */
+		to {
+			transform: translateY(0);
 		}
 	}
 
-	.uilib-flyout-dropdown--right {
-		&::before {
-			left: calc(100% - 2.8125rem - var(--uilib-spacing-500)); /* 45px/16 */
-		}
+	tui-uilib-flyout-dropdown {
+		position: relative;
+
+		display: flex;
+
+		width: 100%;
 	}
 
-	.uilib-flyout-dropdown__content {
-		flex-grow: 1;
+	.uilib-flyout-dropdown {
+		--uilib-flyout-arrow-padding: 2.813rem;
+		--uilib-flyout-arrow-size: var(--uilib-spacing-600);
+		--uilib-flyout-min-width: 21.375rem;
+		position: fixed;
+		inset: auto 0 0;
+		z-index: var(--uilib-layer-modal);
+
+		display: flex;
+		flex-direction: column;
 
 		width: 100%;
+		max-width: 100%; // reset browser styles
+		max-height: calc(100vh - 2.75rem);
+		padding: var(--uilib-spacing-400);
+		box-sizing: border-box;
+
+		border-radius: var(--uilib-modal-radius) var(--uilib-modal-radius) 0 0;
+
+		background: var(--uilib-color-canvas-default);
 
 		overflow: hidden;
 
-		.uilib-flyout-dropdown__scroller-inner {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uilib-spacing-200);
+		&--modal {
+			position: static;
+			top: auto;
+			left: auto;
 
-			@supports (-webkit-appearance: none) {
-				/* Safari-specific styles */
-				max-height: calc(100dvh - 16rem);
+			max-width: 100%;
+			max-height: 100%;
+			margin-top: 0;
+
+			filter: none;
+
+			&::before {
+				content: none;
 			}
 		}
-	}
 
-	.uilib-flyout-dropdown__header,
-	.uilib-flyout-dropdown__footer {
-		display: flex;
-		flex-direction: row;
+		&--menu-flyout {
+			@include uilib-breakpoint(xs) {
+				.uilib-flyout-dropdown__header,
+				.uilib-divider {
+					display: none;
+				}
+			}
+		}
 
-		width: 100%;
-	}
+		@media (prefers-reduced-motion: no-preference) {
+			animation: slide-up var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+		}
 
-	.uilib-flyout-dropdown__header {
-		justify-content: space-between;
+		@include uilib-breakpoint(xs) {
+			animation: none;
 
-		.uilib-flyout-dropdown-close-button {
-			position: absolute;
-			top: var(--uilib-spacing-100);
-			right: var(--uilib-spacing-100);
+			@include uilib-flyout-dropdown-basic;
+		}
+
+		&:is(dialog):not([open]) {
+			// for dialog animation (only with html dialog)
+			display: none;
+		}
+
+		&::backdrop,
+		&__backdrop {
+			background: var(--uilib-modal-backdrop-color);
+		}
+
+		&__close-icon .uilib-icon {
+			-webkit-mask-image: var(--uilib-flyout-dropdown-close-icon);
+			mask-image: var(--uilib-flyout-dropdown-close-icon);
+		}
+
+		body:has(&[open]) {
+			overflow: hidden;
 
-			&:focus-visible {
-				position: absolute;
+			@include uilib-breakpoint(xs) {
+				overflow: auto;
 			}
 		}
-	}
 
-	.uilib-flyout-dropdown__heading {
-		max-width: calc(100% - 44px);
+		&__header,
+		&__footer,
+		&__footer-default {
+			display: flex;
+			flex-direction: row;
 
-		color: var(--uilib-color-text-strong);
-		font: var(--uilib-typography-component-heading-small);
-	}
+			width: 100%;
+		}
 
-	.uilib-divider {
-		width: 100%;
-	}
+		&__header {
+			flex-shrink: 0;
+			justify-content: space-between;
+			align-items: center;
+
+			.uilib-flyout-dropdown__close-icon {
+				flex-shrink: 0;
+			}
+		}
+
+		&__heading {
+			max-width: calc(100% - var(--uilib-icon-button-size-medium));
 
-	.uilib-flyout-dropdown__footer {
-		gap: var(--uilib-spacing-400);
-		justify-content: flex-end;
-		align-items: center;
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		&__footer-default {
+			gap: var(--uilib-spacing-400);
+			justify-content: flex-end;
+			align-items: center;
+		}
+
+		&__header-divider,
+		&__footer-divider {
+			width: 100%;
+		}
 	}
 }
 
 /* For internal use to support richText component */
 @mixin uilib-flyout-dropdown-basic() {
 	position: absolute;
+	inset: auto;
 	top: 0;
-	left: 0;
-	z-index: 2000;
+	left: var(--flyout-left, 0);
+	z-index: var(--uilib-layer-dropdown);
 
 	display: flex;
 	flex-direction: column;
 	gap: var(--uilib-spacing-200);
 	align-items: flex-start;
 
-	max-width: min(calc(100vw - var(--uilib-spacing-800)), 65.5rem); /* 1048px/16 */
+	width: auto;
+	min-width: var(--uilib-flyout-min-width);
+	max-width: min(var(--flyout-max-width, calc(100vw - var(--uilib-spacing-800))), 65.5rem);
 	max-height: calc(100dvh - var(--uilib-spacing-800));
 	margin-top: var(--uilib-spacing-400); /* 12px pointer/4px margin */
 	padding: var(--uilib-spacing-400);
@@ -126,17 +195,19 @@ $uilib-flyout-dropdown-included: false !default;
 
 	&::before {
 		position: absolute;
-		top: calc(var(--uilib-spacing-200) * -1);
-		left: 50%;
+		top: calc(var(--uilib-spacing-300) * -1);
+		left: var(--arrow-left, 50%);
 		content: '';
 
-		width: var(--uilib-spacing-500);
-		height: var(--uilib-spacing-500);
+		width: var(--uilib-flyout-arrow-size);
+		height: var(--uilib-flyout-arrow-size);
 
-		border-radius: var(--uilib-border-radius-100);
+		border-radius: var(--uilib-border-radius-none);
 
 		background-color: var(--uilib-color-core-neutral);
 
+		box-shadow: none;
+
 		transform: rotate(45deg);
 		transform-origin: center;
 	}

package/scss/lib/flyout-dropdown/_variables.scss

@@ -0,0 +1,7 @@
+@use '../../variables/env-variables' as *;
+@use 'sass:map';
+
+// flyout dropdown specific variables to allow themeing
+$uilib-flyout-dropdown-variables: (
+	close-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
+) !default;

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

@@ -153,6 +153,10 @@ $uilib-input-checkbox-included: false !default;
 			&::after {
 				cursor: default;
 			}
+
+			.uilib-input-checkbox__label-content {
+				color: var(--uilib-color-text-body);
+			}
 		}
 
 		&__input:disabled:checked + .uilib-input-checkbox__label::before {

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

@@ -11,6 +11,7 @@ $uilib-input-chip-included: false !default;
 
 		@include uilib-form-row;
 		@include uilib-input-chip-master;
+		@include uilib-input-chip-list-master;
 	}
 }
 
@@ -89,47 +90,36 @@ $uilib-input-chip-included: false !default;
 			min-height: var(--uilib-spacing-1000); /* 40px */
 		}
 
-		&.uilib-input-chip--month-calendar {
-			max-width: fit-content;
-		}
-
 		&.uilib-input-chip--month-calendar label {
 			min-height: calc(var(--uilib-spacing-1200) + var(--uilib-spacing-050)); /* 50px */
 		}
 	}
 }
 
-@mixin uilib-input-chip-list() {
-	[data-testid='list-choice']:has(.uilib-input-chip-list),
-	.uilib-form-row__input:has(.uilib-input-chip-list) {
-		.uilib-input-chip-list {
-			display: flex;
-			flex-flow: row wrap;
-			gap: var(--uilib-spacing-200);
+@mixin uilib-input-chip-list-master() {
+	.uilib-input-chip-list {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200);
 
-			margin: 0;
-			padding: 0;
-		}
+		margin: 0;
+		padding: 0;
 	}
 
 	// Month calendar grid
+	.uilib-input-chip-list:has(.uilib-input-chip--month-calendar) {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: var(--uilib-spacing-200);
 
-	[data-testid='list-month-calendar']:has(.uilib-input-chip-list),
-	.uilib-form-row__input:has(.uilib-input-chip-list-month-calendar) {
-		.uilib-input-chip-list-month-calendar {
-			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			gap: var(--uilib-spacing-200);
+		max-width: calc(7.5rem * 3 + var(--uilib-spacing-200) * 2);
 
-			max-width: calc(7.5rem * 3 + var(--uilib-spacing-200) * 2);
+		.uilib-input-chip--month-calendar {
+			width: 100%;
+			max-width: 7.5rem; /* 120px */
 
-			.uilib-input-chip--month-calendar {
+			label {
 				width: 100%;
-				max-width: 7.5rem; /* 120px */
-
-				label {
-					width: 100%;
-				}
 			}
 		}
 	}

package/scss/lib/forms/input-chip/_variables.scss

@@ -14,6 +14,5 @@ $uilib-input-chip-variables: (
 	active-border-color: var(--uilib-color-core-interaction),
 	active-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
 	box-shadow: var(--uilib-elevation-200),
-	disabled-text-color: var(--uilib-color-other-disabled-soft),
 	disabled-bg-color: var(--uilib-color-core-neutral),
 ) !default;

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

@@ -128,6 +128,10 @@ $uilib-input-radio-included: false !default;
 			&::after {
 				cursor: default;
 			}
+
+			.uilib-input-radio__label-content {
+				color: var(--uilib-color-text-body);
+			}
 		}
 
 		&__input:disabled:checked + .uilib-input-radio__label {

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

@@ -89,7 +89,7 @@ $uilib-input-switch-included: false !default;
 				background-color: var(--uilib-input-switch-track-color-disabled);
 
 				&::before {
-					background-color: var(--uilib-input-switch-thumb-selected-color);
+					box-shadow: none;
 				}
 			}
 		}

package/scss/lib/grid/_mixins.scss

@@ -36,9 +36,11 @@
 	$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: if(
-		sass($has-logic): ' and #{$logic}' ; else: '',
-	);
+	$logic-suffix: '';
+
+	@if $has-logic {
+		$logic-suffix: ' and #{$logic}';
+	}
 
 	@if not $breakpoint {
 		@error "Breakpoint `#{$size}` not found in $uilib-breakpoints.";

package/scss/lib/media-button/_mixins.scss

@@ -57,6 +57,13 @@ $uilib-media-button-list-included: false !default;
 		&:hover:not(:disabled, .uilib-button--disabled) {
 			background: var(--uilib-button-secondary-hover-bg-color);
 		}
+
+		&:disabled,
+		&.uilib-button--disabled {
+			color: var(--uilib-button-disabled-color);
+
+			background: var(--uilib-button-disabled-bg-color);
+		}
 	}
 }
 

package/scss/lib/modal/_mixins.scss

@@ -59,7 +59,9 @@ $uilib-modal-included: false !default;
 		border: none;
 		border-radius: var(--uilib-modal-radius) var(--uilib-modal-radius) 0 0;
 
-		animation: slide-up var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+		@media (prefers-reduced-motion: no-preference) {
+			animation: slide-up var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+		}
 
 		@include uilib-breakpoint(xs, $min-height-query) {
 			inset: 6.25rem var(--uilib-spacing-400); // 100px 16px
@@ -85,17 +87,6 @@ $uilib-modal-included: false !default;
 			}
 		}
 
-		// scroller is block by default, need to make it work with flex
-		.uilib-scroller {
-			display: flex;
-
-			&__inner {
-				flex: 1;
-
-				height: auto;
-			}
-		}
-
 		&:is(dialog):not([open]) {
 			// for dialog animation (only with html dialog)
 			display: none;
@@ -112,7 +103,11 @@ $uilib-modal-included: false !default;
 			justify-content: space-between;
 			align-items: center;
 
-			h3 {
+			h3,
+			h2 {
+				max-width: calc(100% - var(--uilib-icon-button-size-medium));
+
+				color: var(--uilib-color-text-strong);
 				font: var(--uilib-typography-component-heading-small);
 			}
 		}

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

@@ -10,7 +10,7 @@ $uilib-ratings-range-bar-variables: (
 	bar-bg-color: var(--uilib-color-core-surface),
 	tripadvisor-bar-width: 6.5625rem,
 	// 105px / 16
-	tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor),
+	tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor),
 	tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft),
 	icon-color: var(--uilib-color-status-info-icon),
 ) !default;

package/scss/lib/scroller/_mixins.scss

@@ -58,7 +58,7 @@ $uilib-scroller-included: false !default;
 
 		position: relative;
 
-		display: block;
+		display: flex;
 
 		overflow: hidden;
 
@@ -73,16 +73,19 @@ $uilib-scroller-included: false !default;
 		}
 
 		&__inner {
+			flex: 1;
+
 			width: 100%;
-			height: 100%;
+			height: auto;
+			padding-bottom: 0.0625rem; /* 1px padding to prevent miscalculations for content scroll */
 
 			overflow-x: hidden;
 			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
 			overflow-y: auto;
-			-webkit-mask: #{$mask-vertical};
-			mask: #{$mask-vertical};
 
 			animation: uilib-scrollfade;
+			-webkit-mask: #{$mask-vertical};
+			mask: #{$mask-vertical};
 			animation-timeline: --uilib-scrollfade;
 			scroll-timeline: --uilib-scrollfade y;
 
@@ -123,6 +126,8 @@ $uilib-scroller-included: false !default;
 
 		/* stylelint-disable-next-line order/order */
 		&--horizontal &__inner {
+			padding-bottom: 0;
+
 			overflow-x: auto;
 			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
 			overflow-y: hidden;

package/scss/themes/crystalski/_overrides.scss

@@ -142,6 +142,14 @@ $uilib-crystalski-flight-details-variables: map.merge(
 	)
 );
 
+// Flyout Dropdown
+$uilib-crystalski-flyout-dropdown-variables: map.merge(
+	$uilib-flyout-dropdown-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/cross.svg'),
+	)
+);
+
 // Form datepicker
 $uilib-crystalski-datepicker-variables: map.merge(
 	$uilib-datepicker-variables,

package/scss/themes/crystalski/index.scss

@@ -89,6 +89,9 @@
 	// Flight details
 	@include util.uilib-build-css-vars('flight-details', $uilib-crystalski-flight-details-variables);
 
+	// Flyout dropdown
+	@include util.uilib-build-css-vars('flyout-dropdown', $uilib-crystalski-flyout-dropdown-variables);
+
 	// Form date picker
 	@include util.uilib-build-css-vars('datepicker', $uilib-crystalski-datepicker-variables);
 

package/scss/themes/firstchoice/_overrides.scss

@@ -213,6 +213,14 @@ $uilib-firstchoice-flight-details-variables: map.merge(
 	)
 );
 
+// Flyout Dropdown
+$uilib-firstchoice-flyout-dropdown-variables: map.merge(
+	$uilib-flyout-dropdown-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/cross.svg'),
+	)
+);
+
 // Form datepicker
 $uilib-firstchoice-datepicker-variables: map.merge(
 	$uilib-datepicker-variables,

package/scss/themes/firstchoice/index.scss

@@ -89,6 +89,9 @@
 	// Flight details
 	@include util.uilib-build-css-vars('flight-details', $uilib-firstchoice-flight-details-variables);
 
+	// Flyout dropdown
+	@include util.uilib-build-css-vars('flyout-dropdown', $uilib-firstchoice-flyout-dropdown-variables);
+
 	// Form date picker
 	@include util.uilib-build-css-vars('datepicker', $uilib-firstchoice-datepicker-variables);
 

package/scss/themes/tui/_colors.scss

@@ -10,6 +10,9 @@ $uilib-color-semantic-tui: map.merge(
 		core-brand-strong: map.get($uilib-tui-primitives, 'color-blue-100'),
 		border-dashed: map.get($uilib-tui-primitives, 'color-neutral-50'),
 		promotion-free-kids: map.get($uilib-tui-primitives, 'color-coolblue-70'),
+		promotion-smiles-level-1: map.get($uilib-tui-primitives, 'color-sea-blue-20'),
+		promotion-smiles-level-2: map.get($uilib-tui-primitives, 'color-sea-blue-50'),
+		promotion-smiles-level-3: map.get($uilib-tui-primitives, 'color-sea-blue-100'),
 		other-gradient-linear-soft: linear-gradient(
 				180deg,
 				map.get($uilib-tui-primitives, 'color-coolblue-20') 0.33%,
@@ -53,8 +56,6 @@ $uilib-color-semantic-tui: map.merge(
 		brand-time-to-smile: map.get($uilib-tui-primitives, 'color-brand-time-to-smile-gold'),
 		brand-holiday-villages: map.get($uilib-tui-primitives, 'color-brand-holiday-villages-purple'),
 		brand-kids-club: map.get($uilib-tui-primitives, 'color-brand-kids-club-blue'),
-		brand-trip-advisor: map.get($uilib-tui-primitives, 'color-brand-trip-advisor-green'),
-		brand-paypal: map.get($uilib-tui-primitives, 'color-brand-paypal-blue'),
 		brand-local: map.get($uilib-tui-primitives, 'color-brand-local-biege'),
 		brand-musement: map.get($uilib-tui-primitives, 'color-brand-musement-yellow'),
 	)

package/scss/themes/tui/_primitives.scss

@@ -4,6 +4,9 @@
 $uilib-tui-primitives: map.merge(
 	$uilib-primitives,
 	(
+		color-sea-blue-20: #dbf7fb,
+		color-sea-blue-50: #a5ebf4,
+		color-sea-blue-100: #4bd7e9,
 		color-brand-tui-midnight-blue: #0b092d,
 		color-brand-tui-blue-blue: #1b115c,
 		color-brand-magiclife-yellow: #fff700,

package/scss/themes/tui/index.scss

@@ -89,6 +89,9 @@
 	// Flight details
 	@include util.uilib-build-css-vars('flight-details', $uilib-flight-details-variables);
 
+	// Flyout dropdown
+	@include util.uilib-build-css-vars('flyout-dropdown', $uilib-flyout-dropdown-variables);
+
 	// Form date picker
 	@include util.uilib-build-css-vars('datepicker', $uilib-datepicker-variables);
 

package/scss/themes/tui/theme.json

@@ -15,6 +15,18 @@
 					"primitive": "color-coolblue-70",
 					"title": "Promotion free kids",
 					"lowContrast": true
+				},
+				"color-promotion-smiles-level-1": {
+					"primitive": "color-sea-blue-20",
+					"title": "Promotion smiles level 1"
+				},
+				"color-promotion-smiles-level-2": {
+					"primitive": "color-sea-blue-50",
+					"title": "Promotion smiles level 2"
+				},
+				"color-promotion-smiles-level-3": {
+					"primitive": "color-sea-blue-100",
+					"title": "Promotion smiles level 3"
 				}
 			}
 		},

package/scss/variables/_colors.scss

@@ -45,9 +45,12 @@ $uilib-color-semantic: (
 	other-button-hover-state: color.scale(map.get($uilib-primitives, 'color-neutral-10'), $alpha: -80%),
 	other-secondary-button-hover-state: map.get($uilib-primitives, 'color-blue-10'),
 	other-skeleton-loading: map.get($uilib-primitives, 'color-neutral-40'),
-	brand-trip-advisor: map.get($uilib-primitives, 'color-brand-trip-advisor-green'),
+	brand-tripadvisor: map.get($uilib-primitives, 'color-brand-tripadvisor-green-60'),
+	brand-tripadvisor-pine-green: map.get($uilib-primitives, 'color-brand-tripadvisor-pine-green'),
+	brand-tripadvisor-inverse: map.get($uilib-primitives, 'color-brand-tripadvisor-trip-green'),
 	brand-paypal: map.get($uilib-primitives, 'color-brand-paypal-blue'),
 	other-scroll-handle: map.get($uilib-primitives, 'color-neutral-50'),
+	/* Deprecated */ brand-trip-advisor: map.get($uilib-primitives, 'color-brand-tripadvisor-green-60'),
 );
 
 // color palette

package/scss/variables/_primitives.scss

@@ -76,7 +76,9 @@ $uilib-primitives: (
 	color-purple-20: #ecd8fd,
 	color-purple-10: #f5ecfe,
 
-	color-brand-trip-advisor-green: #00aa6c,
+	color-brand-tripadvisor-trip-green: #00eb5b,
+	color-brand-tripadvisor-green-60: #00b747,
+	color-brand-tripadvisor-pine-green: #002b11,
 	color-brand-paypal-blue: #253b80,
 
 	// 11px