@tui/design-system 5.0.0-beta.1 → 5.0.0-beta.5

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

@@ -0,0 +1,88 @@
+@use '../../utility/mixins' as *;
+@use './variables' as *;
+
+// Builds rating range bar
+@mixin uilib-ratings-range-bar() {
+	.uilib-ratings-range-bar {
+		/* Defaults (override per variant) */
+		--percentage: 0;
+
+		display: inline-flex;
+		flex-direction: column;
+
+		/* Visually hidden helper */
+		&--hidden {
+			@include uilib-visually-hidden;
+		}
+
+		// /* Variant-specific configurations */
+		&--tripadvisor {
+			flex-direction: row;
+			gap: var(--uilib-spacing-600);
+		}
+
+		&--tripadvisor &__bar {
+			width: calc(var(--uilib-ratings-range-bar-tripadvisor-bar-width));
+
+			background: var(--uilib-ratings-range-bar-tripadvisor-bar-background);
+
+			&::before {
+				background-color: var(--uilib-ratings-range-bar-tripadvisor-bar-color);
+			}
+		}
+
+		&--tripadvisor &__content {
+			gap: var(--uilib-spacing-200);
+		}
+
+		&-group {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uilib-spacing-300);
+
+			&:has(.uilib-ratings-range-bar--tripadvisor) {
+				gap: var(--uilib-spacing-100);
+			}
+		}
+
+		&__label {
+			display: inline-flex;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+
+			font-size: 0.875rem;
+		}
+
+		&__icon {
+			color: var(--uilib-ratings-range-bar-icon-color);
+		}
+
+		&__content {
+			display: flex;
+			gap: var(--uilib-spacing-300);
+			align-items: center;
+		}
+
+		&__bar {
+			width: var(--uilib-ratings-range-bar-bar-width);
+			height: 14px;
+
+			border-radius: var(--uilib-border-radius-100);
+
+			background: var(--uilib-ratings-range-bar-bar-background);
+
+			overflow: hidden;
+
+			&::before {
+				content: '';
+
+				display: block;
+
+				width: calc(var(--percentage) * 1%);
+				height: 100%;
+
+				background: var(--uilib-ratings-range-bar-bar-color);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,16 @@
+@use '../../../variables/env-variables' as *;
+@use '../../../variables/primitives' as *;
+@use 'sass:map';
+
+// Range icons rating specific variables to allow theming
+$uilib-ratings-range-bar-variables: (
+	bar-width: 11.5rem,
+	// 184px / 16
+	bar-color: var(--uilib-color-core-brand),
+	bar-background: var(--uilib-color-core-surface),
+	tripadvisor-bar-width: 6.5625rem,
+	// 105px / 16
+	tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor),
+	tripadvisor-bar-background: var(--uilib-color-other-disabled-soft),
+	icon-color: var(--uilib-color-status-info-icon),
+) !default;

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

@@ -0,0 +1,3 @@
+// rating range icons / index
+@use 'mixins' as *;
+@include uilib-ratings-range-icons;

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

@@ -0,0 +1,200 @@
+@use '../../utility/mixins' as *;
+@use './variables' as *;
+@use 'sass:math';
+
+// Builds rating (range icons) with GAP IN SVG TILE
+@mixin uilib-ratings-range-icons() {
+	/* Score value modifiers */
+	@each $score-key, $score-value in $uilib-rating-scores {
+		@if $score-key <= 5 {
+			.uilib-ratings-range-icons--star,
+			.uilib-ratings-range-icons--sun,
+			.uilib-ratings-range-icons--tripadvisor {
+				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
+					&::after {
+						inline-size: calc(var(--icon-size) * #{$score-key});
+					}
+				}
+			}
+		}
+
+		// For tui-t variant, only generate whole number scores (no decimals)
+		@if math.floor($score-key) == $score-key and $score-key <= 5 {
+			.uilib-ratings-range-icons--tui-t {
+				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
+					&::before {
+						inline-size: calc(var(--icon-size) * #{$score-key});
+					}
+				}
+			}
+		}
+
+		@if $score-key > 5 {
+			.uilib-ratings-range-icons--sun {
+				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
+					&::after {
+						inline-size: calc(var(--icon-size) * #{$score-key});
+					}
+				}
+			}
+		}
+	}
+
+	.uilib-ratings-range-icons {
+		/* Defaults (override per variant) */
+		--rating-max: 5; /* star count */
+		--icon-size: var(--uilib-icon-size-xsmall);
+		--tile-bg-icon: var(--uilib-ratings-range-icons-star-rating-icon);
+		--tile-bg-icon-checked: var(--uilib-ratings-range-icons-star-rating-icon-checked);
+
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		/* Visually hidden helper */
+		&--hidden {
+			@include uilib-visually-hidden;
+		}
+
+		/* Size modifier */
+		&--large {
+			--icon-size: var(--uilib-icon-size-medium);
+			min-height: var(--icon-size);
+		}
+
+		/* Variant-specific configurations */
+		&--star {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-star-rating-icon);
+			--tile-bg-icon-checked: var(--uilib-ratings-range-icons-star-rating-icon-checked);
+			--rating-max: 5;
+		}
+
+		&--sun {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-sun-rating-icon);
+			--tile-bg-icon-checked: var(--uilib-ratings-range-icons-sun-rating-icon-checked);
+			--rating-max: 6;
+		}
+
+		&--tripadvisor {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-tripadvisor-rating-icon);
+			--tile-bg-icon-checked: var(--uilib-ratings-range-icons-tripadvisor-rating-icon-checked);
+			--rating-max: 5;
+		}
+
+		&--tui-t {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-tui-t-rating-icon);
+			--rating-max: 5;
+			padding-left: 0;
+
+			.uilib-ratings-range-icons__score {
+				padding-left: 0;
+
+				&::before {
+					position: relative;
+					inset: auto;
+
+					block-size: var(--icon-size);
+
+					background-image: var(--uilib-ratings-range-icons-tui-t-rating-icon);
+					background-repeat: repeat-x;
+				}
+
+				&::after {
+					display: none;
+				}
+			}
+
+			.uilib-ratings-range-icons__caption {
+				margin-left: var(--uilib-spacing-050);
+			}
+
+			/* Plus label */
+			.uilib-ratings-range-icons__plus {
+				position: relative;
+
+				display: inline-flex;
+				align-items: center;
+
+				inline-size: auto;
+				margin: 0 var(--uilib-spacing-050) 0 var(--uilib-spacing-100);
+
+				color: var(--uilib-ratings-range-icons-tui-t-plus-color);
+				font-weight: var(--uilib-font-weight-bold);
+				font-size: 0.75rem;
+
+				background: none;
+			}
+
+			&.uilib-ratings-range-icons--inverse {
+				.uilib-ratings-range-icons__plus,
+				.uilib-ratings-range-icons__label {
+					color: var(--uilib-color-text-inverse);
+				}
+			}
+		}
+
+		&__details {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uilib-spacing-100);
+			align-items: baseline;
+		}
+
+		&__label {
+			margin-left: var(--uilib-spacing-050);
+		}
+
+		/* Score element styling */
+		&__score {
+			position: relative;
+
+			display: inline-flex;
+			align-items: center;
+
+			min-height: calc(var(--icon-size) * var(--uilib-line-height-body));
+
+			/* Space to the left for the mask strip if label/caption sits inline */
+			padding-left: calc(var(--icon-size) * var(--rating-max) + var(--uilib-spacing-100));
+
+			/* Base strip (::before) and filled overlay (::after) */
+			&::before,
+			&::after {
+				position: absolute;
+				inset-block: 0;
+				inset-inline-start: 0;
+				top: 0;
+				left: 0;
+				content: '';
+
+				width: calc(var(--icon-size) * var(--rating-max));
+				height: calc(var(--icon-size) * var(--uilib-line-height-body));
+
+				background-color: transparent;
+				background-image: var(--tile-bg-icon);
+				background-repeat: repeat-x;
+				background-position: left center;
+				background-size: var(--icon-size) 100%;
+			}
+
+			/* Filled row color — WIDTH set by score modifiers below */
+			&::after {
+				width: 0;
+
+				background-image: var(--tile-bg-icon-checked);
+			}
+		}
+
+		/* Leading image */
+		&__leading-image {
+			display: inline-block;
+
+			width: var(--uilib-icon-size-medium);
+			height: calc(var(--uilib-font-size-root) * var(--uilib-line-height-body));
+			margin-right: var(--uilib-spacing-100);
+
+			background-image: var(--uilib-ratings-range-icons-tripadvisor-logo);
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+	}
+}

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

@@ -0,0 +1,31 @@
+@use '../../../variables/env-variables' as *;
+@use '../../../variables/primitives' as *;
+@use 'sass:map';
+
+// Range icons rating specific variables to allow theming
+$uilib-ratings-range-icons-variables: (
+	tripadvisor-logo: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-logo-small.svg'),
+	tripadvisor-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-unchecked.svg'),
+	tripadvisor-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-checked.svg'),
+	sun-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-unchecked.svg'),
+	sun-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-checked.svg'),
+	star-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-unchecked.svg'),
+	star-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-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'),
+) !default;
+$uilib-rating-scores: (
+	0: '00',
+	0.5: '05',
+	1: '10',
+	1.5: '15',
+	2: '20',
+	2.5: '25',
+	3: '30',
+	3.5: '35',
+	4: '40',
+	4.5: '45',
+	5: '50',
+	5.5: '55',
+	6: '60',
+) !default;

package/scss/lib/ratings-reviews/range-icons-group/_index.scss

@@ -0,0 +1,3 @@
+// rating range icons group / index
+@use 'mixins' as *;
+@include uilib-ratings-range-icons-group;

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

@@ -0,0 +1,26 @@
+@use '../../utility/mixins' as *;
+
+@mixin uilib-ratings-range-icons-group() {
+	.uilib-ratings-range-icons-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-100);
+
+		max-width: max-content;
+
+		&__category {
+			@include uilib-text-truncate;
+		}
+
+		&__item {
+			display: flex;
+			gap: var(--uilib-spacing-600);
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.uilib-ratings-range-icons {
+			margin: 0;
+		}
+	}
+}

package/scss/lib/richtext/_index.scss

@@ -0,0 +1,3 @@
+// rich text / index
+@use 'mixins' as *;
+@include uilib-richtext;

package/scss/lib/richtext/_mixins.scss

@@ -0,0 +1,136 @@
+// rich text / _mixins
+@use '../divider/mixins' as *;
+@use '../link/mixins' as *;
+@use '../list/mixins' as *;
+
+// Builds rich text
+@mixin uilib-richtext() {
+	.uilib-richtext {
+		color: var(--uilib-color-text-body);
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 0 0 var(--uilib-spacing-200);
+
+			color: var(--uilib-color-text-strong);
+		}
+
+		h2 {
+			font: var(--uilib-typography-heading-xxlarge);
+		}
+
+		h3 {
+			font: var(--uilib-typography-heading-xlarge);
+		}
+
+		h4 {
+			font: var(--uilib-typography-heading-large);
+		}
+
+		h5 {
+			font: var(--uilib-typography-heading-medium);
+		}
+
+		h6 {
+			font: var(--uilib-typography-heading-small);
+		}
+
+		p {
+			margin: 0 0 var(--uilib-spacing-400);
+
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-large);
+		}
+
+		*:not(hr) + h2,
+		*:not(hr) + h3,
+		*:not(hr) + h4,
+		*:not(hr) + h5,
+		*:not(hr) + h6 {
+			margin-top: var(--uilib-spacing-600);
+		}
+
+		hr {
+			margin: var(--uilib-spacing-200) 0;
+
+			@include uilib-divider-basic;
+		}
+
+		p + hr {
+			margin-top: calc(var(--uilib-spacing-200) * -1);
+		}
+
+		& > :last-child {
+			margin-bottom: 0;
+		}
+
+		a {
+			@include uilib-link-base;
+		}
+
+		ul,
+		ol {
+			@include uilib-list-base;
+		}
+
+		ol {
+			@include uilib-list-ordered;
+		}
+	}
+
+	.uilib-richtext--component {
+		h2 {
+			font: var(--uilib-typography-component-heading-xlarge);
+		}
+
+		h3 {
+			font: var(--uilib-typography-component-heading-large);
+		}
+
+		h4 {
+			font: var(--uilib-typography-component-heading-medium);
+		}
+
+		h5,
+		h6 {
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		p {
+			font: var(--uilib-typography-body-medium);
+		}
+	}
+
+	.uilib-richtext--inverse {
+		color: var(--uilib-color-text-inverse);
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			color: var(--uilib-color-text-inverse);
+		}
+
+		hr {
+			@include uilib-divider-basic(true);
+		}
+
+		a {
+			@include uilib-link-inverse;
+		}
+
+		ul,
+		ol {
+			@include uilib-list-inverse;
+		}
+
+		ol {
+			@include uilib-list-ordered-inverse;
+		}
+	}
+}

package/scss/lib/scroller/_index.scss

@@ -0,0 +1,4 @@
+// scroller / index
+@use 'variables' as *;
+@use 'mixins' as *;
+@include uilib-scroller;

package/scss/lib/scroller/_mixins.scss

@@ -0,0 +1,130 @@
+// scroller / _mixins
+@use 'variables' as *;
+@use '../utility/mixins' as *;
+
+// Builds scroller
+@mixin uilib-scroller() {
+	@property --uilib-scroller-start-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@property --uilib-scroller-end-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@keyframes uilib-scrollfade {
+		0% {
+			--uilib-scroller-start-fade: 0;
+		}
+
+		10%,
+		100% {
+			--uilib-scroller-start-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		0%,
+		90% {
+			--uilib-scroller-end-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		100% {
+			--uilib-scroller-end-fade: 0;
+		}
+	}
+
+	.uilib-scroller {
+		$mask-vertical:
+			linear-gradient(to bottom, #0000, #ffff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
+			linear-gradient(to right, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
+		$mask-horizontal:
+			linear-gradient(to right, #0000, #fff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
+			linear-gradient(to bottom, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
+
+		position: relative;
+
+		display: block;
+
+		overflow: hidden;
+
+		&:has(.uilib-scroller__inner:focus-visible) {
+			border-radius: var(--uilib-scroller-focus-radius);
+
+			box-shadow: var(--uilib-focus-default);
+
+			&::before {
+				border-radius: var(--uilib-scroller-focus-radius);
+			}
+		}
+
+		&__inner {
+			width: 100%;
+			height: 100%;
+
+			overflow-x: hidden;
+			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+			overflow-y: auto;
+			-webkit-mask: #{$mask-vertical};
+			mask: #{$mask-vertical};
+
+			animation: uilib-scrollfade;
+			animation-timeline: --uilib-scrollfade;
+			scroll-timeline: --uilib-scrollfade y;
+
+			/* Edge legacy */
+			-ms-overflow-style: initial;
+
+			/* Firefox and new Chrome, Edge and Opera */
+			scrollbar-color: var(--uilib-scroller-thumb-color) transparent;
+			scrollbar-width: auto;
+
+			&:focus-visible::before {
+				display: none;
+			}
+
+			/* Chrome, Edge, Opera, and Safari */
+			&::-webkit-scrollbar {
+				display: initial;
+
+				width: var(--uilib-scroller-thumb-size);
+				height: var(--uilib-scroller-thumb-size);
+				-webkit-overflow-scrolling: auto;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				border: var(--uilib-spacing-100) solid transparent;
+				border-radius: var(--uilib-scroller-thumb-radius);
+
+				background-color: var(--uilib-scroller-thumb-color);
+				background-clip: padding-box;
+
+				cursor: pointer;
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--horizontal &__inner {
+			overflow-x: auto;
+			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+			overflow-y: hidden;
+			-webkit-mask: #{$mask-horizontal};
+			mask: #{$mask-horizontal};
+
+			scroll-timeline: --uilib-scrollfade x;
+		}
+
+		&--nofade &__inner {
+			-webkit-mask: none;
+			mask: none;
+		}
+	}
+}

package/scss/lib/scroller/_variables.scss

@@ -0,0 +1,9 @@
+$uilib-scroller-variables: (
+	thumb-size: var(--uilib-spacing-400),
+	thumb-radius: var(--uilib-border-radius-pill),
+	thumb-color: var(--uilib-color-other-scroll-handle),
+	fade-size: var(--uilib-spacing-400),
+	focus-radius: var(--uilib-border-radius-100),
+	// Do not advertise this. This is for the JS to use
+	bar-size: var(--uilib-spacing-400),
+) !default;

package/scss/lib/show-more-less/_index.scss

@@ -0,0 +1,3 @@
+// show more less / index
+@use 'mixins' as *;
+@include uilib-show-more-less;