@tui/design-system 1.5.0 → 1.7.0

package/scss/lib/tabs/_mixins.scss

@@ -1,39 +1,44 @@
 // Shared tab styles used by in-page and tabs-anchor.
 // $prefix: the BEM block name, e.g. 'uilib-tabs-in-page' or 'uilib-tabs-anchor'
+
+@mixin uilib-tablist-base() {
+	--left-fade: 0rem;
+	--right-fade: 0rem;
+
+	$fade-mask: linear-gradient(to right, transparent 0, black var(--left-fade), black calc(100% - var(--right-fade)), transparent 100%);
+
+	scroll-padding-inline: var(--left-fade) var(--right-fade);
+
+	margin: calc(-1 * var(--uilib-spacing-200));
+	padding: var(--uilib-spacing-200);
+
+	overflow-x: auto;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+	-webkit-mask-image: #{$fade-mask};
+	mask-image: #{$fade-mask};
+	mask-origin: padding-box;
+	mask-clip: padding-box;
+}
+
 @mixin uilib-tab-base($prefix) {
 	position: relative;
 
-	display: flex;
-	flex-shrink: 0;
-	gap: var(--uilib-spacing-200);
-	align-items: center;
-
 	max-width: 12.5rem;
 	padding: var(--uilib-spacing-300) var(--uilib-spacing-500);
 
 	color: var(--#{$prefix}-text-color);
 	font-weight: var(--uilib-font-weight-semibold);
 	font-family: var(--uilib-font-family-lead);
+	white-space: normal;
 	text-decoration: none;
 
-	border-radius: var(--uilib-border-radius-200);
-
 	background: transparent;
 
 	cursor: pointer;
 }
 
 @mixin uilib-tabs-shared($prefix) {
-	.#{$prefix}__scroll-button--left .uilib-icon {
-		-webkit-mask-image: var(--#{$prefix}-scroll-left-icon);
-		mask-image: var(--#{$prefix}-scroll-left-icon);
-	}
-
-	.#{$prefix}__scroll-button--right .uilib-icon {
-		-webkit-mask-image: var(--#{$prefix}-scroll-right-icon);
-		mask-image: var(--#{$prefix}-scroll-right-icon);
-	}
-
 	.#{$prefix} {
 		// .uilib-icon-button selector is chained to raise specificity above uilib-icon-button's
 		// `display: inline-flex`, which appears later due to alphabetical @include sorting in storybook
@@ -42,6 +47,16 @@
 			display: none;
 		}
 
+		&__scroll-button--left .uilib-icon {
+			-webkit-mask-image: var(--#{$prefix}-scroll-left-icon);
+			mask-image: var(--#{$prefix}-scroll-left-icon);
+		}
+
+		&__scroll-button--right .uilib-icon {
+			-webkit-mask-image: var(--#{$prefix}-scroll-right-icon);
+			mask-image: var(--#{$prefix}-scroll-right-icon);
+		}
+
 		&__scroll-wrapper {
 			position: relative;
 		}
@@ -71,55 +86,19 @@
 			right: 0;
 		}
 
-		&__tablist {
-			--left-fade: 0;
-			--right-fade: 0;
-
-			$fade-mask: linear-gradient(to right, transparent 0, black var(--left-fade), black calc(100% - var(--right-fade)), transparent 100%);
-
-			scroll-padding-inline: var(--left-fade) var(--right-fade);
-
-			display: flex;
-			flex-direction: row;
-			align-items: end;
-
-			margin: calc(-1 * var(--uilib-spacing-200));
-			padding: var(--uilib-spacing-200);
-
-			overflow-x: auto;
-			scroll-behavior: smooth;
-			scrollbar-width: none;
-			-webkit-mask-image: #{$fade-mask};
-			mask-image: #{$fade-mask};
-			mask-origin: padding-box;
-			mask-clip: padding-box;
-		}
-
-		&__scroll-wrapper:has(&__scroll-button--left:not(.#{$prefix}--hidden)) &__tablist {
-			--left-fade: var(--#{$prefix}-scroll-fade-width);
-		}
-
-		&__scroll-wrapper:has(&__scroll-button--right:not(.#{$prefix}--hidden)) &__tablist {
-			--right-fade: var(--#{$prefix}-scroll-fade-width);
-		}
-
 		&__tab {
+			@include uilib-tab-base($prefix);
+
+			/* stylelint-disable-next-line order/order */
 			&--active {
 				color: var(--#{$prefix}-active-color);
-			}
-
-			&--active::after {
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				content: '';
-
-				width: 100%;
 
-				border-bottom: var(--uilib-stroke-size-075) var(--uilib-stroke-style-solid) var(--#{$prefix}-active-color);
+				box-shadow: inset 0 calc(var(--uilib-stroke-size-075) * -1) 0 0 var(--#{$prefix}-active-color);
 			}
 
-			@include uilib-tab-base($prefix);
+			&::before {
+				border-radius: var(--uilib-border-radius-100);
+			}
 
 			&:hover {
 				color: var(--#{$prefix}-active-color);
@@ -151,6 +130,84 @@
 					max-height: unset;
 				}
 			}
+
+			&-inner {
+				display: flex;
+				flex-flow: row nowrap;
+				gap: var(--uilib-spacing-200);
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+
+	// ─── V1: flex on tablist and tab ───
+	[version='1'].#{$prefix} {
+		.#{$prefix}__tablist {
+			@include uilib-tablist-base;
+
+			/* stylelint-disable-next-line order/order */
+			display: flex;
+			flex-direction: row;
+			align-items: end;
+		}
+
+		.#{$prefix}__tab {
+			display: inline-flex;
+			flex-shrink: 0;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+		}
+	}
+
+	// ─── V2: table layout on tablist, scrolling on wrapper ───
+	[version='2'].#{$prefix} {
+		.#{$prefix}__tablist-wrapper {
+			@include uilib-tablist-base;
+		}
+
+		.#{$prefix}__tablist {
+			display: table;
+
+			table-layout: fixed;
+		}
+
+		.#{$prefix}__tab-outer {
+			display: table-cell;
+
+			vertical-align: bottom;
+		}
+
+		.#{$prefix}__tab {
+			width: max-content;
+		}
+
+		.#{$prefix}__tab-inner {
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+		}
+	}
+
+	// ─── Scroll fade triggers ───
+	[version='1'].#{$prefix} {
+		&:has(.#{$prefix}__scroll-button--left:not(.#{$prefix}--hidden)) .#{$prefix}__tablist {
+			--left-fade: var(--#{$prefix}-scroll-fade-width);
+		}
+
+		&:has(.#{$prefix}__scroll-button--right:not(.#{$prefix}--hidden)) .#{$prefix}__tablist {
+			--right-fade: var(--#{$prefix}-scroll-fade-width);
+		}
+	}
+
+	[version='2'].#{$prefix} .#{$prefix}__scroll-wrapper {
+		&:has(.#{$prefix}__scroll-button--left:not(.#{$prefix}--hidden)) .#{$prefix}__tablist-wrapper {
+			--left-fade: var(--#{$prefix}-scroll-fade-width);
+		}
+
+		&:has(.#{$prefix}__scroll-button--right:not(.#{$prefix}--hidden)) .#{$prefix}__tablist-wrapper {
+			--right-fade: var(--#{$prefix}-scroll-fade-width);
 		}
 	}
 }

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

@@ -25,6 +25,15 @@ $uilib-tabs-anchor-included: false !default;
 		display: inline-flex;
 
 		@include uilib-tab-base($prefix);
+
+		/* stylelint-disable-next-line order/order */
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		.uilib-icon {
+			flex-shrink: 0;
+		}
 	}
 }
 
@@ -33,9 +42,24 @@ $uilib-tabs-anchor-included: false !default;
 
 	@include uilib-tabs-shared($prefix);
 
+	.#{$prefix}__tab {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		&-label {
+			text-align: center;
+		}
+	}
+
 	.#{$prefix}-wrapper {
 		display: flex;
 		flex-direction: column;
+
+		& > section:focus-visible::before {
+			border-radius: var(--uilib-border-radius-100);
+		}
 	}
 
 	// No-JS fallback
@@ -62,6 +86,18 @@ $uilib-tabs-anchor-included: false !default;
 				& .#{$prefix}__scroll-wrapper {
 					border-bottom: none;
 				}
+
+				.uilib-tabs-anchor__scroll-button {
+					top: calc(50% - var(--uilib-spacing-100));
+
+					&--left {
+						left: calc(-1 * var(--uilib-spacing-100));
+					}
+
+					&--right {
+						right: calc(-1 * var(--uilib-spacing-100));
+					}
+				}
 			}
 
 			@media (prefers-reduced-motion: no-preference) {

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

@@ -36,6 +36,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';

package/scss/themes/crystalski/_overrides.scss

@@ -279,6 +279,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 +300,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

@@ -161,6 +161,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

@@ -227,6 +227,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

@@ -354,6 +354,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 +383,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

@@ -161,6 +161,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

@@ -312,6 +312,13 @@
 			}
 		}
 	},
+	"list": {
+		"tokens": {
+			"list-multiline-title-font": {
+				"primitive": "uilib-typography-label-medium-strong"
+			}
+		}
+	},
 	"pagination": {
 		"tokens": {
 			"pagination-icon-color": {

package/scss/themes/tui/index.scss

@@ -161,6 +161,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);
 

package/scss/variables/base-theme.json

@@ -1071,12 +1071,6 @@
 				"title": "Default border colour",
 				"description": "Default border colour"
 			},
-			"card-selectable-dashed-border-color": {
-				"primitive": "uilib-color-border-dashed",
-				"displayType": "color",
-				"title": "Dashed border colour",
-				"description": "Dashed border colour"
-			},
 			"card-selectable-selected-border-color": {
 				"primitive": "uilib-color-border-interaction",
 				"displayType": "color",
@@ -1919,6 +1913,12 @@
 				"title": "List image radius (alt)",
 				"description": "List image radius (alt)",
 				"displayType": "radius"
+			},
+			"list-multiline-title-font": {
+				"primitive": "uilib-typography-label-medium",
+				"title": "List multiline title font",
+				"description": "List multiline title font",
+				"displayType": "font"
 			}
 		}
 	},
@@ -2099,6 +2099,64 @@
 			}
 		}
 	},
+	"card-promotion": {
+		"tokens": {
+			"card-promotion-elevation": {
+				"primitive": "uilib-elevation-100",
+				"title": "Container elevation",
+				"description": "Box shadow of the banner container",
+				"displayType": "shadow"
+			},
+			"card-promotion-radius": {
+				"primitive": "uilib-border-radius-400",
+				"title": "Container radius",
+				"description": "Border radius of the banner container",
+				"displayType": "radius"
+			},
+			"card-promotion-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Container background color",
+				"description": "Background color of the banner container",
+				"displayType": "color"
+			},
+			"card-promotion-headline-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Headline color",
+				"description": "Text color of the headline",
+				"displayType": "color"
+			},
+			"card-promotion-subcopy-color": {
+				"primitive": "uilib-color-text-body",
+				"title": "Sub-copy color",
+				"description": "Text color of the sub-copy",
+				"displayType": "color"
+			},
+			"card-promotion-subcopy-link-color": {
+				"primitive": "uilib-color-text-link",
+				"title": "Sub-copy link color",
+				"description": "Text color of inline links in the sub-copy",
+				"displayType": "color"
+			},
+			"card-promotion-code-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Promo code color",
+				"description": "Text color of the promo code",
+				"displayType": "color"
+			},
+			"card-promotion-cta-copy-icon": {
+				"displayType": "icon",
+				"title": "CTA copy icon",
+				"description": "Icon used in the Copy code button",
+				"longValue": true
+			},
+			"card-promotion-cta-copied-icon": {
+				"displayType": "icon",
+				"title": "CTA copied icon",
+				"description": "Icon used in the Copied button after a successful copy",
+				"longValue": true
+			}
+		}
+	},
 	"promo-tag": {
 		"tokens": {
 			"promo-tag-radius": {

package/scss/variables.scss

@@ -55,6 +55,7 @@
 @forward 'lib/modal/variables';
 @forward 'lib/pagination/variables';
 @forward 'lib/price/variables';
+@forward 'lib/cards/promotion/variables';
 @forward 'lib/promo-tag/variables';
 @forward 'lib/ratings-reviews/numerical/variables';
 @forward 'lib/ratings-reviews/percentage/variables';