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

package/scss/lib/cards/search/_mixins.scss

@@ -15,7 +15,7 @@
 
 		background: var(--uilib-color-canvas-default);
 
-		box-shadow: var(--uilib-elevation-0);
+		box-shadow: var(--uilib-elevation-100);
 
 		&__image-content {
 			grid-area: uilib-card-search-image;
@@ -102,7 +102,7 @@
 
 			border-radius: var(--uilib-card-search-radius);
 
-			box-shadow: var(--uilib-elevation-0);
+			box-shadow: var(--uilib-elevation-100);
 		}
 
 		&__main-content {
@@ -172,7 +172,7 @@
 				margin-top: 0;
 				margin-left: calc(var(--uilib-card-search-radius-spacing) * -1);
 
-				box-shadow: var(--uilib-elevation-0);
+				box-shadow: var(--uilib-elevation-100);
 			}
 
 			&__supplementary-container {
@@ -319,7 +319,7 @@
 
 			background: var(--uilib-card-search-color-flagship);
 
-			box-shadow: var(--uilib-elevation-0);
+			box-shadow: var(--uilib-elevation-100);
 
 			.uilib-card-search {
 				box-shadow: none;

package/scss/lib/flight-details/_index.scss

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

package/scss/lib/flight-details/_mixins.scss

@@ -0,0 +1,468 @@
+// flight-details / _mixins
+@use '../utility/mixins' as *;
+
+// Builds flight-details
+@mixin uilib-flight-details() {
+	.uilib-flight-details {
+		display: block;
+		container-type: inline-size;
+		container-name: uilib-flight-details;
+
+		&__outbound,
+		&__return {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-100);
+		}
+
+		&__title {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100);
+			align-items: center;
+
+			&::before {
+				content: '';
+
+				order: 1;
+
+				display: block;
+
+				width: calc(var(--uilib-spacing-300) / 4);
+
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+				border-radius: var(--uilib-border-radius-circle);
+
+				background: var(--uilib-color-text-body);
+			}
+
+			&-type {
+				order: 0;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-label-medium-strong);
+			}
+
+			&-date {
+				order: 2;
+
+				display: flex;
+				flex-flow: row wrap;
+				gap: var(--uilib-spacing-100);
+				align-items: center;
+
+				color: var(--uilib-color-text-body);
+				font: var(--uilib-typography-body-medium);
+			}
+		}
+
+		&__airline {
+			display: flex;
+			flex-flow: row nowrap;
+			gap: 0 1ex;
+			align-items: flex-start;
+
+			margin-bottom: calc(var(--uilib-spacing-600) * -1);
+			padding: var(--uilib-spacing-200) 0;
+		}
+
+		&__airline-logo {
+			max-height: 1.375rem; /* 22 / 16 */
+			margin-top: calc(calc(var(--uilib-spacing-050) / 2) * -1);
+		}
+
+		&-leg {
+			display: grid;
+			grid-template:
+				'originTime originInfo'
+				'destinationTime destinationInfo'
+				/ auto 1fr;
+			gap: var(--uilib-spacing-200) var(--uilib-spacing-300);
+
+			margin-top: var(--uilib-spacing-600);
+			padding-left: var(--uilib-spacing-600);
+
+			&--indirect-concise {
+				display: none;
+			}
+
+			&:has(.uilib-flight-details-leg__type, .uilib-flight-details-leg__duration) {
+				grid-template-areas:
+					'type duration'
+					'originTime originInfo'
+					'destinationTime destinationInfo';
+			}
+
+			&:has(.uilib-flight-details-leg__connection-time, .uilib-flight-details-leg__connection-details) {
+				grid-template-areas:
+					'originTime originInfo'
+					'destinationTime destinationInfo'
+					'connectionTime connectionDetails';
+			}
+
+			&:has(.uilib-flight-details-leg__type, .uilib-flight-details-leg__duration):has(
+					.uilib-flight-details-leg__connection-time,
+					.uilib-flight-details-leg__connection-details
+				) {
+				grid-template-areas:
+					'type duration'
+					'originTime originInfo'
+					'destinationTime destinationInfo'
+					'connectionTime connectionDetails';
+			}
+
+			&__type,
+			&__duration {
+				grid-area: type;
+
+				color: var(--uilib-color-text-body);
+				font: var(--uilib-typography-body-medium);
+			}
+
+			&__duration {
+				grid-area: duration;
+			}
+
+			&__origin-time,
+			&__destination-time {
+				grid-area: originTime;
+
+				position: relative;
+
+				align-self: stretch;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-component-heading-large-strong);
+
+				&::before {
+					position: absolute;
+					top: 0.3rem;
+					left: calc(var(--uilib-spacing-400) * -1);
+					content: '';
+
+					width: calc(var(--uilib-spacing-500) / 2);
+
+					aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+					border-radius: var(--uilib-border-radius-circle);
+
+					background: var(--uilib-color-border-brand-strong);
+
+					transform: translate(-50%, 0);
+				}
+
+				&::after {
+					position: absolute;
+					top: 0.3rem;
+					left: calc(var(--uilib-spacing-400) * -1);
+					bottom: calc(var(--uilib-spacing-100) * -1);
+					content: '';
+
+					border-right: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-color-border-brand-strong);
+
+					transform: translate(-50%, 0);
+				}
+			}
+
+			&__destination-time {
+				grid-area: destinationTime;
+
+				display: flex;
+				flex-flow: column;
+				align-items: flex-start;
+				align-self: start;
+
+				&::before {
+					top: unset;
+					bottom: 0.4rem;
+				}
+
+				&::after {
+					top: calc(var(--uilib-spacing-100) * -1);
+					bottom: 0.4rem;
+				}
+			}
+
+			&__origin,
+			&__destination {
+				grid-area: originInfo;
+
+				display: flex;
+				flex-flow: row nowrap;
+				gap: 0 1ex;
+				align-items: flex-end;
+
+				padding-bottom: var(--uilib-spacing-050);
+
+				overflow: hidden;
+			}
+
+			&__destination {
+				grid-area: destinationInfo;
+			}
+
+			&__origin-name,
+			&__destination-name {
+				grid-area: originName;
+
+				color: var(--uilib-color-text-body);
+				font: var(--uilib-typography-body-medium);
+				white-space: nowrap;
+				text-overflow: ellipsis;
+
+				overflow: hidden;
+			}
+
+			&__origin-code,
+			&__destination-code {
+				grid-area: originCode;
+
+				color: var(--uilib-color-text-body);
+				font: var(--uilib-typography-body-medium-strong);
+			}
+
+			&__destination-name {
+				grid-area: destinationName;
+			}
+
+			&__destination-code {
+				grid-area: destinationCode;
+			}
+
+			&__connection-time {
+				grid-area: connectionTime;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-label-small-strong);
+			}
+
+			&__connection-details {
+				grid-area: connectionDetails;
+
+				color: var(--uilib-color-text-body);
+				font: var(--uilib-typography-body-small);
+			}
+
+			&__tooltip.uilib-tooltip {
+				margin-top: calc(var(--uilib-spacing-100) * -1);
+
+				font: var(--uilib-typography-body-medium);
+			}
+		}
+
+		&__arrival-date {
+			display: flex;
+			flex-flow: row wrap;
+			gap: 0 var(--uilib-spacing-100);
+			align-items: baseline;
+
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-small-strong);
+		}
+
+		&__outbound--indirect &__arrival-date::before,
+		&__return--indirect &__arrival-date::before {
+			content: '';
+
+			order: 1;
+
+			display: block;
+			align-self: center;
+
+			width: calc(var(--uilib-spacing-300) / 4);
+
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			border-radius: var(--uilib-border-radius-circle);
+
+			background: var(--uilib-color-text-body);
+		}
+
+		&__duration {
+			order: 2;
+		}
+
+		&__outbound--indirect .uilib-flight-details__title + .uilib-flight-details__airline,
+		&__return--indirect .uilib-flight-details__title + .uilib-flight-details__airline {
+			display: none;
+		}
+
+		&__group--collapsed {
+			.uilib-flight-details__outbound--indirect .uilib-flight-details__airline,
+			.uilib-flight-details__return--indirect .uilib-flight-details__airline,
+			.uilib-flight-details-leg:not(.uilib-flight-details-leg--direct),
+			.uilib-flight-details__arrival-date::before,
+			.uilib-flight-details__duration {
+				display: none;
+			}
+
+			.uilib-flight-details__title + .uilib-flight-details__airline {
+				display: flex;
+			}
+
+			.uilib-flight-details-leg.uilib-flight-details-leg--indirect-concise {
+				display: grid;
+			}
+		}
+
+		&__button-icon {
+			-webkit-mask-image: var(--uilib-flight-details-icon);
+			mask-image: var(--uilib-flight-details-icon);
+
+			transform: rotate(0deg);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
+		}
+
+		&__button[aria-expanded='true'] &__button-icon {
+			transform: rotate(180deg);
+		}
+
+		&__button.uilib-link {
+			margin-top: calc(var(--uilib-spacing-200) - var(--uilib-focus-gap));
+			margin-bottom: calc(var(--uilib-spacing-200) - var(--uilib-focus-gap));
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-flight-details (min-width: 15rem) {
+			.uilib-flight-details-leg--direct,
+			.uilib-flight-details-leg--indirect-concise {
+				grid-template:
+					'originTime type type destinationTime'
+					'originTime duration duration destinationTime'
+					'originName originName destinationName destinationName'
+					'originCode originCode destinationCode destinationCode'
+					/ auto 1fr 1fr auto;
+				gap: 0 var(--uilib-spacing-600);
+
+				padding-left: 0;
+
+				.uilib-flight-details-leg__type,
+				.uilib-flight-details-leg__duration {
+					position: relative;
+
+					justify-self: stretch;
+
+					padding-bottom: var(--uilib-spacing-100);
+
+					text-align: center;
+				}
+
+				.uilib-flight-details-leg__duration {
+					padding-top: var(--uilib-spacing-100);
+					padding-bottom: 0;
+
+					border-top: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-color-border-brand-strong);
+
+					&::before,
+					&::after {
+						position: absolute;
+						top: calc(calc(var(--uilib-stroke-size-050) / 2) * -1);
+						left: 0;
+						content: '';
+
+						width: calc(var(--uilib-spacing-500) / 2);
+
+						aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+						border-radius: var(--uilib-border-radius-circle);
+
+						background: var(--uilib-color-border-brand-strong);
+
+						transform: translate(-50%, -50%);
+					}
+
+					&::after {
+						left: unset;
+						right: 0;
+
+						transform: translate(50%, -50%);
+					}
+				}
+
+				.uilib-flight-details-leg__origin,
+				.uilib-flight-details-leg__destination {
+					display: contents;
+				}
+
+				.uilib-flight-details-leg__origin-time,
+				.uilib-flight-details-leg__destination-time {
+					align-self: center;
+
+					&::before,
+					&::after {
+						display: none;
+					}
+				}
+
+				.uilib-flight-details-leg__destination-time {
+					justify-self: end;
+				}
+
+				.uilib-flight-details-leg__destination-name,
+				.uilib-flight-details-leg__destination-code {
+					justify-self: end;
+
+					text-align: right;
+				}
+
+				.uilib-flight-details-leg__origin-name,
+				.uilib-flight-details-leg__destination-name {
+					max-width: 100%;
+				}
+			}
+
+			.uilib-flight-details-leg--indirect-concise .uilib-flight-details-leg__type::before {
+				position: absolute;
+				left: 50%;
+				bottom: calc(calc(var(--uilib-stroke-size-050) / 2) * -1);
+				content: '';
+				z-index: 1;
+
+				width: calc(var(--uilib-spacing-500) / 2);
+
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+				border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-color-border-brand-strong);
+				border-radius: var(--uilib-border-radius-circle);
+
+				background: var(--uilib-color-core-neutral);
+
+				transform: translate(-50%, 50%);
+			}
+		}
+
+		@container uilib-flight-details (min-width: 34rem) {
+			.uilib-flight-details {
+				&__group {
+					display: flex;
+					flex-flow: row nowrap;
+					gap: var(--uilib-spacing-200);
+
+					width: 100%;
+
+					.uilib-flight-details__outbound,
+					.uilib-flight-details__return {
+						flex-grow: 1;
+
+						width: 50%;
+					}
+
+					.uilib-flight-details__divider {
+						margin: 0 var(--uilib-spacing-200);
+
+						border-top-width: var(--uilib-stroke-size-025);
+						border-right-width: var(--uilib-stroke-size-025);
+					}
+				}
+			}
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+	}
+}

package/scss/lib/flight-details/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../variables/env-variables' as *;
+
+// Flight details specific variables to allow theming
+$uilib-flight-details-variables: (
+	icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/forms/input-chip/_mixins.scss

@@ -31,7 +31,7 @@
 
 				background-color: var(--uilib-input-chip-active-bg-color);
 
-				box-shadow: var(--uilib-elevation-100);
+				box-shadow: var(--uilib-elevation-200);
 			}
 
 			&:checked:hover + .uilib-input-chip__label {

package/scss/lib/forms/input-chip/_variables.scss

@@ -13,7 +13,7 @@ $uilib-input-chip-variables: (
 	active-bg-color: var(--uilib-color-other-active-state-tint),
 	active-border-color: var(--uilib-color-core-interaction),
 	active-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
-	box-shadow: var(--uilib-elevation-100),
+	box-shadow: var(--uilib-elevation-200),
 	disabled-text-color: var(--uilib-color-other-disabled-soft),
 	disabled-bg-color: var(--uilib-color-core-neutral),
 ) !default;

package/scss/lib/forms/input-switch/_index.scss

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

package/scss/lib/forms/input-switch/_mixins.scss

@@ -0,0 +1,122 @@
+// switch / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds Switch input
+@mixin uilib-input-switch() {
+	.uilib-form-row {
+		&--input-switch {
+			display: flex;
+			justify-self: flex-start;
+
+			width: fit-content;
+			margin-top: var(--uilib-spacing-200);
+			margin-bottom: var(--uilib-spacing-200);
+		}
+
+		&__input {
+			margin-top: 0;
+		}
+	}
+
+	.uilib-input-switch {
+		display: flex;
+		flex-wrap: nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: self-start;
+
+		margin-top: var(--uilib-spacing-050);
+		padding: var(--uilib-spacing-200) 0;
+
+		color: var(--uilib-color-text-body);
+		font: var(--uilib-typography-body-medium);
+
+		cursor: pointer;
+
+		&--title {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-form-row-label-font);
+		}
+
+		&:has(.uilib-input-switch__input[disabled]) {
+			cursor: auto;
+		}
+
+		&:has(.uilib-input-switch__input:focus-visible) {
+			@include uilib-focus;
+
+			&::before {
+				border-radius: var(--uilib-border-radius-100);
+			}
+		}
+
+		&__input {
+			position: absolute;
+
+			width: 0;
+			height: 0;
+
+			visibility: visible;
+
+			opacity: 0;
+
+			&:checked + .uilib-input-switch__track {
+				border-color: var(--uilib-input-switch-track-border-color-selected);
+
+				background-color: var(--uilib-input-switch-track-color-selected);
+
+				&::before {
+					background-color: var(--uilib-input-switch-thumb-color-selected);
+
+					transform: translateX(115%);
+				}
+			}
+
+			&[disabled] + .uilib-input-switch__track {
+				border-color: var(--uilib-input-switch-track-border-color-disabled);
+
+				background-color: var(--uilib-input-switch-track-color-disabled);
+
+				&::before {
+					background-color: var(--uilib-input-switch-thumb-color-selected);
+				}
+			}
+		}
+
+		&__track {
+			display: flex;
+			align-items: center;
+
+			width: var(--uilib-input-switch-track-width);
+			height: var(--uilib-input-switch-track-height);
+			min-width: var(--uilib-input-switch-track-width);
+			margin-top: calc(var(--uilib-spacing-050) * -1);
+			padding: var(--uilib-spacing-100);
+
+			border: var(--uilib-stroke-size-025) solid var(--uilib-input-switch-track-border-color);
+			border-radius: var(--uilib-input-switch-track-radius);
+
+			background-color: var(--uilib-input-switch-track-color);
+
+			&::before {
+				content: '';
+
+				display: block;
+
+				width: var(--uilib-input-switch-thumb-size);
+				height: var(--uilib-input-switch-thumb-size);
+
+				border-radius: var(--uilib-input-switch-thumb-radius);
+
+				background-color: var(--uilib-input-switch-thumb-color);
+
+				box-shadow: 0 0.06rem 0.125rem var(--uilib-color-other-elevation);
+
+				transform: translateX(0);
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
+			}
+		}
+	}
+}

package/scss/lib/forms/input-switch/_variables.scss

@@ -0,0 +1,18 @@
+@use '../../../variables/env-variables' as *;
+
+// Input switch specific variables to allow theming
+$uilib-input-switch-variables: (
+	track-color: var(--uilib-color-core-neutral),
+	track-color-selected: var(--uilib-color-core-interaction),
+	track-color-disabled: var(--uilib-color-other-disabled-soft),
+	track-border-color: var(--uilib-color-border-input),
+	track-border-color-selected: var(--uilib-color-border-interaction),
+	track-border-color-disabled: var(--uilib-color-other-disabled-soft),
+	track-height: 1.5rem,
+	track-width: 2.75rem,
+	/* 24 / 16 */ track-radius: var(--uilib-border-radius-pill),
+	thumb-size: 1rem,
+	/* 16 / 16 */ thumb-radius: var(--uilib-border-radius-circle),
+	thumb-color: var(--uilib-color-other-disabled-strong),
+	thumb-color-selected: var(--uilib-color-core-neutral),
+) !default;

package/scss/lib/forms/textarea/_index.scss

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