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

package/package.json

@@ -1,18 +1,15 @@
 {
 	"name": "@tui/design-system",
-	"version": "5.0.0-beta.1",
+	"version": "5.0.0-beta.5",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"contributors": [
 		"Matthew Guyader-Squirrell <matthew.squirrell@tui.co.uk>",
 		"Nicky Bliss <nicky.bliss@tui.co.uk>",
 		"Cy Culpin <cy.culpin@tui.co.uk>",
-		"Oleksandr Talanov <oleksandr.talanov@tui.co.uk>",
-		"Elias Meyer <elias.meyer@tui.com>",
 		"Volodymyr Savchuk <volodymyr.savchuk@tui.com>"
 	],
 	"scripts": {
-		"prepare": "node .husky/install.mjs",
 		"ci": "commit",
 		"clean": "shx rm -rf lib dist",
 		"prebuild": "npm run set-scss-env",
@@ -21,15 +18,15 @@
 		"build:js": "node cli/process-webcomponent-ts.mjs",
 		"build:changelog": "node cli/change-log.mjs",
 		"dev": "dotenv -e .env.local npm run storybook:dev",
-		"test:sass": "jest --verbose ./test/sass-true",
 		"storybook:dev": "run-s static:build build:primitives build:changelog set-scss-env storybook:serve",
 		"storybook:build": "run-s static:build build:primitives build:js build:changelog set-scss-env _storybook:build_prod",
 		"storybook:serve": "storybook dev -p 6006 -c storybook/.storybook",
 		"_storybook:build_prod": "storybook build -c storybook/.storybook",
 		"static:build": "node cli/static-assets.mjs",
-		"lint:styles": "stylelint \"src/**/*.{scss,css}\" --fix",
+		"lint:styles": "npm run lint:styles:ci && npm run lint:style:fix",
+		"lint:styles:fix": "stylelint \"src/**/*.{scss,css}\" --fix --rule 'property-no-vendor-prefix:false'",
 		"lint:styles:ci": "stylelint \"src/**/*.{scss,css}\"",
-		"lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
+		"lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --cache --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
 		"lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
 		"lint:storybook": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
 		"lint:storybook:ci": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
@@ -37,8 +34,7 @@
 		"lint:ci": "npm run lint:standard:ci && npm run lint:storybook:ci",
 		"prettier": "prettier --ignore-unknown --write .",
 		"prettier:ci": "prettier --ignore-unknown --check .",
-		"scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
-		"set-scss-env": "echo \"\\$uilib-assets-base-url: '${ASSETS_BASE_URL}' !default;\" > ./src/variables/_env-variables.scss",
+		"set-scss-env": "node cli/set-scss-env.mjs",
 		"ci:lint": "bash ./ci-scripts/lint.sh",
 		"ci:check:ts": "echo 'Probably not needed anymore, use `ci:lint`' && exit 0",
 		"ci:code-tests": "bash ./ci-scripts/code-tests.sh",
@@ -46,7 +42,9 @@
 		"ci:build": "bash ./ci-scripts/build.sh",
 		"ci:deploy:feat": "bash ./ci-scripts/deploy/deploy-feature.sh",
 		"ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.sh",
-		"ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh"
+		"ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh",
+		"scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
+		"test:sass": "jest --verbose ./test/sass-true"
 	},
 	"files": [
 		"dist",
@@ -70,32 +68,32 @@
 		"@eslint/compat": "^2.0.0",
 		"@eslint/js": "^9.38.0",
 		"@jest/globals": "^30.2.0",
-		"@storybook/addon-a11y": "^8.4.7",
-		"@storybook/addon-docs": "^8.4.7",
-		"@storybook/addon-essentials": "^8.4.7",
-		"@storybook/addon-links": "^8.4.7",
-		"@storybook/addon-themes": "^8.4.7",
-		"@storybook/blocks": "^8.4.7",
-		"@storybook/html": "^8.4.7",
-		"@storybook/html-webpack5": "^8.4.7",
-		"@storybook/manager-api": "^8.4.7",
-		"@storybook/preview-api": "^8.4.7",
-		"@storybook/theming": "^8.4.7",
+		"@storybook/addon-a11y": "8.6.14",
+		"@storybook/addon-docs": "8.6.14",
+		"@storybook/addon-essentials": "8.6.14",
+		"@storybook/addon-links": "8.6.14",
+		"@storybook/addon-themes": "8.6.14",
+		"@storybook/blocks": "8.6.14",
+		"@storybook/html": "8.6.14",
+		"@storybook/html-webpack5": "8.6.14",
+		"@storybook/manager-api": "8.6.14",
+		"@storybook/preview-api": "8.6.14",
+		"@storybook/theming": "8.6.14",
 		"@stylistic/eslint-plugin": "^3.1.0",
 		"@types/js-beautify": "^1.14.3",
-		"@types/node": "^24.9.1",
+		"@types/node": "^25.2.3",
 		"@typescript-eslint/eslint-plugin": "^8.46.2",
 		"@typescript-eslint/parser": "^8.46.2",
 		"aws-cdk-lib": "^2.220.0",
 		"babel-loader": "^10.0.0",
 		"copyfiles": "^2.4.1",
-		"css-loader": "7.1.2",
+		"css-loader": "7.1.3",
 		"deepmerge": "^4.3.1",
 		"dotenv": "^17.2.3",
 		"dotenv-cli": "^11.0.0",
 		"esbuild": "^0.27.0",
 		"eslint": "^9.38.0",
-		"eslint-config-airbnb-extended": "^2.3.2",
+		"eslint-config-airbnb-extended": "^3.0.1",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-import-resolver-typescript": "^4.4.4",
 		"eslint-plugin-import": "^2.32.0",
@@ -105,8 +103,9 @@
 		"eslint-plugin-prettier": "^5.5.4",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.1",
-		"git-format-staged": "3.1.1",
+		"git-format-staged": "4.0.1",
 		"glob": "^13.0.0",
+		"globals": "^17.3.0",
 		"husky": "^9.1.7",
 		"jest": "^30.2.0",
 		"js-beautify": "^1.15.1",
@@ -122,18 +121,18 @@
 		"sass-true": "^10.0.0",
 		"shx": "0.4.0",
 		"source-map-support": "^0.5.21",
-		"storybook": "^8.4.7",
-		"storybook-addon-pseudo-states": "^4.0.2",
+		"storybook": "8.6.14",
+		"storybook-addon-pseudo-states": "^4.0.3",
 		"storybook-addon-tag-badges": "^1.4.0",
 		"storybook-addon-turbo-build": "^2.0.1",
 		"storybook-dark-mode": "^4.0.2",
 		"storybook-preset-inline-svg": "^1.0.1",
 		"style-loader": "4.0.0",
-		"stylelint": "^16.25.0",
-		"stylelint-config-standard": "^39.0.1",
-		"stylelint-config-standard-scss": "^16.0.0",
+		"stylelint": "^17.2.0",
+		"stylelint-config-standard": "^40.0.0",
+		"stylelint-config-standard-scss": "^17.0.0",
 		"stylelint-order": "^7.0.0",
-		"stylelint-scss": "^6.10.1",
+		"stylelint-scss": "^7.0.0",
 		"stylelint-semantic-groups": "^1.2.1",
 		"ts-loader": "^9.5.2",
 		"ts-node": "^10.9.1",
@@ -141,16 +140,11 @@
 		"typescript-eslint": "^8.46.2",
 		"webpack": "^5.102.1"
 	},
-	"engines": {
-		"node": ">=22",
-		"npm": ">=10",
-		"pnpm": "please-use-npm"
-	},
 	"lint-staged": {
 		"*.{scss,css}": "npx stylelint \"src/**/*.{scss,css}\" --fix",
 		"*.{js,ts,mjs}": "npx eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
 		"storybook/.storybook/**/*.{js,ts,mjs}": "npx eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
-		"**/*": "npx prettier --write"
+		"**/*": "npx prettier --ignore-unknown --write ."
 	},
 	"loki": {
 		"configurations": {

package/scss/functions/_map.scss

@@ -0,0 +1,84 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Function to get next map item
+/// returns next map item or fallback value if map, key or next item does not exist
+/// Github Repo: https://github.com/elcheio/sass-map-get-next-prev
+///
+/// @param {Map} $map - Sass list map
+/// @param {String} $key - List map key
+/// @param {Boolean} $fallback (false) - Fallback value if map, key or previous item does not exist
+/// @param {String} $return (value) - Return value or key of previous list item
+/// @param {Boolean} $debug (false) - Debug option
+///
+/// @example scss - Usage
+/// $map: (
+/// 	s: 320px,
+/// 	m: 768px,
+/// );
+///
+/// .foo {
+/// 	width: map-get-next($map, s);
+/// }
+///
+/// .bar {
+/// 	width: map-get-next($map, m, 1024px);
+/// }
+///
+/// @example css - CSS output
+/// .foo {
+/// 	width: 768px;
+/// }
+///
+/// .bar {
+/// 	width: 1024px;
+/// }
+
+@function map-get-next($map, $key, $fallback: false, $return: value) {
+	// Check if map is valid
+	@if meta.type-of($map) == map {
+		// Check if key exists in map
+		@if map.has-key($map, $key) {
+			// Init index counter variable
+			$i: 0;
+
+			// Init key index
+			$key-index: false;
+
+			// Traverse map for key
+			@each $map-key, $map-value in $map {
+				// Update index
+				$i: $i + 1;
+
+				// If map key found, set key index
+				@if $map-key == $key {
+					$key-index: $i;
+				}
+
+				// If next index return next value or key based on $return
+				@if $i == ($key-index) + 1 {
+					@if $return == key {
+						@return $map-key;
+					} @else {
+						@return $map-value;
+					}
+				}
+
+				// If last entry return false
+				@if $i == list.length($map) {
+					@return $fallback;
+				}
+			}
+
+			@warn "No next map item for key #{$key}";
+			@return $fallback;
+		}
+
+		@warn "No valid key #{$key} in map";
+		@return $fallback;
+	}
+
+	@warn "No valid map";
+	@return $fallback;
+}

package/scss/functions.scss

@@ -0,0 +1 @@
+@forward 'functions/map';

package/scss/lib/accordion/_index.scss

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

package/scss/lib/accordion/_mixins.scss

@@ -0,0 +1,233 @@
+// accordion / _mixins
+@use '../utility/mixins' as *;
+
+// Builds accordion
+@mixin uilib-accordion() {
+	.uilib-accordion {
+		position: relative;
+
+		margin: var(--uilib-spacing-400) var(--uilib-spacing-none) var(--uilib-spacing-600);
+
+		border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-accordion-border-color);
+		border-radius: var(--uilib-accordion-radius);
+
+		background: var(--uilib-accordion-default-bg-color);
+
+		&::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;
+			}
+		}
+
+		&[open]::details-content {
+			block-size: auto;
+		}
+
+		&[open] > .uilib-accordion-summary::after {
+			transform: rotate(180deg);
+		}
+	}
+
+	.uilib-accordion-summary {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-100) var(--uilib-spacing-200);
+
+		padding: var(--uilib-spacing-300) var(--uilib-spacing-1100) var(--uilib-spacing-300) var(--uilib-spacing-300);
+
+		border-radius: var(--uilib-border-radius-100);
+
+		cursor: pointer;
+
+		appearance: none;
+
+		&::after {
+			$icon-pos: calc(calc(var(--uilib-spacing-1100) - var(--uilib-icon-size-medium)) / 2);
+
+			position: absolute;
+			top: $icon-pos;
+			right: $icon-pos;
+			content: '';
+
+			display: block;
+
+			width: var(--uilib-icon-size-medium);
+
+			background: var(--uilib-color-core-interaction);
+
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+			-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-accordion-icon);
+			mask-image: var(--uilib-accordion-icon);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
+		}
+
+		&:focus-visible {
+			@include uilib-focus;
+
+			// Override default focus position so focus displays over whole accordion
+			/* stylelint-disable-next-line order/order */
+			position: static;
+		}
+
+		&::marker {
+			content: '';
+		}
+
+		&::-webkit-details-marker {
+			display: none;
+		}
+	}
+
+	.uilib-accordion--logo .uilib-accordion-summary {
+		min-height: calc(calc(var(--uilib-spacing-300) * 2) + var(--uilib-spacing-1600));
+		padding-left: calc(var(--uilib-spacing-300) + var(--uilib-spacing-1600) + var(--uilib-spacing-200));
+	}
+
+	.uilib-accordion--icon .uilib-accordion-summary {
+		min-height: calc(calc(var(--uilib-spacing-300) * 2) + var(--uilib-icon-size-small));
+		padding-left: calc(var(--uilib-spacing-300) + var(--uilib-icon-size-small) + var(--uilib-spacing-200));
+	}
+
+	.uilib-accordion-summary__heading {
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-component-heading-small-strong);
+		text-wrap: initial;
+	}
+
+	.uilib-accordion-summary__subtitle {
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-body-medium);
+	}
+
+	.uilib-accordion-summary__logo,
+	.uilib-accordion-summary__icon {
+		position: absolute;
+		top: var(--uilib-spacing-300);
+		left: var(--uilib-spacing-300);
+	}
+
+	.uilib-accordion-summary__logo {
+		width: var(--uilib-spacing-1600); /* 64px */
+		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+		border-radius: var(--uilib-accordion-logo-radius);
+
+		overflow: hidden;
+
+		img {
+			object-fit: cover;
+			object-position: center;
+		}
+	}
+
+	.uilib-accordion-summary__icon {
+		background-color: var(--uilib-color-text-strong);
+	}
+
+	.uilib-accordion__content {
+		padding: 0 var(--uilib-spacing-300) var(--uilib-spacing-300);
+	}
+}
+
+@mixin uilib-accordion-group() {
+	.uilib-accordion-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-400);
+		align-items: flex-start;
+
+		margin: var(--uilib-spacing-400) var(--uilib-spacing-none) var(--uilib-spacing-600);
+
+		container-type: inline-size;
+		container-name: uilib-accordion;
+	}
+
+	.uilib-accordion-group::part(wrapper) {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-400);
+		align-items: flex-start;
+
+		width: 100%;
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@container uilib-accordion (min-width: 30rem) {
+		.uilib-accordion-group::part(wrapper) {
+			display: grid;
+			grid-template-columns: 1fr max-content;
+			gap: var(--uilib-spacing-400) var(--uilib-spacing-600);
+			align-items: end;
+		}
+	}
+
+	.uilib-accordion-group__intro {
+		grid-column: 1;
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.uilib-accordion-group__button {
+		grid-column: 2;
+	}
+
+	.uilib-accordion-group__intro + .uilib-accordion-group__button {
+		margin-top: calc(var(--uilib-spacing-200) * -1);
+	}
+
+	.uilib-accordion-list {
+		grid-column: 1 / span 2;
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-100);
+
+		width: 100%;
+		margin: var(--uilib-spacing-none);
+		padding: var(--uilib-spacing-none);
+
+		& > .uilib-accordion-list__item > .uilib-accordion {
+			margin: 0;
+		}
+	}
+
+	.uilib-accordion-list--divider {
+		gap: var(--uilib-spacing-none);
+
+		& > .uilib-accordion-list__item > .uilib-accordion {
+			border: none;
+		}
+
+		& > .uilib-accordion-list__item:not(:first-child) > .uilib-accordion {
+			border-top-left-radius: var(--uilib-border-radius-none);
+			border-top-right-radius: var(--uilib-border-radius-none);
+		}
+
+		& > .uilib-accordion-list__item:not(:last-child) > .uilib-accordion {
+			border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-accordion-divider-color);
+			border-bottom-right-radius: var(--uilib-border-radius-none);
+			border-bottom-left-radius: var(--uilib-border-radius-none);
+		}
+	}
+}

package/scss/lib/accordion/_variables.scss

@@ -0,0 +1,11 @@
+@use '../../variables/env-variables' as *;
+
+// Accordion specific variables to allow theming
+$uilib-accordion-variables: (
+	radius: var(--uilib-border-radius-100),
+	logo-radius: var(--uilib-border-radius-100),
+	icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+	default-bg-color: var(--uilib-color-canvas-default),
+	border-color: var(--uilib-color-border-card),
+	divider-color: var(--uilib-color-border-card),
+) !default;

package/scss/lib/active-tag/_index.scss

@@ -0,0 +1,4 @@
+// active tag / index
+@use 'mixins' as *;
+@include uilib-active-tag;
+@include uilib-active-tag-group;

package/scss/lib/active-tag/_mixins.scss

@@ -0,0 +1,112 @@
+// active-tag / _mixins
+@use '../utility/mixins' as *;
+
+// Builds active-tag
+@mixin uilib-active-tag() {
+	.uilib-active-tag {
+		display: flex;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		max-width: fit-content;
+		min-height: 2rem;
+		max-height: 3.125rem;
+		padding: var(--uilib-spacing-100) var(--uilib-spacing-200) var(--uilib-spacing-100) var(--uilib-spacing-300);
+
+		border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-active-tag-border-color);
+		border-radius: var(--uilib-active-tag-radius);
+
+		background-color: var(--uilib-active-tag-background-color);
+
+		cursor: pointer;
+
+		&:focus-visible {
+			@include uilib-focus;
+		}
+
+		&__icon,
+		&__cross {
+			flex-shrink: 0;
+			align-self: flex-start;
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			margin-top: var(--uilib-spacing-100);
+		}
+
+		&__cross {
+			color: var(--uilib-active-tag-cross-color);
+		}
+
+		&__label {
+			display: -webkit-box;
+
+			text-align: left;
+			text-overflow: ellipsis;
+
+			overflow: hidden;
+			-webkit-line-clamp: 2;
+			line-clamp: 2;
+			-webkit-box-orient: vertical;
+		}
+
+		.uilib-ratings-range-icons {
+			margin: 0;
+		}
+	}
+}
+
+@mixin uilib-active-tag-group() {
+	.uilib-active-tag-group {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		&__list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uilib-spacing-200);
+
+			margin: 0;
+			padding: 0;
+
+			list-style: none;
+		}
+
+		&__item {
+			&--hidden {
+				display: none;
+			}
+
+			&--buttons {
+				display: flex;
+				flex-flow: row wrap;
+				gap: var(--uilib-spacing-200) var(--uilib-spacing-300);
+				align-items: center;
+
+				min-height: 2rem; /* 32 / 16 */
+			}
+		}
+
+		&__icon {
+			-webkit-mask-image: var(--uilib-active-tag-icon);
+			mask-image: var(--uilib-active-tag-icon);
+
+			transform: rotate(0deg);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
+		}
+
+		&[is-open] {
+			.uilib-active-tag-group__icon {
+				transform: rotate(180deg);
+			}
+		}
+
+		&__button--clear.uilib-link {
+			margin-top: calc(calc(var(--uilib-focus-gap) + var(--uilib-spacing-050)) * -1);
+		}
+	}
+}

package/scss/lib/active-tag/_variables.scss

@@ -0,0 +1,8 @@
+// Active tag specific variables to allow theming
+$uilib-active-tag-variables: (
+	radius: var(--uilib-border-radius-200),
+	border-color: var(--uilib-color-border-input),
+	background-color: var(--uilib-color-core-neutral),
+	cross-color: var(--uilib-color-core-interaction),
+	icon: var(--uilib-show-more-less-icon),
+) !default;

package/scss/lib/alert/_index.scss

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