@tui/design-system 1.11.0 → 1.13.0

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

@@ -16,125 +16,216 @@ $uilib-icon-button-included: false !default;
 
 @mixin uilib-icon-button-master() {
 	.uilib-icon-button {
+		--uilib-icon-button-small-offset: calc(((var(--uilib-icon-button-size-small) - var(--uilib-icon-size-xsmall)) / 2) * -1);
+		--uilib-icon-button-medium-offset: calc(((var(--uilib-icon-button-size-medium) - var(--uilib-icon-size-medium)) / 2) * -1);
+		--uilib-icon-button-large-offset: calc(((var(--uilib-icon-button-size-large) - var(--uilib-icon-size-xlarge)) / 2) * -1);
+
 		position: relative;
 
 		display: inline-flex;
 		flex-flow: row nowrap;
-		justify-content: center;
+		gap: 0;
+		justify-content: flex-end;
 		align-items: center;
 
-		width: var(--uilib-icon-button-size-medium);
 		padding: 0;
-		aspect-ratio: 1/1;
 
-		color: var(--uilib-icon-button-primary-color);
+		color: var(--uilib-icon-button-text-color);
 		font: var(--uilib-typography-label-medium);
 		text-decoration: none;
 
-		border-radius: var(--uilib-icon-button-radius);
+		border: 0;
 
-		background: var(--uilib-icon-button-primary-bg-color);
+		background: transparent;
 
 		cursor: pointer;
 
 		appearance: none;
 
-		@media (prefers-reduced-motion: no-preference) {
-			transition:
-				border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
-				background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
-				color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
-				transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+		&::after {
+			content: '';
+
+			order: 2;
+
+			flex-grow: 0;
+			flex-shrink: 0;
+
+			width: var(--uilib-icon-button-size-medium);
+			padding: 0;
+			aspect-ratio: 1/1;
+
+			border-radius: var(--uilib-icon-button-radius);
+
+			background: var(--uilib-icon-button-primary-bg-color);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+			}
 		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-primary-hover-bg-color);
 		}
 
 		&:focus-visible {
 			@include uilib-focus;
+
+			/* stylelint-disable-next-line order/order */
+			&::before {
+				border-radius: var(--uilib-icon-button-radius);
+			}
 		}
 
 		&:active:not(:disabled, .uilib-icon-button--disabled) {
-			transform: scale(0.96);
+			&::after {
+				transform: scale(0.96);
+			}
+
+			.uilib-icon-button__icon {
+				transform: translate(var(--uilib-icon-button-medium-offset), 0) scale(0.96);
+			}
+		}
+
+		&:is(div) {
+			pointer-events: none;
+
+			&::after,
+			&::before,
+			.uilib-icon-button__icon {
+				pointer-events: none;
+			}
 		}
 
 		&__content {
-			flex-grow: 1;
+			order: 1;
+
+			padding-right: var(--uilib-spacing-300);
+
+			font: var(--uilib-typography-label-large);
+			text-align: left;
 		}
 
 		&__icon {
+			position: relative;
+			z-index: 1;
+
+			order: 3;
+
+			flex-shrink: 0;
+
+			margin-left: calc((var(--uilib-icon-size-medium)) * -1);
+
+			color: var(--uilib-icon-button-primary-color);
+
+			transform: translate(var(--uilib-icon-button-medium-offset), 0);
+
 			pointer-events: none;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+			}
 		}
 	}
 
 	.uilib-icon-button--ghost {
-		color: var(--uilib-icon-button-ghost-color);
-
-		background: var(--uilib-icon-button-ghost-bg-color);
+		&::after {
+			background: var(--uilib-icon-button-ghost-bg-color);
+		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-ghost-hover-bg-color);
 		}
+
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-ghost-color);
+		}
 	}
 
 	.uilib-icon-button--secondary {
-		color: var(--uilib-icon-button-secondary-color);
-
-		border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-icon-button-secondary-color);
+		&::after {
+			border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-icon-button-secondary-color);
 
-		background: var(--uilib-icon-button-secondary-bg-color);
+			background: var(--uilib-icon-button-secondary-bg-color);
+		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-secondary-hover-bg-color);
 		}
+
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-secondary-color);
+		}
 	}
 
 	.uilib-icon-button--control {
-		color: var(--uilib-icon-button-control-color);
+		&::after {
+			background: var(--uilib-icon-button-control-bg-color);
 
-		background: var(--uilib-icon-button-control-bg-color);
-
-		box-shadow: var(--uilib-elevation-200);
+			box-shadow: var(--uilib-elevation-200);
+		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-control-hover-bg-color);
 		}
+
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-control-color);
+		}
 	}
 
 	.uilib-icon-button--promotion {
-		color: var(--uilib-icon-button-promotion-color);
-
-		background: var(--uilib-icon-button-promotion-bg-color);
+		&::after {
+			background: var(--uilib-icon-button-promotion-bg-color);
+		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-promotion-hover-bg-color);
 		}
+
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-promotion-color);
+		}
 	}
 
 	.uilib-icon-button--search {
-		color: var(--uilib-icon-button-search-color);
-
-		background: var(--uilib-icon-button-search-bg-color);
+		&::after {
+			background: var(--uilib-icon-button-search-bg-color);
+		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-search-hover-bg-color);
 		}
+
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-search-color);
+		}
 	}
 
 	.uilib-icon-button--shortlist {
-		color: var(--uilib-icon-button-shortlist-color);
+		&::after {
+			background: var(--uilib-icon-button-shortlist-bg-color);
 
-		background: var(--uilib-icon-button-shortlist-bg-color);
-
-		box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
+			box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
+		}
 
-		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+		&:hover:not(:disabled, .uilib-icon-button--disabled)::after {
 			background: var(--uilib-icon-button-shortlist-hover-bg-color);
 		}
 
-		.uilib-icon-button__icon--selected {
-			display: none;
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-shortlist-color);
+
+			&--selected {
+				display: none;
+			}
 		}
 
 		&[aria-pressed='true'] .uilib-icon-button__icon {
@@ -148,33 +239,119 @@ $uilib-icon-button-included: false !default;
 
 	.uilib-icon-button:disabled,
 	.uilib-icon-button--disabled {
-		color: var(--uilib-icon-button-disabled-color);
+		cursor: default;
 
-		border-color: var(--uilib-icon-button-disabled-bg-color);
+		&::after {
+			border-color: var(--uilib-icon-button-disabled-bg-color);
 
-		background: var(--uilib-icon-button-disabled-bg-color);
+			background: var(--uilib-icon-button-disabled-bg-color);
 
-		box-shadow: none;
+			box-shadow: none;
+		}
 
-		cursor: default;
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-disabled-color);
+		}
+
+		.uilib-icon-button__content {
+			color: var(--uilib-icon-button-disabled-color);
+		}
 	}
 
 	.uilib-icon-button--ghost:disabled,
 	.uilib-icon-button--ghost.uilib-icon-button--disabled {
-		color: var(--uilib-icon-button-disabled-bg-color);
+		cursor: default;
 
-		border-color: var(--uilib-icon-button-ghost-bg-color);
+		&::after {
+			color: var(--uilib-icon-button-disabled-bg-color);
 
-		background: var(--uilib-icon-button-ghost-bg-color);
+			border-color: var(--uilib-icon-button-ghost-bg-color);
 
-		cursor: default;
+			background: var(--uilib-icon-button-ghost-bg-color);
+		}
+
+		.uilib-icon-button__icon {
+			color: var(--uilib-icon-button-disabled-color);
+		}
+
+		.uilib-icon-button__content {
+			color: var(--uilib-icon-button-disabled-color);
+		}
 	}
 
 	.uilib-icon-button--small {
-		width: var(--uilib-icon-button-size-small);
+		&::after {
+			width: var(--uilib-icon-button-size-small);
+		}
+
+		.uilib-icon-button__content {
+			padding-right: var(--uilib-spacing-200);
+
+			font: var(--uilib-typography-label-medium);
+		}
+
+		.uilib-icon-button__icon {
+			margin-left: calc((var(--uilib-icon-size-xsmall)) * -1);
+
+			transform: translate(var(--uilib-icon-button-small-offset), 0);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&:active:not(:disabled, .uilib-icon-button--disabled) {
+			.uilib-icon-button__icon {
+				transform: translate(var(--uilib-icon-button-small-offset), 0) scale(0.96);
+			}
+		}
 	}
 
 	.uilib-icon-button--large {
-		width: var(--uilib-icon-button-size-large);
+		&::after {
+			width: var(--uilib-icon-button-size-large);
+		}
+
+		.uilib-icon-button__content {
+			padding-right: var(--uilib-spacing-400);
+
+			font: var(--uilib-typography-component-heading-xlarge);
+		}
+
+		.uilib-icon-button__icon {
+			margin-left: calc((var(--uilib-icon-size-xlarge)) * -1);
+
+			transform: translate(var(--uilib-icon-button-large-offset), 0);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&:active:not(:disabled, .uilib-icon-button--disabled) {
+			.uilib-icon-button__icon {
+				transform: translate(var(--uilib-icon-button-large-offset), 0) scale(0.96);
+			}
+		}
+	}
+
+	.uilib-icon-button--label-right {
+		justify-content: flex-start;
+
+		&::after {
+			order: 1;
+		}
+
+		.uilib-icon-button__icon {
+			order: 2;
+		}
+
+		.uilib-icon-button__content {
+			order: 3;
+
+			padding: 0 0 0 var(--uilib-spacing-300);
+		}
+
+		&.uilib-icon-button--small .uilib-icon-button__content {
+			padding-left: var(--uilib-spacing-200);
+		}
+
+		&.uilib-icon-button--large .uilib-icon-button__content {
+			padding-left: var(--uilib-spacing-400);
+		}
 	}
 }

package/scss/lib/icon-button/_variables.scss

@@ -5,6 +5,7 @@
 // Icon button specific variables to allow theming
 $uilib-icon-button-variables: (
 	radius: var(--uilib-border-radius-pill),
+	text-color: var(--uilib-color-core-interaction),
 	ghost-color: var(--uilib-color-core-interaction),
 	ghost-bg-color: transparent,
 	ghost-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state),

package/scss/lib/image/_mixins.scss

@@ -1,5 +1,6 @@
 // image / _mixins
 @use '../../variables/env-variables' as *;
+@use '../grid/mixins' as *;
 
 $uilib-image-included: false !default;
 
@@ -18,6 +19,9 @@ $uilib-image-included: false !default;
 	}
 
 	.uilib-image {
+		// Active focal point — cascades from the largest set breakpoint down to base, then center.
+		--uilib-image-focus: var(--uilib-image-focus-base, center);
+
 		display: flex;
 
 		border-radius: var(--uilib-image-rectangle);
@@ -51,53 +55,77 @@ $uilib-image-included: false !default;
 			border-radius: var(--uilib-image-rounded);
 		}
 
-		img {
-			width: 100%;
-			height: 100%;
-
-			font-size: 0;
-
-			object-fit: cover;
-			object-position: center;
-		}
-
+		// Static focal point classes — set the base var, applied at all breakpoints.
 		/* stylelint-disable-next-line order/order */
 		&--focus {
-			&-top-left img {
-				object-position: top left;
+			&-top-left {
+				--uilib-image-focus-base: top left;
 			}
 
-			&-top-center img {
-				object-position: top center;
+			&-top-center {
+				--uilib-image-focus-base: top center;
 			}
 
-			&-top-right img {
-				object-position: top right;
+			&-top-right {
+				--uilib-image-focus-base: top right;
 			}
 
-			&-center-left img {
-				object-position: center left;
+			&-center-left {
+				--uilib-image-focus-base: center left;
 			}
 
-			&-center img {
-				object-position: center;
+			&-center {
+				--uilib-image-focus-base: center;
 			}
 
-			&-center-right img {
-				object-position: center right;
+			&-center-right {
+				--uilib-image-focus-base: center right;
 			}
 
-			&-bottom-left img {
-				object-position: bottom left;
+			&-bottom-left {
+				--uilib-image-focus-base: bottom left;
 			}
 
-			&-bottom-center img {
-				object-position: bottom center;
+			&-bottom-center {
+				--uilib-image-focus-base: bottom center;
 			}
 
-			&-bottom-right img {
-				object-position: bottom right;
+			&-bottom-right {
+				--uilib-image-focus-base: bottom right;
 			}
 		}
+
+		// Per-breakpoint overrides, each falling back to the smaller breakpoints.
+		@include uilib-breakpoint(xs) {
+			--uilib-image-focus: var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center));
+		}
+
+		@include uilib-breakpoint(sm) {
+			--uilib-image-focus: var(--uilib-image-focus-sm, var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center)));
+		}
+
+		@include uilib-breakpoint(md) {
+			--uilib-image-focus: var(
+				--uilib-image-focus-md,
+				var(--uilib-image-focus-sm, var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center)))
+			);
+		}
+
+		@include uilib-breakpoint(lg) {
+			--uilib-image-focus: var(
+				--uilib-image-focus-lg,
+				var(--uilib-image-focus-md, var(--uilib-image-focus-sm, var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center))))
+			);
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+
+			font-size: 0;
+
+			object-fit: cover;
+			object-position: var(--uilib-image-focus, center);
+		}
 	}
 }

package/scss/lib/info-tag/_mixins.scss

@@ -37,7 +37,7 @@ $uilib-info-tag-list-included: false !default;
 		padding: var(--uilib-spacing-050) var(--uilib-spacing-100); /* 2px 4px */
 
 		color: var(--uilib-info-tag-text-color);
-		font: var(--uilib-typography-label-xsmall);
+		font: var(--uilib-typography-label-small);
 		text-align: left;
 		text-decoration: none;
 
@@ -69,6 +69,12 @@ $uilib-info-tag-list-included: false !default;
 		background: var(--uilib-info-tag-local-product-bg-color);
 	}
 
+	.uilib-info-tag--platinum {
+		color: var(--uilib-info-tag-platinum-text-color);
+
+		background: var(--uilib-info-tag-platinum-bg-color);
+	}
+
 	// Tooltip variant styles
 	.uilib-info-tag .uilib-tooltip.uilib-tooltip--icon {
 		margin: calc(var(--uilib-spacing-200) * -1);

package/scss/lib/info-tag/_variables.scss

@@ -8,6 +8,8 @@ $uilib-info-tag-variables: (
 	text-color: var(--uilib-color-text-strong),
 	info-bg-color: var(--uilib-color-status-info-surface),
 	local-product-bg-color: var(--uilib-color-brand-local),
+	platinum-bg-color: var(--uilib-color-brand-platinum),
+	platinum-text-color: var(--uilib-color-core-neutral),
 	neutral-bg-color: var(--uilib-color-core-neutral),
 	scarcity-bg-color: var(--uilib-color-status-warning-surface),
 ) !default;

package/scss/lib/modal/_mixins.scss

@@ -119,7 +119,8 @@ $uilib-modal-included: false !default;
 			justify-content: end;
 			align-items: center;
 
-			slot[name='price'] {
+			slot[name='price'],
+			[slot='price'] {
 				display: flex;
 
 				margin-right: auto;
@@ -138,8 +139,11 @@ $uilib-modal-included: false !default;
 				}
 			}
 
-			// show divider only if price slot is used
-			&:not(:has(slot[name='price'] *)) .uilib-divider {
+			// show divider only if price slot has content
+			// V1: slot[name='price'] always exists in the template — use :not(:empty)
+			// to check it actually has distributed content.
+			// V2: [slot='price'] only exists when the consumer provides it.
+			&:not(:has(slot[name='price']:not(:empty), [slot='price'])) .uilib-divider {
 				display: none;
 			}
 		}
@@ -149,6 +153,8 @@ $uilib-modal-included: false !default;
 			mask-image: var(--uilib-modal-close-icon);
 		}
 
+		// Scroll lock fallback for v1 (v2 handles this in JS).
+		// TODO(next-major): remove once v1 is retired.
 		body:has(&[open]) {
 			overflow: hidden;
 		}

package/scss/variables/_colors.scss

@@ -51,6 +51,7 @@ $uilib-color-semantic: (
 	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'),
+	brand-platinum: map.get($uilib-primitives, 'color-brand-platinum-grey'),
 	other-scroll-handle: map.get($uilib-primitives, 'color-neutral-50'),
 	/* Deprecated */ brand-trip-advisor: map.get($uilib-primitives, 'color-brand-tripadvisor-green-60'),
 );

package/scss/variables/_primitives.scss

@@ -80,6 +80,7 @@ $uilib-primitives: (
 	color-brand-tripadvisor-green-60: #00b747,
 	color-brand-tripadvisor-pine-green: #002b11,
 	color-brand-paypal-blue: #253b80,
+	color-brand-platinum-grey: #4b5560,
 	color-brand-holidaycheck-blue: #0e55cd,
 	color-brand-holidaycheck-yellow: #ffca3a,
 	color-brand-holidaycheck-lightblue: #c7d5ed,

package/scss/variables/base-theme.json

@@ -246,6 +246,11 @@
 					"primitive": "color-brand-paypal-blue",
 					"title": "PayPal",
 					"darkColor": true
+				},
+				"color-brand-platinum": {
+					"primitive": "color-brand-platinum-grey",
+					"title": "Platinum",
+					"darkColor": true
 				}
 			}
 		}
@@ -1464,6 +1469,12 @@
 				"title": "Button radius",
 				"description": "Button radius"
 			},
+			"icon-button-text-color": {
+				"primitive": "uilib-color-core-interaction",
+				"displayType": "color",
+				"title": "Label text colour",
+				"description": "Label text colour"
+			},
 			"icon-button-ghost-color": {
 				"primitive": "uilib-color-core-interaction",
 				"title": "Ghost text colour",
@@ -1672,6 +1683,16 @@
 				"title": "Local product background colour",
 				"description": "Local product background colour"
 			},
+			"info-tag-platinum-bg-color": {
+				"primitive": "uilib-color-brand-platinum",
+				"title": "Platinum background colour",
+				"description": "Platinum background colour"
+			},
+			"info-tag-platinum-text-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Platinum text colour",
+				"description": "Platinum text colour"
+			},
 			"info-tag-neutral-bg-color": {
 				"primitive": "uilib-color-core-neutral",
 				"title": "Neutral background colour",