@tui/design-system 1.10.0 → 1.11.0

package/scss/lib/cards/product/_mixins.scss

@@ -0,0 +1,351 @@
+// Product card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../card/mixins' as *;
+@use '../../icon/mixins' as *;
+@use '../../icon-button/mixins' as *;
+@use '../../image/mixins' as *;
+@use '../../info-tag/mixins' as *;
+@use '../../media-button/mixins' as *;
+@use '../../promo-tag/mixins' as *;
+
+$uilib-card-product-included: false !default;
+
+// Builds product card
+@mixin uilib-card-product() {
+	@if not $uilib-card-product-included {
+		$uilib-card-product-included: true !global;
+
+		@include uilib-card;
+		@include uilib-icon;
+		@include uilib-icon-button;
+		@include uilib-image;
+		@include uilib-info-tag;
+		@include uilib-info-tag-list;
+		@include uilib-media-button;
+		@include uilib-promo-tag;
+		@include uilib-promo-tag-list;
+		@include uilib-card-product-master;
+	}
+}
+
+@mixin uilib-card-product-master() {
+	.uilib-card-product {
+		// container for query
+		container-name: uilib-card-product;
+		container-type: inline-size;
+
+		position: relative;
+
+		border-radius: var(--uilib-card-radius);
+
+		background: var(--uilib-color-canvas-default);
+
+		box-shadow: var(--uilib-card-default-elevation);
+
+		&__image-content {
+			grid-area: uilib-card-product-image;
+
+			position: relative;
+
+			display: grid;
+			grid-template:
+				'uilib-card-product-tags' auto
+				'uilib-card-product-media' min-content;
+			gap: var(--uilib-spacing-200);
+
+			width: 100%;
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-product-radius-spacing));
+
+			aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
+
+			.uilib-card-product__product-label,
+			.uilib-card-product__brand {
+				grid-area: uilib-card-product-tags;
+
+				position: relative;
+				z-index: 1;
+
+				place-self: start start;
+			}
+
+			.uilib-card-product__brand {
+				width: 4rem; /* 64 / 16 */
+				height: calc(4rem + var(--uilib-spacing-100)); /* 64 / 16 */
+				margin-top: calc(var(--uilib-spacing-300) * -1);
+				margin-left: calc(var(--uilib-card-product-radius-spacing) - var(--uilib-spacing-200));
+				padding-top: var(--uilib-spacing-100);
+
+				border-radius: 0 0 var(--uilib-border-radius-100) var(--uilib-border-radius-100);
+
+				background: var(--uilib-card-product-flagship-color);
+
+				overflow: hidden;
+			}
+
+			.uilib-card-product__image {
+				position: absolute;
+				inset: 0 auto 0 50%;
+
+				min-width: 100%;
+
+				border-radius: var(--uilib-card-radius) var(--uilib-card-radius) 0 0;
+
+				transform: translateX(-50%);
+
+				overflow: hidden;
+			}
+		}
+
+		&__media-buttons {
+			grid-area: uilib-card-product-media;
+
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: flex-end;
+
+			li {
+				flex-grow: 1;
+			}
+		}
+
+		li.uilib-card-product__quick-view {
+			flex-grow: 0;
+		}
+
+		&__content-container {
+			grid-area: uilib-card-product-content;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-card-product-radius-spacing) * -1);
+
+			border-radius: var(--uilib-card-radius);
+
+			background: var(--uilib-card-default-bg-color);
+
+			box-shadow: var(--uilib-card-default-elevation);
+		}
+
+		&__main-content {
+			grid-area: uilib-card-product-content;
+
+			border-radius: var(--uilib-card-radius);
+
+			background: var(--uilib-card-default-bg-color);
+		}
+
+		&__supplementary-container {
+			grid-area: uilib-card-product-supplementary;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-spacing-200) * -1);
+			padding: var(--uilib-spacing-200);
+
+			border-radius: 0 0 var(--uilib-card-radius) var(--uilib-card-radius);
+
+			background: var(--uilib-card-contrast-bg-color);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-product (min-width: 35rem) {
+			&__inner {
+				display: grid;
+				grid-template:
+					'uilib-card-product-image uilib-card-product-content' 1fr
+					'uilib-card-product-supplementary uilib-card-product-content' minmax(0, min-content) / 45% 55%;
+				align-content: start;
+				align-items: stretch;
+			}
+
+			&__image-content {
+				min-height: auto;
+				padding: var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-product-radius-spacing)) var(--uilib-spacing-200)
+					var(--uilib-spacing-200);
+
+				transform: none;
+
+				.uilib-card-product__image {
+					min-height: 100%;
+
+					border-radius: var(--uilib-card-radius) 0 0 var(--uilib-card-radius);
+				}
+
+				&:has(~ .uilib-card-product__content-container .uilib-card-product__supplementary-container) .uilib-card-product__image {
+					border-bottom-left-radius: 0;
+				}
+			}
+
+			&__content-container {
+				display: contents;
+			}
+
+			&__main-content {
+				position: relative;
+				z-index: 1;
+
+				display: flex;
+				flex-flow: column;
+
+				margin-top: 0;
+				margin-left: calc(var(--uilib-card-product-radius-spacing) * -1);
+
+				box-shadow: var(--uilib-card-default-elevation);
+			}
+
+			&__supplementary-container {
+				position: static;
+				z-index: 0;
+
+				align-self: start;
+
+				margin-top: 0;
+				padding-right: calc(var(--uilib-spacing-200) + var(--uilib-card-product-radius-spacing));
+
+				border-radius: 0;
+				border-bottom-left-radius: var(--uilib-card-radius);
+			}
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&-flagship-wrapper {
+			container-name: uilib-card-product-wrapper;
+			container-type: inline-size;
+
+			margin: var(--uilib-spacing-400) 0;
+			padding-top: var(--uilib-spacing-300);
+
+			border-radius: var(--uilib-card-radius);
+
+			background: var(--uilib-card-product-flagship-color);
+
+			box-shadow: var(--uilib-card-default-elevation);
+
+			.uilib-card-product {
+				margin: 0;
+
+				box-shadow: none;
+			}
+		}
+
+		&-highlights {
+			position: relative;
+
+			display: block;
+
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-400);
+
+			color: var(--uilib-card-product-flagship-text-color);
+
+			&:defined {
+				padding-right: calc(var(--uilib-spacing-600) + 2.75rem); /* 8+4+44 / 16 */
+			}
+
+			&__list {
+				display: flex;
+				flex-flow: column;
+				gap: var(--uilib-spacing-200) var(--uilib-spacing-600);
+			}
+
+			&-item {
+				display: grid;
+				grid-template:
+					'icon title' 1fr
+					'icon description' auto
+					/ var(--uilib-icon-size-large) 1fr;
+				gap: 0 var(--uilib-spacing-200);
+				align-items: baseline;
+
+				&__icon {
+					grid-area: icon;
+				}
+
+				&__title {
+					grid-area: title;
+
+					align-self: center;
+
+					font: var(--uilib-typography-component-heading-small-strong);
+				}
+
+				&__description {
+					grid-area: description;
+
+					block-size: auto;
+
+					font: var(--uilib-typography-body-medium);
+
+					visibility: visible;
+
+					overflow: hidden;
+
+					@media (prefers-reduced-motion: no-preference) {
+						transition:
+							block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+							visibility 0s;
+					}
+
+					&[aria-hidden='true'] {
+						block-size: 0;
+
+						visibility: hidden;
+
+						@media (prefers-reduced-motion: no-preference) {
+							transition:
+								block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-in),
+								visibility 0s var(--uilib-motion-duration-medium);
+						}
+					}
+				}
+			}
+
+			&__button.uilib-icon-button {
+				position: absolute;
+				bottom: var(--uilib-spacing-200);
+				right: var(--uilib-spacing-200);
+
+				&:hover:not(:disabled, .uilib-icon-button--disabled) {
+					background: none;
+				}
+
+				&:focus-visible {
+					position: absolute;
+				}
+
+				&[aria-expanded='true'] .uilib-card-product-highlights__button-icon {
+					transform: rotate(180deg);
+				}
+			}
+
+			&__button-icon {
+				color: var(--uilib-card-product-flagship-text-color);
+				-webkit-mask-image: var(--uilib-card-product-highlights-icon);
+				mask-image: var(--uilib-card-product-highlights-icon);
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out);
+				}
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-card-product-wrapper (min-width: 35rem) {
+				&__list {
+					flex-flow: row nowrap;
+
+					padding-right: var(--uilib-spacing-400);
+				}
+
+				&__button.uilib-icon-button {
+					display: none;
+				}
+			}
+		}
+	}
+}

package/scss/lib/cards/product/_variables.scss

@@ -0,0 +1,9 @@
+@use '../../../variables/env-variables' as *;
+
+// Product card specific variables to allow theming
+$uilib-card-product-variables: (
+	radius-spacing: var(--uilib-card-radius),
+	flagship-color: var(--uilib-color-core-brand-strong),
+	flagship-text-color: var(--uilib-color-text-inverse),
+	highlights-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/cards/search/_mixins.scss

@@ -354,6 +354,7 @@ $uilib-card-search-included: false !default;
 			container-name: uilib-card-search-wrapper;
 			container-type: inline-size;
 
+			margin: var(--uilib-spacing-400) 0;
 			padding-top: var(--uilib-spacing-300);
 
 			border-radius: var(--uilib-card-radius);
@@ -363,6 +364,8 @@ $uilib-card-search-included: false !default;
 			box-shadow: var(--uilib-card-default-elevation);
 
 			.uilib-card-search {
+				margin: 0;
+
 				box-shadow: none;
 			}
 		}
@@ -414,16 +417,26 @@ $uilib-card-search-included: false !default;
 
 					font: var(--uilib-typography-body-medium);
 
+					visibility: visible;
+
 					overflow: hidden;
 
 					@media (prefers-reduced-motion: no-preference) {
 						transition:
-							block-size var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out),
-							content-visibility var(--uilib-motion-duration-fast) allow-discrete;
+							block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+							visibility 0s;
 					}
 
 					&[aria-hidden='true'] {
 						block-size: 0;
+
+						visibility: hidden;
+
+						@media (prefers-reduced-motion: no-preference) {
+							transition:
+								block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-in),
+								visibility 0s var(--uilib-motion-duration-medium);
+						}
 					}
 				}
 			}

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

@@ -30,7 +30,8 @@ $uilib-input-checkbox-included: false !default;
 			gap: var(--uilib-spacing-300);
 			align-items: flex-start;
 
-			width: min(max-content, 100%);
+			width: max-content;
+			max-width: 100%;
 			padding: var(--uilib-spacing-300);
 
 			border-radius: var(--uilib-border-radius-100);

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

@@ -30,7 +30,8 @@ $uilib-input-radio-included: false !default;
 			gap: var(--uilib-spacing-300);
 			align-items: flex-start;
 
-			width: min(max-content, 100%);
+			width: max-content;
+			max-width: 100%;
 			padding: var(--uilib-spacing-300);
 
 			border-radius: var(--uilib-border-radius-100);

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/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';