@tui/design-system 1.6.0 → 1.8.0

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

@@ -4,6 +4,7 @@
 @use '../icon/mixins' as *;
 
 $uilib-active-tag-included: false !default;
+$uilib-active-tag-group-included: false !default;
 
 // Builds active tag
 @mixin uilib-active-tag() {
@@ -15,6 +16,16 @@ $uilib-active-tag-included: false !default;
 	}
 }
 
+@mixin uilib-active-tag-group() {
+	@if not $uilib-active-tag-group-included {
+		$uilib-active-tag-group-included: true !global;
+
+		@include uilib-icon;
+		@include uilib-link;
+		@include uilib-active-tag-group-master;
+	}
+}
+
 @mixin uilib-active-tag-master() {
 	.uilib-active-tag {
 		display: flex;
@@ -73,16 +84,17 @@ $uilib-active-tag-included: false !default;
 	}
 }
 
-@mixin uilib-active-tag-group() {
-	@include uilib-icon;
-	@include uilib-link;
-
+@mixin uilib-active-tag-group-master() {
 	.uilib-active-tag-group {
 		display: flex;
 		flex-wrap: wrap;
 		gap: var(--uilib-spacing-200);
 		align-items: center;
 
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
 		&__list {
 			display: flex;
 			flex-wrap: wrap;

package/scss/lib/cards/carousel/_index.scss

@@ -0,0 +1,3 @@
+// Carousel / index
+@use 'mixins' as *;
+@include uilib-carousel;

package/scss/lib/cards/carousel/_mixins.scss

@@ -0,0 +1,164 @@
+// Carousel / _mixins
+@use 'sass:map';
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../../icon-button/mixins' as *;
+
+$uilib-carousel-included: false !default;
+
+@mixin uilib-carousel() {
+	@if not $uilib-carousel-included {
+		$uilib-carousel-included: true !global;
+
+		@include uilib-icon-button;
+		@include uilib-carousel-master;
+	}
+}
+
+@mixin uilib-carousel-master() {
+	.uilib-carousel {
+		position: relative;
+
+		display: block;
+
+		margin: var(--uilib-spacing-400) 0;
+	}
+
+	.uilib-carousel__viewport {
+		// `overflow-x: auto` forces `overflow-y` to `auto`, clipping card shadows and
+		// focus rings. The block padding (+ matching negative margin) gives shadow/focus
+		// room without changing height.
+		margin-block: calc(-1 * var(--uilib-carousel-viewport-padding));
+		padding-block: var(--uilib-carousel-viewport-padding);
+
+		overflow-x: auto;
+		overscroll-behavior-x: contain;
+
+		// Sizes `.uilib-carousel__slide` via `cqw` against the visible frame, not the
+		// track's own (overflowing) intrinsic width.
+		container-type: inline-size;
+	}
+
+	// Once enhanced, the prev/next controls and drag/swipe are wired up as a replacement
+	// for native scrolling, so the native scrollbar is hidden. Before that (no-JS or
+	// init-failure fallback) the scrollbar stays visible — it's the only affordance that
+	// the content scrolls, since the controls don't work without the behaviour.
+	.uilib-carousel--enhanced .uilib-carousel__viewport {
+		// Embla drives movement via a transform, so native scrolling is disabled: a leftover
+		// `scrollLeft` after a resize would combine with the transform and reveal slivers of
+		// adjacent cards. `clip` (not `hidden`) keeps `overflow-y` visible for shadows.
+		overflow-x: clip;
+
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.uilib-carousel__track {
+		display: flex;
+
+		// Slides carry their own spacing via padding (see __slide) — a track `gap` here
+		// would be mismeasured by Embla and clip the trailing slide.
+		gap: 0;
+
+		@media (prefers-reduced-motion: no-preference) {
+			transition: transform var(--uilib-carousel-motion-duration) var(--uilib-carousel-motion-easing);
+		}
+	}
+
+	// One item per slide, always — the behaviour never re-parents consumer content; grouping
+	// N slides into one page (page variant) is done via Embla's `slidesToScroll`, not DOM
+	// wrapping. Each slide fills 1/N of the frame (`--uilib-carousel-visible`, set by the
+	// behaviour; 1 without JS), so N whole, equal-width cards are always shown.
+	.uilib-carousel__slide {
+		display: flex;
+		flex: 0 0 calc(100cqw / var(--uilib-carousel-visible, 1));
+
+		min-width: 0;
+		padding-inline: calc(var(--uilib-carousel-gap) / 2);
+	}
+
+	.uilib-carousel__item {
+		flex: 1;
+	}
+
+	.uilib-carousel__control--prev .uilib-icon {
+		-webkit-mask-image: var(--uilib-carousel-prev-icon);
+		mask-image: var(--uilib-carousel-prev-icon);
+	}
+
+	.uilib-carousel__control--next .uilib-icon {
+		-webkit-mask-image: var(--uilib-carousel-next-icon);
+		mask-image: var(--uilib-carousel-next-icon);
+	}
+
+	.uilib-carousel__counter {
+		color: var(--uilib-carousel-counter-color);
+		font: var(--uilib-carousel-counter-font);
+		white-space: nowrap;
+	}
+
+	.uilib-carousel--page,
+	.uilib-carousel--item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-400);
+	}
+
+	// Bleeds the viewport back out by the slide's own inline padding (see __slide) so
+	// cards land flush with the grid edge. Width must grow by the same amount the margin
+	// pulls in to actually bleed on a flex item.
+	// `position: relative` is load-bearing for the page (loop) variant: Embla measures
+	// slide/container positions with `offsetLeft` (relative to the offsetParent). Without
+	// it, the offsetParent is the outer `.uilib-carousel` (position:relative), and the
+	// bleed offsets the track by -gap/2 relative to it. On init the track has no transform
+	// so slides share that offsetParent and Embla's snap is 0 (correct); after a resize
+	// reInit the track already carries Embla's transform, which makes the track itself the
+	// slides' offsetParent — so Embla re-reads the slides at 0 while the track is still at
+	// -gap/2, shifting every snap by -gap/2 and knocking the cards off the grid (revealing
+	// a sliver of the next card at the right edge). Making the viewport the offsetParent
+	// keeps that reference stable across init and reInit, so the snap stays 0 either way.
+	.uilib-carousel--page .uilib-carousel__viewport,
+	.uilib-carousel--item .uilib-carousel__viewport {
+		position: relative;
+
+		width: calc(100% + var(--uilib-carousel-gap));
+		margin-inline: calc(var(--uilib-carousel-gap) / -2);
+	}
+
+	.uilib-carousel--page {
+		align-items: center;
+	}
+
+	.uilib-carousel__controls {
+		display: flex;
+		gap: var(--uilib-spacing-400);
+		justify-content: center;
+		align-items: center;
+	}
+
+	// The viewport's negative inline margin already brings the cards back to the true
+	// grid edge (see __viewport), so the footer needs no inset of its own to stay aligned.
+	.uilib-carousel__footer {
+		display: flex;
+		gap: var(--uilib-spacing-400);
+		align-items: center;
+	}
+
+	.uilib-carousel--item .uilib-carousel__controls {
+		gap: var(--uilib-spacing-200);
+
+		margin-left: auto;
+	}
+
+	// Behaviour toggles this when everything fits (a single scroll snap): nothing to scroll.
+	.uilib-carousel--controls-hidden .uilib-carousel__controls {
+		display: none;
+	}
+
+	.uilib-carousel__announcement {
+		@include uilib-visually-hidden;
+	}
+}

package/scss/lib/cards/carousel/_variables.scss

@@ -0,0 +1,13 @@
+@use '../../../variables/env-variables' as *;
+
+// Carousel specific variables to allow theming
+$uilib-carousel-variables: (
+	gap: var(--uilib-spacing-400),
+	viewport-padding: var(--uilib-spacing-200),
+	prev-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-left.svg'),
+	next-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+	counter-color: var(--uilib-color-text-body),
+	counter-font: var(--uilib-typography-body-medium),
+	motion-duration: 300ms,
+	motion-easing: ease-out,
+) !default;

package/scss/lib/cards/promotion/_index.scss

@@ -0,0 +1,3 @@
+// card-promotion / index
+@use 'mixins' as *;
+@include uilib-card-promotion;

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 *;

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/highlight-panel/_index.scss

@@ -0,0 +1,2 @@
+@use 'mixins' as *;
+@include uilib-highlight-panel;