@tui/design-system 1.5.0 → 1.7.0

package/scss/lib/cards/promotion/_mixins.scss

@@ -0,0 +1,275 @@
+// Promo Banner / _mixins
+@use '../../button/mixins' as *;
+@use '../../divider/mixins' as *;
+@use '../../icon/mixins' as *;
+@use '../../info-tag/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../utility/mixins' as *;
+
+$uilib-card-promotion-included: false !default;
+$uilib-card-promotion-horizontal: 36rem;
+
+@mixin uilib-card-promotion() {
+	@if not $uilib-card-promotion-included {
+		$uilib-card-promotion-included: true !global;
+
+		@include uilib-button;
+		@include uilib-divider;
+		@include uilib-icon;
+		@include uilib-info-tag;
+		@include uilib-link;
+		@include uilib-card-promotion-master;
+	}
+}
+
+@mixin uilib-card-promotion-master() {
+	.uilib-card-promotion {
+		container-name: uilib-card-promotion;
+		container-type: inline-size;
+
+		display: block;
+
+		width: 100%;
+		min-width: 0;
+		max-width: 100%;
+		box-sizing: border-box;
+
+		&--condensed {
+			.uilib-card-promotion__main-content,
+			.uilib-card-promotion__code-section {
+				gap: var(--uilib-spacing-200);
+
+				padding: var(--uilib-spacing-200);
+			}
+
+			.uilib-card-promotion__main-content {
+				row-gap: 0;
+			}
+
+			.uilib-card-promotion__code-container {
+				gap: var(--uilib-spacing-200);
+			}
+
+			.uilib-card-promotion__subcopy {
+				grid-column: 2;
+
+				display: block;
+
+				@container uilib-card-promotion (max-width: #{$uilib-card-promotion-horizontal}) {
+					display: flex;
+					flex-flow: column nowrap;
+					gap: 0;
+					align-items: flex-start;
+				}
+			}
+		}
+
+		&__inner {
+			display: flex;
+			flex-flow: column nowrap;
+
+			@container uilib-card-promotion (min-width: #{$uilib-card-promotion-horizontal}) {
+				flex-flow: row nowrap;
+				align-items: stretch;
+			}
+		}
+
+		&__main-content,
+		&__code-section {
+			position: relative;
+			z-index: 1;
+
+			width: 100%;
+			min-width: 0;
+			padding: var(--uilib-spacing-400);
+
+			&::before {
+				position: absolute;
+				inset: 0;
+				content: '';
+				z-index: -1;
+
+				display: block;
+
+				border-radius: var(--uilib-card-promotion-radius);
+
+				background: var(--uilib-card-promotion-bg-color);
+
+				box-shadow: var(--uilib-card-promotion-elevation);
+			}
+		}
+
+		&__main-content {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			gap: var(--uilib-spacing-200) var(--uilib-spacing-400);
+			align-items: start;
+
+			@container uilib-card-promotion (min-width: #{$uilib-card-promotion-horizontal}) {
+				flex: 1 1 0;
+
+				width: auto;
+			}
+		}
+
+		&__code-section {
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-400);
+			justify-content: flex-end;
+			align-items: center;
+
+			@container uilib-card-promotion (min-width: 36rem) {
+				flex: 0 0 auto;
+				justify-content: center;
+				align-self: stretch;
+
+				width: auto;
+				min-width: 17.4375rem; /* 279 / 16 */
+			}
+		}
+
+		&__divider {
+			position: relative;
+			z-index: 2;
+
+			width: auto;
+			margin: 0 var(--uilib-spacing-300);
+
+			background: var(--uilib-card-promotion-bg-color);
+
+			@container uilib-card-promotion (min-width: 36rem) {
+				margin: var(--uilib-spacing-300) 0;
+
+				border-top-width: 0;
+				border-right-width: var(--uilib-stroke-size-025);
+			}
+		}
+
+		&__code-container {
+			display: inline-flex;
+			flex-wrap: wrap;
+			gap: var(--uilib-spacing-400);
+			justify-content: center;
+			align-items: center;
+
+			width: 100%;
+		}
+
+		&__code {
+			flex: 0 1 auto;
+
+			min-width: 0;
+
+			color: var(--uilib-card-promotion-code-color);
+			font: var(--uilib-typography-label-medium-strong);
+			text-align: center;
+			text-transform: uppercase;
+
+			@container uilib-card-promotion (min-width: 36rem) {
+				flex: 1;
+			}
+		}
+
+		&__cta {
+			display: inline-grid;
+			flex-shrink: 0;
+
+			// Both labels share one grid cell, so the wrapper always sizes to the wider of
+			// "Copy code" / "Code copied" — no JS measurement, immune to font/mount timing.
+			.uilib-card-promotion__cta-copy,
+			.uilib-card-promotion__cta-copied {
+				grid-area: 1 / 1;
+
+				white-space: nowrap;
+			}
+
+			.uilib-button__content {
+				white-space: nowrap;
+			}
+
+			.uilib-card-promotion__cta-copied {
+				visibility: hidden;
+			}
+
+			&.copied {
+				.uilib-card-promotion__cta-copy {
+					visibility: hidden;
+				}
+
+				.uilib-card-promotion__cta-copied {
+					visibility: visible;
+				}
+			}
+		}
+
+		&__icon {
+			grid-row: 1 / span 2;
+
+			flex-shrink: 0;
+			align-self: flex-start;
+
+			@container uilib-card-promotion (max-width: #{$uilib-card-promotion-horizontal}) {
+				grid-row: auto;
+			}
+
+			&-copied {
+				-webkit-mask-image: var(--uilib-card-promotion-cta-copied-icon);
+				mask-image: var(--uilib-card-promotion-cta-copied-icon);
+			}
+
+			&-copy {
+				-webkit-mask-image: var(--uilib-card-promotion-cta-copy-icon);
+				mask-image: var(--uilib-card-promotion-cta-copy-icon);
+			}
+		}
+
+		&__headline-row {
+			display: flex;
+			flex-flow: column nowrap;
+			gap: var(--uilib-spacing-200);
+			align-items: flex-start;
+
+			min-width: 0;
+
+			@container uilib-card-promotion (min-width: 36rem) {
+				flex-flow: row wrap;
+			}
+		}
+
+		&__headline {
+			flex: 1 0 0;
+
+			margin: 0;
+
+			color: var(--uilib-card-promotion-headline-color);
+			font: var(--uilib-typography-component-heading-large-strong);
+		}
+
+		&__subcopy {
+			grid-column: 2;
+
+			margin: 0;
+
+			color: var(--uilib-card-promotion-subcopy-color);
+			font: var(--uilib-typography-body-medium);
+
+			@container uilib-card-promotion (max-width: #{$uilib-card-promotion-horizontal}) {
+				grid-column: 1 / -1;
+
+				display: flex;
+				flex-flow: column nowrap;
+				gap: var(--uilib-spacing-200);
+				align-items: flex-start;
+			}
+
+			a {
+				color: var(--uilib-card-promotion-subcopy-link-color);
+			}
+		}
+
+		&__announcement {
+			@include uilib-visually-hidden;
+		}
+	}
+}

package/scss/lib/cards/promotion/_variables.scss

@@ -0,0 +1,14 @@
+@use '../../../variables/env-variables' as *;
+
+// Promo Banner – variables
+$uilib-card-promotion-variables: (
+	elevation: var(--uilib-elevation-100),
+	radius: var(--uilib-border-radius-400),
+	bg-color: var(--uilib-color-core-neutral),
+	headline-color: var(--uilib-color-text-strong),
+	subcopy-color: var(--uilib-color-text-body),
+	subcopy-link-color: var(--uilib-color-text-link),
+	code-color: var(--uilib-color-text-strong),
+	cta-copy-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/copy.svg'),
+	cta-copied-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-circled-filled.svg'),
+) !default;

package/scss/lib/cards/selectable/_mixins.scss

@@ -1,6 +1,6 @@
 // Card Selectable / _mixins
 @use 'variables' as *;
-@use '../..//utility/mixins' as *;
+@use '../../utility/mixins' as *;
 @use '../card/mixins' as *;
 @use '../../forms/form-row/mixins' as *;
 @use '../../forms/input-radio/mixins' as *;
@@ -65,10 +65,6 @@ $uilib-card-selectable-included: false !default;
 
 		box-shadow: none;
 
-		&--dashed {
-			outline: var(--uilib-stroke-size-025) var(--uilib-stroke-style-dashed) var(--uilib-card-selectable-dashed-border-color);
-		}
-
 		&--clickable-card {
 			cursor: pointer;
 

package/scss/lib/cards/selectable/_variables.scss

@@ -4,8 +4,9 @@ $uilib-card-selectable-variables: (
 	radius: var(--uilib-border-radius-200),
 	bg-color: var(--uilib-color-core-neutral),
 	default-border-color: var(--uilib-color-border-card),
-	dashed-border-color: var(--uilib-color-border-dashed),
 	selected-border-color: var(--uilib-color-border-interaction),
 	selected-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-filled.svg'),
 	selected-icon-shape: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-solid.svg'),
+	// Below are deprecated
+	dashed-border-color: var(--uilib-color-border-dashed),
 ) !default;

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/datepicker/_mixins.scss

@@ -35,6 +35,11 @@ $uilib-datepicker-included: false !default;
 		}
 	}
 
+	.uilib-form-row:has(tui-uilib-datepicker[hide-input][defined]) [class^='uilib-form-row__'] {
+		/* Hide the form row contents once element is defined */
+		display: none;
+	}
+
 	.uilib-datepicker {
 		--uilib-datepicker-dual: #{$uilib-datepicker-dual};
 		--uilib-datepicker-dual-weeknumbers: #{$uilib-datepicker-dual-weeknumbers};

package/scss/lib/forms/input-radio-scroll/_mixins.scss

@@ -67,6 +67,10 @@ $uilib-input-radio-scroll-included: false !default;
 			#0000
 		);
 
+		tui-uilib-input-radio-scroll {
+			display: contents;
+		}
+
 		.uilib-form-row__label {
 			font: var(--uilib-typography-heading-xlarge);
 		}
@@ -175,7 +179,8 @@ $uilib-input-radio-scroll-included: false !default;
 			@include uilib-visually-hidden;
 		}
 
-		&[is-hydrated] {
+		&[is-hydrated],
+		tui-uilib-input-radio-scroll[is-hydrated] {
 			.uilib-input-chip-list,
 			.uilib-card-selectable-list {
 				scrollbar-width: none;

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/grid/_column.scss

@@ -31,12 +31,19 @@
 			@include uilib-grid-col-offset($i);
 		}
 	}
+
+	#{$uilib-grid-selector-column}--offset#{$prefix}-reset {
+		@include uilib-grid-col-offset-reset;
+	}
+
 	#{$uilib-grid-selector-column}--order#{$prefix}-first {
 		@include uilib-grid-col-order-first;
 	}
+
 	#{$uilib-grid-selector-column}--order#{$prefix}-last {
 		@include uilib-grid-col-order-last;
 	}
+
 	#{$uilib-grid-selector-column}--order#{$prefix}-reset {
 		@include uilib-grid-col-order-reset;
 	}

package/scss/lib/grid/_mixins.scss

@@ -106,6 +106,10 @@
 	grid-column-start: (1 + $offset);
 }
 
+@mixin uilib-grid-col-offset-reset {
+	grid-column-start: auto;
+}
+
 @mixin uilib-grid-col-order($i) {
 	@if meta.type-of($i) != 'number' {
 		@error 'Value for `uilib-grid-col-order` should be a number.';

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;