@tui/design-system 1.7.0 → 1.8.0

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

@@ -0,0 +1,244 @@
+// Highlight panel / _mixins
+@use 'variables' as *;
+@use '../utility/mixins' as *;
+@use '../icon/mixins' as *;
+
+$uilib-highlight-panel-included: false !default;
+
+@mixin uilib-highlight-panel() {
+	@if not $uilib-highlight-panel-included {
+		$uilib-highlight-panel-included: true !global;
+
+		@include uilib-icon;
+		@include uilib-highlight-panel-master;
+	}
+}
+
+@mixin uilib-highlight-panel-master() {
+	.uilib-highlight-panel {
+		&::after {
+			content: '';
+
+			display: block;
+
+			height: var(--uilib-spacing-400);
+
+			border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
+			border-top: 0;
+			border-radius: 0 0 var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius);
+
+			background: var(--uilib-highlight-panel-bg-color);
+		}
+
+		// ─── Header ───
+		&__header {
+			position: relative;
+
+			display: flex;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+
+			padding: var(--uilib-spacing-200) calc(var(--uilib-icon-size-small) + var(--uilib-spacing-600)) var(--uilib-spacing-600)
+				var(--uilib-spacing-400);
+
+			color: var(--uilib-highlight-panel-header-font-color);
+
+			border-radius: var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius) 0 0;
+
+			background: var(--uilib-highlight-panel-header-bg-color);
+
+			// Remove native summary markers
+			list-style: none;
+
+			&::after {
+				position: absolute;
+				inset: auto 0 0;
+				content: '';
+
+				display: block;
+
+				height: var(--uilib-spacing-400);
+
+				border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
+				border-bottom-width: 0;
+				border-radius: var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius) 0 0;
+
+				background: var(--uilib-highlight-panel-bg-color);
+			}
+
+			&:focus-visible {
+				@include uilib-focus;
+
+				&::before {
+					bottom: calc(var(--uilib-spacing-400) - var(--uilib-focus-gap));
+
+					border-radius: var(--uilib-highlight-panel-radius);
+				}
+			}
+
+			&::-webkit-details-marker {
+				display: none;
+			}
+
+			&::marker {
+				content: '';
+
+				display: none;
+			}
+		}
+
+		// Clickable header (collapsible variant)
+		&__collapsible > &__header {
+			cursor: pointer;
+		}
+
+		// Collapsible details element (nested inside panel)
+		&__collapsible {
+			// Reset details styling
+			margin: 0;
+			padding: 0;
+
+			border: 0;
+		}
+
+		&__collapsible &__header-text::before {
+			display: block;
+		}
+
+		&__collapsible[open] &__header-text::before {
+			transform: translate(0, calc((var(--uilib-icon-size-small) / 2) * -1)) rotate(180deg);
+		}
+
+		&__collapsible::details-content {
+			block-size: 0;
+
+			overflow: hidden;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+					content-visibility var(--uilib-motion-duration-medium) allow-discrete;
+			}
+		}
+
+		&__collapsible[open]::details-content {
+			block-size: auto;
+		}
+
+		&__header-text {
+			display: flex;
+			flex-direction: column;
+
+			// ─── Toggle indicator (collapsible) ───
+			&::before {
+				position: absolute;
+				top: calc(50% - var(--uilib-spacing-200));
+				right: var(--uilib-spacing-400);
+				content: '';
+
+				display: none;
+
+				width: var(--uilib-icon-size-small);
+				height: var(--uilib-icon-size-small);
+
+				background-color: var(--uilib-highlight-panel-header-icon-color);
+
+				-webkit-mask: var(--uilib-highlight-panel-toggle-icon) no-repeat center;
+				mask: var(--uilib-highlight-panel-toggle-icon) no-repeat center;
+				-webkit-mask-size: contain;
+				mask-size: contain;
+
+				transform: translate(0, calc((var(--uilib-icon-size-small) / 2) * -1));
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
+			}
+		}
+
+		&__title {
+			font: var(--uilib-highlight-panel-header-font);
+		}
+
+		&__subtitle {
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		&__icon {
+			flex-shrink: 0;
+		}
+
+		// ─── Content ───
+		// ─── Footer (always visible in collapsible mode) ───
+		&__content,
+		&__footer {
+			padding: 0 var(--uilib-spacing-400);
+
+			border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
+			border-top-width: 0;
+			border-bottom-width: 0;
+
+			background: var(--uilib-highlight-panel-bg-color);
+		}
+
+		&__content {
+			padding-top: var(--uilib-spacing-400);
+
+			border-top-width: var(--uilib-stroke-size-025);
+			border-radius: var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius) 0 0;
+		}
+
+		&:has(&__header) &__content {
+			padding-top: 0;
+
+			border-top-width: 0;
+			border-radius: 0;
+		}
+
+		&:has(&__footer) &__content {
+			padding-bottom: var(--uilib-spacing-200);
+
+			&--divider::after {
+				content: '';
+
+				display: block;
+
+				width: 100%;
+				margin-top: var(--uilib-spacing-200);
+
+				border-bottom: var(--uilib-stroke-size-050) solid var(--uilib-color-border-divider);
+			}
+		}
+
+		// ─── Variants ───
+		/* stylelint-disable-next-line order/order */
+		&--strong &__header {
+			color: var(--uilib-highlight-panel-header-font-color-strong);
+
+			background: var(--uilib-highlight-panel-header-bg-color-strong);
+
+			&-text::before {
+				background-color: var(--uilib-highlight-panel-header-icon-color-strong);
+			}
+		}
+
+		&--brand &__header {
+			color: var(--uilib-highlight-panel-header-font-color-brand);
+
+			background: var(--uilib-highlight-panel-header-bg-overlay-brand, none), var(--uilib-highlight-panel-header-bg-color-brand);
+			background-repeat: no-repeat;
+			background-position:
+				right top,
+				center;
+			background-size: 50%, auto;
+
+			&-text::before {
+				background-color: var(--uilib-highlight-panel-header-icon-color-brand);
+			}
+		}
+
+		&--brand &__title {
+			font: var(--uilib-highlight-panel-header-font-brand);
+		}
+	}
+}

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

@@ -0,0 +1,21 @@
+@use '../../variables/env-variables' as *;
+
+// Highlight panel specific variables to allow theming
+$uilib-highlight-panel-variables: (
+	radius: var(--uilib-border-radius-400),
+	border-color: var(--uilib-color-border-card),
+	bg-color: var(--uilib-color-canvas-default),
+	header-font: var(--uilib-typography-component-heading-medium),
+	header-font-brand: var(--uilib-typography-component-heading-large-strong),
+	header-font-color: var(--uilib-color-text-strong),
+	header-font-color-strong: var(--uilib-color-text-inverse),
+	header-font-color-brand: var(--uilib-color-text-strong),
+	header-icon-color: var(--uilib-color-core-interaction),
+	header-icon-color-strong: var(--uilib-color-text-inverse),
+	header-icon-color-brand: var(--uilib-color-core-interaction),
+	header-bg-color: var(--uilib-color-core-surface),
+	header-bg-color-strong: var(--uilib-color-core-brand-strong),
+	header-bg-color-brand: var(--uilib-color-core-brand),
+	header-bg-overlay-brand: none,
+	toggle-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/list/_mixins.scss

@@ -117,6 +117,16 @@ $uilib-list-included: false !default;
 			}
 		}
 
+		&--plain {
+			& > li {
+				padding: 0;
+
+				&::before {
+					display: none;
+				}
+			}
+		}
+
 		&--columns {
 			display: block;
 
@@ -124,6 +134,8 @@ $uilib-list-included: false !default;
 
 			& > li {
 				margin-bottom: var(--uilib-spacing-100);
+
+				break-inside: avoid;
 			}
 		}
 
@@ -142,6 +154,43 @@ $uilib-list-included: false !default;
 		li:has(> &__title) {
 			font: var(--uilib-typography-body-medium);
 		}
+
+		&:not(&--inverse) li.uilib-list__highlight-item {
+			color: var(--uilib-list-highlight-color);
+
+			&::before {
+				color: var(--uilib-list-highlight-color);
+			}
+
+			.uilib-list__icon {
+				background-color: var(--uilib-list-highlight-color);
+			}
+		}
+
+		&:not(&--inverse, &--numbered) li.uilib-list__highlight-item::before {
+			background-color: var(--uilib-list-highlight-color);
+		}
+
+		li:has(&__hint) {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			gap: 0 var(--uilib-spacing-200);
+			align-items: baseline;
+
+			> :not(.uilib-list__hint) {
+				grid-column: 1;
+			}
+
+			.uilib-list__icon,
+			.uilib-list__image {
+				grid-column: unset;
+			}
+		}
+
+		&__hint {
+			grid-row: 1 / span 20;
+			grid-column: 2;
+		}
 	}
 }
 
@@ -197,6 +246,8 @@ $uilib-list-included: false !default;
 	& > li {
 		padding-left: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
 
+		counter-increment: list-item;
+
 		&::before {
 			left: 0;
 			content: counters(list-item, '.') '.';

package/scss/lib/list/_variables.scss

@@ -7,4 +7,5 @@ $uilib-list-variables: (
 	image-radius: var(--uilib-border-radius-100),
 	image-alt-radius: var(--uilib-border-radius-circle),
 	multiline-title-font: var(--uilib-typography-label-medium),
+	highlight-color: var(--uilib-color-text-promotion),
 ) !default;

package/scss/lib/patterns/review-card/_index.scss

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

package/scss/lib/patterns/review-card/_mixins.scss

@@ -0,0 +1,283 @@
+// Review card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../../cards/card/mixins' as *;
+@use '../../divider/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../ratings-reviews/range-icons/mixins' as *;
+@use '../../ratings-reviews/range-icons-group/mixins' as *;
+
+$uilib-review-card-included: false !default;
+
+@mixin uilib-review-card() {
+	@if not $uilib-review-card-included {
+		$uilib-review-card-included: true !global;
+
+		@include uilib-card;
+		@include uilib-divider;
+		@include uilib-link;
+		@include uilib-ratings-range-icons;
+		@include uilib-ratings-range-icons-group;
+		@include uilib-review-card-master;
+	}
+}
+
+@mixin uilib-review-card-master() {
+	.uilib-review-card {
+		container-name: uilib-review-card;
+		container-type: inline-size;
+
+		&__review {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-400);
+			align-items: flex-start;
+
+			width: 100%;
+		}
+
+		&__logo {
+			flex: 0 0 auto;
+
+			height: 1.125rem; /* 18 / 16 */
+		}
+
+		&__overall-rating {
+			display: flex;
+		}
+
+		&__divider {
+			width: 100%;
+			margin: 0;
+		}
+
+		.uilib-ratings-range-icons-group {
+			width: 100%;
+			max-width: min(100%, 20rem);
+			margin: 0;
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--dual,
+		&--compact {
+			.uilib-review-card {
+				&__review {
+					display: flex;
+					flex-flow: row wrap;
+					gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+					justify-content: space-between;
+					align-items: flex-end;
+
+					&::before {
+						content: '';
+
+						order: 2;
+
+						display: block;
+						flex-basis: 100%;
+					}
+				}
+
+				&__logo {
+					order: 1;
+				}
+
+				&__overall-rating,
+				&__link {
+					order: 3;
+				}
+
+				&__link {
+					margin-top: var(--uilib-spacing-100);
+				}
+
+				&__overall-rating {
+					flex: 1 1 0;
+				}
+
+				&__divider {
+					display: none;
+				}
+			}
+
+			.uilib-ratings-range-icons__details {
+				flex-basis: 100%;
+			}
+
+			.uilib-ratings-range-icons-group {
+				display: none;
+			}
+
+			.uilib-ratings-range-icons__description {
+				order: -1;
+
+				flex-basis: 100%;
+			}
+		}
+
+		&--compact {
+			.uilib-ratings-range-icons__value {
+				font: var(--uilib-typography-component-heading-medium-strong);
+			}
+		}
+
+		&--dual {
+			.uilib-review-card__overall-rating {
+				display: grid;
+				grid-template-columns: auto 1fr;
+			}
+
+			.uilib-ratings-range-icons__value,
+			.uilib-ratings-range-icons__score {
+				grid-row: 1;
+			}
+
+			.uilib-ratings-range-icons__details {
+				grid-column: 1 / -1;
+			}
+
+			.uilib-card__content-container {
+				display: flex;
+				flex-flow: column;
+				gap: var(--uilib-spacing-400);
+				align-items: flex-start;
+
+				&::before {
+					content: '';
+
+					order: 2;
+
+					align-self: stretch;
+
+					border: 0 var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+					border-top-width: var(--uilib-stroke-size-025);
+				}
+
+				.uilib-review-card {
+					&__review {
+						order: 3;
+					}
+
+					&__review:first-child {
+						order: 1;
+					}
+				}
+			}
+
+			.uilib-ratings-range-icons__description {
+				display: none;
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-review-card (min-width: 20rem) {
+				.uilib-card__content-container {
+					flex-flow: row nowrap;
+
+					&::before {
+						align-self: stretch;
+
+						border-top-width: 0;
+						border-left-width: var(--uilib-stroke-size-025);
+					}
+				}
+			}
+		}
+
+		&:not(&--dual, &--compact) {
+			@include uilib-review-card-default;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-review-card style(--uilib-review-card-layout: default) {
+			@include uilib-review-card-default;
+
+			.uilib-review-card {
+				&__review {
+					flex-flow: column;
+					gap: var(--uilib-spacing-400);
+					align-items: flex-start;
+
+					&::before {
+						display: none;
+					}
+
+					&:not(:first-child) {
+						display: none;
+					}
+				}
+
+				&__logo,
+				&__overall-rating,
+				&__link {
+					order: unset;
+				}
+
+				&__overall-rating {
+					grid-template-columns: auto 1fr;
+				}
+
+				&__divider {
+					display: block;
+				}
+			}
+
+			.uilib-ratings-range-icons__value {
+				grid-row: 1 / span 3;
+			}
+
+			.uilib-ratings-range-icons__score {
+				grid-row: unset;
+			}
+
+			.uilib-ratings-range-icons__details {
+				grid-column: unset;
+			}
+
+			.uilib-card__content-container {
+				display: block;
+
+				&::before {
+					display: none;
+				}
+			}
+
+			.uilib-ratings-range-icons__details {
+				flex-basis: unset;
+			}
+
+			.uilib-ratings-range-icons-group {
+				display: none;
+			}
+
+			.uilib-ratings-range-icons__description {
+				order: unset;
+
+				display: block;
+				flex-basis: unset;
+			}
+
+			.uilib-ratings-range-icons-group {
+				display: flex;
+			}
+		}
+	}
+}
+
+@mixin uilib-review-card-default() {
+	.uilib-review-card__overall-rating {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+		align-items: start;
+
+		.uilib-ratings-range-icons__value {
+			grid-row: 1 / span 3;
+
+			font: var(--uilib-typography-heading-xxlarge);
+		}
+	}
+}

package/scss/lib/patterns/review-card/_variables.scss

@@ -0,0 +1,3 @@
+// Review card / _variables
+
+$uilib-review-card-variables: () !default;

package/scss/lib/ratings-reviews/range-icons/_mixins.scss

@@ -22,7 +22,8 @@ $uilib-ratings-range-icons-included: false !default;
 			.uilib-ratings-range-icons--star,
 			.uilib-ratings-range-icons--sun,
 			.uilib-ratings-range-icons--customer,
-			.uilib-ratings-range-icons--tripadvisor {
+			.uilib-ratings-range-icons--tripadvisor,
+			.uilib-ratings-range-icons--holidaycheck {
 				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
 					&::after {
 						inline-size: calc(var(--icon-size) * #{$score-key});
@@ -43,7 +44,8 @@ $uilib-ratings-range-icons-included: false !default;
 		}
 
 		@if $score-key > 5 {
-			.uilib-ratings-range-icons--sun {
+			.uilib-ratings-range-icons--sun,
+			.uilib-ratings-range-icons--holidaycheck {
 				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
 					&::after {
 						inline-size: calc(var(--icon-size) * #{$score-key});
@@ -106,6 +108,12 @@ $uilib-ratings-range-icons-included: false !default;
 			--rating-max: 5;
 		}
 
+		&--holidaycheck {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-holidaycheck-rating-icon);
+			--tile-bg-checked-icon: var(--uilib-ratings-range-icons-holidaycheck-rating-checked-icon);
+			--rating-max: 6;
+		}
+
 		&--tui-t {
 			--tile-bg-icon: var(--uilib-ratings-range-icons-tui-t-rating-icon);
 			--rating-max: 5;
@@ -149,6 +157,7 @@ $uilib-ratings-range-icons-included: false !default;
 
 		&--inverse {
 			.uilib-ratings-range-icons__value,
+			.uilib-ratings-range-icons__description,
 			.uilib-ratings-range-icons__plus,
 			.uilib-ratings-range-icons__label {
 				color: var(--uilib-color-text-inverse);
@@ -189,6 +198,11 @@ $uilib-ratings-range-icons-included: false !default;
 			}
 		}
 
+		&__description {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-small-strong);
+		}
+
 		&__value {
 			color: var(--uilib-color-text-strong);
 			font: var(--uilib-typography-label-small-strong);

package/scss/lib/ratings-reviews/range-icons/_variables.scss

@@ -20,6 +20,8 @@ $uilib-ratings-range-icons-variables: (
 	customer-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/customer-checked.svg'),
 	tui-t-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-t.svg'),
 	tui-t-plus-color: map.get($uilib-primitives, 'color-blue-100'),
+	holidaycheck-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/holidaycheck-unchecked.svg'),
+	holidaycheck-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/holidaycheck-checked.svg'),
 ) !default;
 $uilib-rating-scores: (
 	0: '00',