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

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/flyout-dropdown/_index.scss

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

package/scss/lib/flyout-dropdown/_mixins.scss

@@ -0,0 +1,124 @@
+@mixin uilib-flyout-dropdown() {
+	.uilib-flyout-dropdown {
+		@include uilib-flyout-dropdown-basic;
+	}
+
+	::before {
+		left: 50%;
+	}
+
+	.uilib-flyout-dropdown--left {
+		&::before {
+			left: 2.8125rem; /* 45px/16 */
+		}
+	}
+
+	.uilib-flyout-dropdown--right {
+		&::before {
+			left: calc(100% - 2.8125rem - var(--uilib-spacing-500)); /* 45px/16 */
+		}
+	}
+
+	.uilib-flyout-dropdown__content {
+		flex-grow: 1;
+
+		width: 100%;
+
+		overflow: hidden;
+
+		.uilib-flyout-dropdown__scroller-inner {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uilib-spacing-200);
+
+			@supports (-webkit-appearance: none) {
+				/* Safari-specific styles */
+				max-height: calc(100dvh - 16rem);
+			}
+		}
+	}
+
+	.uilib-flyout-dropdown__header,
+	.uilib-flyout-dropdown__footer {
+		display: flex;
+		flex-direction: row;
+
+		width: 100%;
+	}
+
+	.uilib-flyout-dropdown__header {
+		justify-content: space-between;
+
+		.uilib-flyout-dropdown-close-button {
+			position: absolute;
+			top: var(--uilib-spacing-100);
+			right: var(--uilib-spacing-100);
+
+			&:focus-visible {
+				position: absolute;
+			}
+		}
+	}
+
+	.uilib-flyout-dropdown__heading {
+		max-width: calc(100% - 44px);
+
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-component-heading-small);
+	}
+
+	.uilib-divider {
+		width: 100%;
+	}
+
+	.uilib-flyout-dropdown__footer {
+		gap: var(--uilib-spacing-400);
+		justify-content: flex-end;
+		align-items: center;
+	}
+}
+
+/* For internal use to support richText component */
+@mixin uilib-flyout-dropdown-basic() {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2000;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--uilib-spacing-200);
+	align-items: flex-start;
+
+	max-width: min(calc(100vw - var(--uilib-spacing-800)), 65.5rem); /* 1048px/16 */
+	max-height: calc(100dvh - var(--uilib-spacing-800));
+	margin-top: var(--uilib-spacing-400); /* 12px pointer/4px margin */
+	padding: var(--uilib-spacing-400);
+	box-sizing: border-box;
+
+	border: solid transparent;
+	border-radius: var(--uilib-border-radius-400);
+
+	background: var(--uilib-color-core-neutral);
+
+	filter: drop-shadow(0 0 0.5rem var(--uilib-color-other-elevation)); /* 0 0 8px 16px */
+
+	overflow: visible;
+
+	&::before {
+		position: absolute;
+		top: calc(var(--uilib-spacing-200) * -1);
+		left: 50%;
+		content: '';
+
+		width: var(--uilib-spacing-500);
+		height: var(--uilib-spacing-500);
+
+		border-radius: var(--uilib-border-radius-100);
+
+		background-color: var(--uilib-color-core-neutral);
+
+		transform: rotate(45deg);
+		transform-origin: center;
+	}
+}

package/scss/lib/forms/form-row/_index.scss

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

package/scss/lib/forms/form-row/_mixins.scss

@@ -0,0 +1,72 @@
+// form row / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds form row
+@mixin uilib-form-row() {
+	.uilib-form-row {
+		margin: var(--uilib-spacing-400) 0;
+		padding: 0;
+
+		&--reduced {
+			margin: var(--uilib-spacing-100) 0;
+		}
+
+		&__label {
+			padding: 0;
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-form-row-label-font);
+		}
+
+		&__hint {
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-medium);
+		}
+
+		&__input {
+			margin: var(--uilib-spacing-100) 0;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		&__error {
+			position: relative;
+
+			padding-left: var(--uilib-spacing-600);
+
+			color: var(--uilib-color-text-danger);
+			font: var(--uilib-typography-body-medium);
+
+			&::before {
+				position: absolute;
+				top: calc(calc(calc(var(--uilib-line-height-body) * var(--uilib-icon-size-xsmall)) - var(--uilib-icon-size-xsmall)) / 2);
+				left: 0;
+				content: '';
+
+				display: block;
+
+				width: var(--uilib-icon-size-xsmall);
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+				background: currentcolor;
+				background-repeat: no-repeat;
+				background-position: center center;
+				background-size: cover;
+				-webkit-mask-repeat: no-repeat;
+				mask-repeat: no-repeat;
+				-webkit-mask-position: center;
+				mask-position: center;
+				-webkit-mask-size: cover;
+				mask-size: cover;
+				-webkit-mask-image: var(--uilib-form-row-icon);
+				mask-image: var(--uilib-form-row-icon);
+			}
+		}
+
+		&__error-prefix {
+			@include uilib-visually-hidden;
+		}
+	}
+}

package/scss/lib/forms/form-row/_variables.scss

@@ -0,0 +1,7 @@
+@use '../../../variables/env-variables' as *;
+
+// Form row specific variables to allow theming
+$uilib-form-row-variables: (
+	label-font: var(--uilib-typography-label-medium),
+	icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/exclamation-mark-circled-filled.svg'),
+) !default;

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

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