@tui/design-system 1.7.0 → 1.9.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/edit-search/_index.scss

@@ -0,0 +1,3 @@
+// Edit search / index
+@use 'mixins' as *;
+@include uilib-edit-search;

package/scss/lib/patterns/edit-search/_mixins.scss

@@ -0,0 +1,98 @@
+// Edit search / _mixins
+@use 'sass:map';
+@use 'variables' as *;
+@use '../../../variables/breakpoints' as *;
+@use '../../utility/mixins' as *;
+@use '../../button/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../list/mixins' as *;
+
+$uilib-edit-search-included: false !default;
+
+@mixin uilib-edit-search() {
+	@if not $uilib-edit-search-included {
+		$uilib-edit-search-included: true !global;
+
+		@include uilib-button;
+		@include uilib-link;
+		@include uilib-list;
+		@include uilib-edit-search-master;
+	}
+}
+
+@mixin uilib-edit-search-master() {
+	.uilib-edit-search {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-600);
+		justify-content: space-between;
+		align-items: center;
+
+		padding: var(--uilib-spacing-200) var(--uilib-spacing-200) var(--uilib-spacing-200) var(--uilib-spacing-400);
+
+		color: var(--uilib-edit-search-text-color);
+
+		border-radius: var(--uilib-edit-search-radius);
+
+		background: var(--uilib-edit-search-bg-color);
+
+		&__content {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-100);
+		}
+
+		&__heading {
+			font: var(--uilib-typography-label-medium-strong);
+
+			&--hidden {
+				@include uilib-visually-hidden;
+			}
+		}
+
+		&__link:visited {
+			color: var(--uilib-color-text-link);
+			text-decoration-color: var(--uilib-link-decoration-color);
+		}
+
+		&__button {
+			align-self: flex-end;
+		}
+
+		&__list {
+			margin: 0;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@media (max-width: #{map.get($uilib-breakpoints, md)}) {
+			&__list {
+				display: -webkit-box;
+
+				text-align: left;
+				text-overflow: ellipsis;
+
+				overflow: hidden;
+				-webkit-line-clamp: 2;
+				line-clamp: 2;
+				-webkit-box-orient: vertical;
+
+				> li {
+					display: inline;
+
+					padding-left: 0;
+
+					&::before,
+					.uilib-icon {
+						display: none;
+					}
+
+					&:not(:last-child)::after {
+						content: ' | ';
+
+						display: inline;
+					}
+				}
+			}
+		}
+	}
+}

package/scss/lib/patterns/edit-search/_variables.scss

@@ -0,0 +1,7 @@
+// Edit search / _variables
+
+$uilib-edit-search-variables: (
+	radius: var(--uilib-border-radius-400),
+	bg-color: var(--uilib-color-core-surface),
+	text-color: var(--uilib-color-text-strong),
+) !default;

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

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