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

package/scss/lib/divider/_mixins.scss

@@ -0,0 +1,54 @@
+// divider / _mixins
+@use 'variables' as *;
+
+// Builds divider
+@mixin uilib-divider() {
+	.uilib-divider {
+		@include uilib-divider-basic;
+	}
+
+	.uilib-divider--vertical {
+		display: inline-flex;
+		flex-direction: column;
+
+		border-top-width: 0;
+		border-right-width: var(--uilib-stroke-size-025);
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@each $weight, $class in $uilib-divider-weight-selectors-config {
+		#{$class} {
+			border-top-width: var(--#{$weight});
+		}
+
+		#{$class}.uilib-divider--vertical {
+			border-top-width: 0;
+			border-right-width: var(--#{$weight});
+		}
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@each $color, $class in $uilib-divider-color-selectors-config {
+		#{$class} {
+			border-color: var(--#{$color});
+		}
+	}
+
+	.uilib-divider--dashed {
+		border-color: var(--uilib-color-border-dashed);
+		border-style: var(--uilib-stroke-style-dashed);
+	}
+}
+
+/* For internal use to support richText component */
+@mixin uilib-divider-basic($inverse: false) {
+	@if $inverse {
+		border-color: var(--uilib-color-border-inverse);
+	} @else {
+		margin: var(--uilib-spacing-200) 0;
+
+		border-color: var(--uilib-color-border-divider);
+		border-style: var(--uilib-stroke-style-solid);
+		border-top-width: var(--uilib-stroke-size-025);
+	}
+}

package/scss/lib/divider/_variables.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+/* Weight selectors */
+$uilib-divider-weight-selectors-default: (
+	'uilib-stroke-size-050': '.uilib-divider--medium',
+	'uilib-stroke-size-075': '.uilib-divider--heavy',
+);
+$uilib-divider-weight-selectors-custom: () !default;
+$uilib-divider-weight-selectors-config: map.merge($uilib-divider-weight-selectors-default, $uilib-divider-weight-selectors-custom);
+
+/* Colour selectors */
+$uilib-divider-color-selectors-default: (
+	'uilib-color-border-brand-strong': '.uilib-divider--color-strong',
+	'uilib-color-border-inverse': '.uilib-divider--color-inverse',
+);
+$uilib-divider-color-selectors-custom: () !default;
+$uilib-divider-color-selectors-config: map.merge($uilib-divider-color-selectors-default, $uilib-divider-color-selectors-custom);

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;

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

@@ -0,0 +1,216 @@
+// checkbox / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds checkbox
+@mixin uilib-input-checkbox() {
+	.uilib-input-checkbox {
+		&__input {
+			@include uilib-visually-hidden;
+		}
+
+		&__label {
+			position: relative;
+
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-300);
+			align-items: flex-start;
+
+			padding: var(--uilib-spacing-300);
+
+			border-radius: var(--uilib-border-radius-100);
+
+			&::before,
+			&::after {
+				content: '';
+
+				display: block;
+				flex-shrink: 0;
+
+				width: 1.25rem; /* 20px */
+				height: 1.25rem;
+
+				border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-input);
+				border-radius: var(--uilib-border-radius-100);
+
+				background: var(--uilib-color-core-neutral);
+
+				cursor: pointer;
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition:
+						border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						border-width var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+				}
+			}
+
+			&::after {
+				position: absolute;
+				top: var(--uilib-spacing-300);
+				left: var(--uilib-spacing-300);
+
+				color: var(--uilib-color-core-neutral);
+
+				border: none;
+
+				-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-input-checkbox-icon-checked);
+				mask-image: var(--uilib-input-checkbox-icon-checked);
+
+				transform: scale(0);
+
+				pointer-events: none;
+			}
+		}
+
+		&__input:checked + .uilib-input-checkbox__label {
+			&::before {
+				border-color: var(--uilib-color-core-interaction);
+
+				background-color: var(--uilib-color-core-interaction);
+			}
+
+			&::after {
+				transform: scale(1);
+			}
+		}
+
+		&__input:indeterminate + .uilib-input-checkbox__label {
+			&::before {
+				border-color: var(--uilib-color-core-interaction);
+				border-width: var(--uilib-stroke-size-050);
+
+				background-color: var(--uilib-color-core-neutral);
+			}
+
+			&::after {
+				background-color: var(--uilib-color-core-interaction);
+
+				-webkit-mask-image: var(--uilib-input-checkbox-icon-indeterminate);
+				mask-image: var(--uilib-input-checkbox-icon-indeterminate);
+
+				transform: scale(0.8);
+			}
+		}
+
+		.uilib-input-checkbox__label-content {
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-medium);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--title .uilib-input-checkbox__label-content {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		&--strong .uilib-input-checkbox__label-content {
+			color: var(--uilib-input-checkbox-text-color-strong);
+		}
+
+		&__input:focus-visible + .uilib-input-checkbox__label .uilib-input-checkbox__label-content {
+			@include uilib-focus;
+
+			/* stylelint-disable-next-line order/order */
+			position: static;
+
+			&::before {
+				border-radius: var(--uilib-border-radius-100);
+			}
+		}
+
+		&__input:disabled + .uilib-input-checkbox__label {
+			&::before {
+				border-color: var(--uilib-color-other-disabled-soft);
+
+				background: var(--uilib-color-other-disabled-soft);
+
+				cursor: default;
+			}
+
+			&::after {
+				cursor: default;
+			}
+		}
+
+		&__input:disabled:checked + .uilib-input-checkbox__label {
+			&::before {
+				border-color: var(--uilib-color-other-disabled-soft);
+
+				background: var(--uilib-color-other-disabled-soft);
+			}
+		}
+
+		&__input:disabled:indeterminate + .uilib-input-checkbox__label {
+			&::before {
+				border-color: var(--uilib-color-other-disabled-soft);
+
+				background-color: var(--uilib-color-core-neutral);
+			}
+
+			&::after {
+				background-color: var(--uilib-color-other-disabled-soft);
+			}
+		}
+
+		.uilib-ratings-range-icons {
+			display: flex;
+
+			margin: 0;
+		}
+	}
+
+	.uilib-form-row:has(.uilib-input-checkbox--confirm) {
+		position: relative;
+
+		padding: var(--uilib-spacing-200);
+
+		color: var(--uilib-input-checkbox-text-color-strong);
+
+		border-radius: var(--uilib-input-checkbox-confirm-radius);
+
+		background: var(--uilib-color-status-warning-surface);
+
+		&:has(.uilib-input-checkbox__input[aria-invalid='true']) {
+			background: var(--uilib-color-status-danger-surface);
+		}
+
+		.uilib-input-checkbox__label {
+			position: static;
+
+			&::after {
+				top: var(--uilib-spacing-500); /* 8 + 12 */
+				left: var(--uilib-spacing-500);
+			}
+		}
+
+		.uilib-input-checkbox__label-content {
+			color: var(--uilib-input-checkbox-text-color-strong);
+		}
+
+		.uilib-form-row__input {
+			margin: 0;
+		}
+
+		.uilib-form-row__error {
+			padding-bottom: var(--uilib-spacing-200);
+			padding-left: var(--uilib-spacing-1100);
+
+			&::before {
+				left: calc(calc(var(--uilib-spacing-1100) - var(--uilib-icon-size-xsmall)) / 2);
+			}
+		}
+	}
+
+	.uilib-input-checkbox-list__item .uilib-input-checkbox-list {
+		padding-left: var(--uilib-spacing-600);
+	}
+}

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

@@ -0,0 +1,9 @@
+@use '../../../variables/env-variables' as *;
+
+// Input checkbox specific variables to allow theming
+$uilib-input-checkbox-variables: (
+	icon-checked: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark.svg'),
+	icon-indeterminate: url('#{$uilib-assets-base-url}v3/icons/tui/standard/minus.svg'),
+	text-color-strong: var(--uilib-color-text-strong),
+	confirm-radius: var(--uilib-border-radius-100),
+) !default;

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

@@ -0,0 +1,4 @@
+// input-chip / index
+@use 'mixins' as *;
+@include uilib-input-chip;
+@include uilib-input-chip-list;

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

@@ -0,0 +1,124 @@
+// input-chip / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds input chip
+@mixin uilib-input-chip() {
+	.uilib-input-chip {
+		&__input {
+			appearance: none;
+
+			@include uilib-visually-hidden;
+
+			&:hover + .uilib-input-chip__label {
+				background-color: var(--uilib-input-chip-hover-bg-color);
+			}
+
+			&:focus-visible + .uilib-input-chip__label {
+				@include uilib-focus;
+			}
+
+			&:disabled + .uilib-input-chip__label,
+			&:disabled:checked + .uilib-input-chip__label {
+				color: var(--uilib-input-chip-disabled-color);
+
+				background: var(--uilib-input-chip-disabled-bg-color);
+
+				cursor: default;
+			}
+
+			&:checked + .uilib-input-chip__label {
+				border-color: var(--uilib-input-chip-active-border-color);
+
+				background-color: var(--uilib-input-chip-active-bg-color);
+
+				box-shadow: var(--uilib-elevation-100);
+			}
+
+			&:checked:hover + .uilib-input-chip__label {
+				background: var(--uilib-input-chip-active-hover-bg-color);
+			}
+		}
+
+		&__label {
+			display: inline-flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: center;
+			align-items: center;
+
+			padding: var(--uilib-spacing-200);
+
+			color: var(--uilib-input-chip-default-text-color);
+			font: var(--uilib-typography-label-medium);
+			white-space: nowrap;
+			text-align: center;
+
+			border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-input-chip-default-border-color);
+			border-radius: var(--uilib-input-chip-radius);
+
+			background: var(--uilib-input-chip-default-bg-color);
+
+			cursor: pointer;
+
+			/* stylelint-disable-next-line property-no-vendor-prefix */
+			-webkit-user-select: none; /* Safari */
+			user-select: none;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+					background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+					color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast);
+			}
+		}
+
+		&.uilib-input-chip--choice label {
+			min-width: var(--uilib-spacing-1600); /* 64px */
+			min-height: var(--uilib-spacing-1000); /* 40px */
+		}
+
+		&.uilib-input-chip--month-calendar {
+			max-width: fit-content;
+		}
+
+		&.uilib-input-chip--month-calendar label {
+			min-height: calc(var(--uilib-spacing-1200) + var(--uilib-spacing-050)); /* 50px */
+		}
+	}
+}
+
+@mixin uilib-input-chip-list() {
+	[data-testid='list-choice']:has(.uilib-input-chip-list),
+	.uilib-form-row__input:has(.uilib-input-chip-list) {
+		.uilib-input-chip-list {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	// Month calendar grid
+
+	[data-testid='list-month-calendar']:has(.uilib-input-chip-list),
+	.uilib-form-row__input:has(.uilib-input-chip-list-month-calendar) {
+		.uilib-input-chip-list-month-calendar {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			gap: var(--uilib-spacing-200);
+
+			max-width: calc(7.5rem * 3 + var(--uilib-spacing-200) * 2);
+
+			.uilib-input-chip--month-calendar {
+				width: 100%;
+				max-width: 7.5rem; /* 120px */
+
+				label {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../../variables/colors' as *;
+@use '../../../variables/env-variables' as *;
+
+// Input chip specific variables to allow theming
+$uilib-input-chip-variables: (
+	radius: var(--uilib-border-radius-200),
+	default-bg-color: var(--uilib-color-core-neutral),
+	default-border-color: var(--uilib-color-border-card),
+	default-text-color: var(--uilib-color-text-strong),
+	hover-bg-color: var(--uilib-color-other-secondary-button-hover-state),
+	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),
+	disabled-text-color: var(--uilib-color-other-disabled-soft),
+	disabled-bg-color: var(--uilib-color-core-neutral),
+) !default;

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

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