@tui/design-system 1.6.0 → 1.7.0

package/scss/lib/flyout-dropdown/_variables.scss

@@ -1,5 +1,4 @@
 @use '../../variables/env-variables' as *;
-@use 'sass:map';
 
 // flyout dropdown specific variables to allow themeing
 $uilib-flyout-dropdown-variables: (

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

@@ -25,7 +25,7 @@ $uilib-input-switch-included: false !default;
 			margin-bottom: var(--uilib-spacing-200);
 		}
 
-		&__input {
+		&--input-switch &__input {
 			margin-top: 0;
 		}
 	}
@@ -49,11 +49,13 @@ $uilib-input-switch-included: false !default;
 			font: var(--uilib-form-row-label-font);
 		}
 
-		&:has(.uilib-input-switch__input[disabled]) {
+		&:has(.uilib-input-switch__input:disabled),
+		&-input:disabled + .uilib-input-switch {
 			cursor: auto;
 		}
 
-		&:has(.uilib-input-switch__input:focus-visible) {
+		&:has(.uilib-input-switch__input:focus-visible),
+		&-input:focus-visible + .uilib-input-switch {
 			@include uilib-focus;
 
 			&::before {
@@ -61,7 +63,8 @@ $uilib-input-switch-included: false !default;
 			}
 		}
 
-		&__input {
+		&__input,
+		&-input {
 			position: absolute;
 
 			width: 0;
@@ -71,7 +74,8 @@ $uilib-input-switch-included: false !default;
 
 			opacity: 0;
 
-			&:checked + .uilib-input-switch__track {
+			&:checked + .uilib-input-switch__track,
+			&:checked + .uilib-input-switch .uilib-input-switch__track {
 				border-color: var(--uilib-input-switch-track-selected-border-color);
 
 				background-color: var(--uilib-input-switch-track-selected-color);
@@ -83,7 +87,9 @@ $uilib-input-switch-included: false !default;
 				}
 			}
 
-			&[disabled] + .uilib-input-switch__track {
+			/* stylelint-disable-next-line order/order */
+			&:disabled + .uilib-input-switch__track,
+			&:disabled + .uilib-input-switch .uilib-input-switch__track {
 				border-color: var(--uilib-input-switch-track-disabled-border-color);
 
 				background-color: var(--uilib-input-switch-track-color-disabled);

package/scss/lib/list/_mixins.scss

@@ -18,110 +18,129 @@ $uilib-list-included: false !default;
 @mixin uilib-list-master() {
 	.uilib-list {
 		@include uilib-list-base;
-	}
 
-	.uilib-list--strong {
-		color: var(--uilib-color-text-strong);
-	}
+		/* stylelint-disable-next-line order/order */
+		&--strong {
+			color: var(--uilib-color-text-strong);
+		}
 
-	.uilib-list--label {
-		color: var(--uilib-color-text-strong);
-		font: var(--uilib-typography-label-medium);
-	}
+		&--label {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-medium);
+		}
 
-	.uilib-list--icon,
-	.uilib-list--image {
-		& > li::before {
-			display: none;
+		&--icon,
+		&--image {
+			& > li::before {
+				display: none;
+			}
 		}
-	}
 
-	.uilib-list__icon {
-		position: absolute;
-		top: 0;
-		left: 0;
+		&__icon {
+			position: absolute;
+			top: 0;
+			left: 0;
 
-		&.uilib-icon {
-			background: var(--uilib-list-bullet-color);
+			&.uilib-icon {
+				background: var(--uilib-list-bullet-color);
+			}
 		}
-	}
 
-	.uilib-list--icon-small {
-		& > li {
-			min-height: var(--uilib-icon-size-small);
-			padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-200));
+		/* stylelint-disable-next-line order/order */
+		&--icon-small {
+			& > li {
+				min-height: var(--uilib-icon-size-small);
+				padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-200));
+			}
+
+			.uilib-list__icon {
+				top: calc(var(--uilib-spacing-300) / 4);
+			}
 		}
 
-		.uilib-list__icon {
-			top: calc(var(--uilib-spacing-300) / 4);
+		&--icon-large {
+			& > li {
+				min-height: var(--uilib-icon-size-medium);
+				padding-top: calc(calc(var(--uilib-icon-size-medium) - calc(1rem * var(--uilib-line-height-body))) / 2);
+				padding-left: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
+			}
+
+			.uilib-list__icon {
+				top: 0;
+			}
 		}
-	}
 
-	.uilib-list--icon-large {
-		& > li {
-			min-height: var(--uilib-icon-size-medium);
-			padding-top: calc(calc(var(--uilib-icon-size-medium) - calc(1rem * var(--uilib-line-height-body))) / 2);
-			padding-left: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
+		&--image {
+			& > li {
+				min-height: var(--uilib-spacing-1000);
+				padding-top: calc(var(--uilib-spacing-050) * 5);
+				padding-left: calc(var(--uilib-spacing-1000) + var(--uilib-spacing-200));
+			}
 		}
 
-		.uilib-list__icon {
+		&__image {
+			position: absolute;
 			top: 0;
-		}
-	}
+			left: 0;
+
+			width: var(--uilib-spacing-1000);
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			border-radius: var(--uilib-list-image-radius);
+
+			overflow: hidden;
 
-	.uilib-list--image {
-		& > li {
-			min-height: var(--uilib-spacing-1000);
-			padding-top: calc(var(--uilib-spacing-050) * 5);
-			padding-left: calc(var(--uilib-spacing-1000) + var(--uilib-spacing-200));
+			img {
+				object-fit: cover;
+				object-position: center;
+			}
 		}
-	}
 
-	.uilib-list__image {
-		position: absolute;
-		top: 0;
-		left: 0;
+		/* stylelint-disable-next-line order/order */
+		&--image-alt > li > &__image {
+			border-radius: var(--uilib-list-image-alt-radius);
+		}
 
-		width: var(--uilib-spacing-1000);
-		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+		&--inverse {
+			@include uilib-list-inverse;
 
-		border-radius: var(--uilib-list-image-radius);
+			.uilib-list__icon {
+				background: var(--uilib-color-text-inverse);
+			}
+		}
 
-		overflow: hidden;
+		&--numbered {
+			@include uilib-list-ordered;
 
-		img {
-			object-fit: cover;
-			object-position: center;
+			&.uilib-list--inverse {
+				@include uilib-list-ordered-inverse;
+			}
 		}
-	}
 
-	.uilib-list--image-alt > li > .uilib-list__image {
-		border-radius: var(--uilib-list-image-alt-radius);
-	}
+		&--columns {
+			display: block;
 
-	.uilib-list--inverse {
-		@include uilib-list-inverse;
+			columns: 20ch 2;
 
-		.uilib-list__icon {
-			background: var(--uilib-color-text-inverse);
+			& > li {
+				margin-bottom: var(--uilib-spacing-100);
+			}
 		}
-	}
-
-	.uilib-list--numbered {
-		@include uilib-list-ordered;
 
-		&.uilib-list--inverse {
-			@include uilib-list-ordered-inverse;
+		&--horizontal {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200) var(--uilib-spacing-400);
 		}
-	}
 
-	.uilib-list--columns {
-		display: block;
+		&__title {
+			display: block;
 
-		columns: 20ch 2;
+			font: var(--uilib-list-multiline-title-font);
+		}
 
-		& > li {
-			margin-bottom: var(--uilib-spacing-100);
+		li:has(> &__title) {
+			font: var(--uilib-typography-body-medium);
 		}
 	}
 }

package/scss/lib/list/_variables.scss

@@ -6,4 +6,5 @@ $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),
 ) !default;

package/scss/lib/modal/_variables.scss

@@ -1,11 +1,8 @@
 @use '../../variables/env-variables' as *;
-@use '../../variables/primitives' as *;
-@use '../../variables/border-radius' as *;
-@use 'sass:map';
 
 // modal specific variables to allow themeing
 $uilib-modal-variables: (
 	close-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
 	backdrop-color: var(--uilib-color-other-scrim),
-	radius: map.get($uilib-radius, '400'),
+	radius: var(--uilib-border-radius-400),
 ) !default;

package/scss/lib/skeleton/_variables.scss

@@ -1,8 +1,4 @@
-@use 'sass:map';
-@use '../../variables/colors' as *;
-@use '../../variables/primitives' as *;
-
 $uilib-skeleton-variables: (
-	color: map.get($uilib-color-semantic, 'other-skeleton-loading'),
-	shimmer-color: map.get($uilib-primitives, 'color-neutral-20'),
+	color: var(--uilib-color-other-skeleton-loading),
+	shimmer-color: var(--uilib-color-canvas-contrast),
 ) !default;

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) {