@tui/design-system 1.6.0 → 1.7.0

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

@@ -1913,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"
 			}
 		}
 	},
@@ -2093,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';

package/types/components.ts

@@ -66,6 +66,9 @@ export interface AnchorTab {
 
 export interface AnchorTabsProps {
 	icon?: string;
+	tabsLabelledby?: string;
+	tabsLabel?: string;
+	/** @deprecated Use `tabsLabelledby` instead */
 	ariaLabelledby?: string;
 	tabs?: AnchorTab[];
 	sticky?: boolean;
@@ -146,6 +149,9 @@ export interface DatepickerProps {
 	maxDate?: string;
 	previousLabel?: string;
 	nextLabel?: string;
+	announceStart?: string;
+	announceRange?: string;
+	instructions?: string;
 	locale?: string;
 }
 
@@ -247,6 +253,9 @@ export interface InPageTabsProps {
 	variant?: 'left-aligned' | 'full-width';
 	icon?: string;
 	active?: string;
+	tabsLabelledby?: string;
+	tabsLabel?: string;
+	/** @deprecated Use `tabsLabelledby` instead */
 	ariaLabelledby?: string;
 	tabs?: InPageTab[];
 }
@@ -378,11 +387,14 @@ export interface LinkProps {
 export type ListVariant = 'bulleted' | 'numbered' | 'icon' | 'image';
 export type ListTextVariant = 'default' | 'strong' | 'label';
 export type ListIconSize = 'small' | 'medium' | 'large';
+export type ListLayout = 'default' | 'columns' | 'horizontal';
 
 export interface ListProps {
 	variant?: ListVariant;
 	textVariant?: ListTextVariant;
 	iconSize?: ListIconSize;
+	layout?: ListLayout;
+	/** @deprecated Use `layout: 'columns'` instead. */
 	columns?: boolean;
 	inverse?: boolean;
 	altShape?: boolean;
@@ -458,6 +470,26 @@ export interface PriceBoxProps {
 	footerHtml?: string;
 }
 
+// ─── Card Promotion ───────────────────────────────────────
+export interface CardPromotionProps {
+	type?: 'default' | 'promo-code';
+	condensed?: boolean;
+	headingLevel?: HeadingLevel;
+	headline?: string;
+	scarcityLabel?: string;
+	conditions?: string;
+	linkLabel?: string;
+	icon?: string;
+	code?: string;
+	copied?: boolean;
+	copyLabel?: string;
+	copiedLabel?: string;
+	expired?: boolean;
+	expiredLabel?: string;
+	announcementLabel?: string;
+	theme?: Theme;
+}
+
 // ─── Promo Tag ──────────────────────────────────────────
 export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
 export type PromoTagSize = (typeof PromoTagSizes)[number];