@tui/design-system 1.12.0 → 1.14.0

package/scss/lib/grid/_mixins.scss

@@ -219,3 +219,33 @@
 		content: none;
 	}
 }
+
+/* --- Grid Alignment ------- */
+
+/// Vertical alignment of all grid items within their cells (container-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-align-items($value) {
+	align-items: $value;
+}
+
+/// Horizontal alignment of all grid items within their cells (container-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-justify-items($value) {
+	justify-items: $value;
+}
+
+/// Vertical alignment of a single grid item within its cell (column-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-col-align-self($value) {
+	align-self: $value;
+}
+
+/// Horizontal alignment of a single grid item within its cell (column-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-col-justify-self($value) {
+	justify-self: $value;
+}

package/scss/lib/grid/_variables.scss

@@ -9,3 +9,4 @@ $uilib-grid-selectors-custom: () !default;
 $uilib-grid-selectors-config: map.merge($uilib-grid-selectors-default, $uilib-grid-selectors-custom);
 $uilib-grid-selector: map.get($uilib-grid-selectors-config, 'grid');
 $uilib-grid-selector-column: map.get($uilib-grid-selectors-config, 'column');
+$uilib-grid-align-values: start, center, end, stretch !default;

package/scss/lib/highlight-panel/_mixins.scss

@@ -52,12 +52,14 @@ $uilib-highlight-panel-included: false !default;
 
 			&::after {
 				position: absolute;
-				inset: auto 0 0;
+
+				// fixed pixel issue
+				inset: auto 0 -0.05rem;
 				content: '';
 
 				display: block;
 
-				height: var(--uilib-spacing-400);
+				height: calc(var(--uilib-spacing-400) + 0.05rem);
 
 				border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
 				border-bottom-width: 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/list/_mixins.scss

@@ -142,7 +142,15 @@ $uilib-list-included: false !default;
 		&--horizontal {
 			display: flex;
 			flex-flow: row wrap;
-			gap: var(--uilib-spacing-200) var(--uilib-spacing-400);
+			gap: var(--uilib-list-row-gap) var(--uilib-spacing-400);
+		}
+
+		&--compact {
+			--uilib-list-row-gap: 0;
+		}
+
+		&--spacious {
+			--uilib-list-row-gap: var(--uilib-spacing-400);
 		}
 
 		&__title {
@@ -196,9 +204,11 @@ $uilib-list-included: false !default;
 
 /* For internal use to support richText component */
 @mixin uilib-list-base() {
+	--uilib-list-row-gap: var(--uilib-spacing-200);
+
 	display: flex;
 	flex-flow: column;
-	gap: var(--uilib-spacing-200) var(--uilib-spacing-500);
+	gap: var(--uilib-list-row-gap) var(--uilib-spacing-500);
 
 	margin: 0 0 var(--uilib-spacing-400);
 	padding: 0;

package/scss/lib/list/_variables.scss

@@ -6,6 +6,6 @@ $uilib-list-variables: (
 	bullet-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/list-item.svg'),
 	image-radius: var(--uilib-border-radius-100),
 	image-alt-radius: var(--uilib-border-radius-circle),
-	multiline-title-font: var(--uilib-typography-label-medium),
+	multiline-title-font: var(--uilib-typography-body-medium-strong),
 	highlight-color: var(--uilib-color-text-promotion),
 ) !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/lib/patterns/card-with-list/_index.scss

@@ -0,0 +1,4 @@
+// Card with list / index
+@use 'mixins' as *;
+@include uilib-card-with-list;
+@include uilib-card-with-list-highlight;