@tui/design-system 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## v1.14.0
+
+### Added
+
+#### [Card with list](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-cards-card-with-list--docs)
+
+- New pattern for presenting categorised label and value information, with a basic card variant and a collapsible highlight panel variant. The list
+  reflows into two columns from a card width of 580px, driven by a container query so it responds to the width of the card rather than the viewport.
+
+#### [Holiday summary](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-holiday-summary--docs)
+
+- New pattern for summarising a booking — party, dates, board, room, extras and flights — alongside the price and primary call to action.
+
+### Updated
+
+#### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
+
+- Added grid content alignment modifiers. Container-level `.uilib-grid--align-[align]` / `.uilib-grid--justify-[align]` align all cells; column-level
+  `.uilib-grid__col--align-self-[align]` / `.uilib-grid__col--justify-self-[align]` (with responsive `[res]` variants) align individual cells.
+  Available values: `start`, `center`, `end`, `stretch`.
+
+#### [Input slider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-slider--docs)
+
+- Added a `uilib-slider-commit` event that fires once user interaction completes (pointer/mouse release or blur after keyboard adjustment). The
+  committed value is available on `event.detail.value`.
+- Added a `valuetext-template` attribute for a custom `aria-valuetext`. Use `{value}` as the placeholder.
+
+#### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
+
+- Added density modifiers (`uilib-list--compact`, `uilib-list--spacious`) to change the vertical spacing between list items. Default spacing is
+  unchanged and still needs no class. The row spacing is now set through the `--uilib-list-row-gap` custom property, so components that lay list items
+  out without a flex gap can apply the same density.
+- Updated the multiline title (`uilib-list__title`) font from the label style to `body-medium-strong`, matching the Figma update to the List
+  component's text styles.
+
+### Fixed
+
+#### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
+
+- Darkened the First Choice link colour from `color-pink-70` (`#d61d5f`) to a new `color-pink-75` (`#b8194d`) primitive so it passes colour contrast
+  requirements on background colours.
+
 ## v1.13.0
 
 ### Updated

package/dist/themes/firstchoice/index.css

@@ -37,7 +37,7 @@
   --uilib-color-core-neutral: #fff;
   --uilib-color-text-strong: #002f17;
   --uilib-color-text-body: #002f17;
-  --uilib-color-text-link: #d61d5f;
+  --uilib-color-text-link: #b8194d;
   --uilib-color-text-link-visited: #6c69b7;
   --uilib-color-text-link-visited-inverse: #9996f1;
   --uilib-color-text-inverse: #fffefe;

package/dist/themes/tui/index.css

@@ -438,7 +438,7 @@
   --uilib-list-bullet-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/list-item.svg");
   --uilib-list-image-radius: var(--uilib-border-radius-100);
   --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
-  --uilib-list-multiline-title-font: var(--uilib-typography-label-medium);
+  --uilib-list-multiline-title-font: var(--uilib-typography-body-medium-strong);
   --uilib-list-highlight-color: var(--uilib-color-text-promotion);
   --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/tui/loader.svg");
   --uilib-loader-small: 3.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tui/design-system",
-	"version": "1.13.0",
+	"version": "1.14.0",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"//dependencies": {
@@ -35,8 +35,8 @@
 		"lint:styles": "npm run lint:styles:ci && npm run lint:styles:fix",
 		"lint:styles:fix": "stylelint \"src/**/*.{scss,css}\" --fix --config .stylelintrc.fix.json",
 		"lint:styles:ci": "stylelint \"src/**/*.{scss,css}\"",
-		"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:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" \"figma/**/*.figma.ts\" --cache --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
+		"lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" \"figma/**/*.figma.ts\" --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",
 		"lint": "npm run lint:standard && npm run lint:storybook",
@@ -53,7 +53,8 @@
 		"ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.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": "node --experimental-vm-modules node_modules/.bin/jest --verbose ./test/sass-true"
+		"test:sass": "node --experimental-vm-modules node_modules/.bin/jest --verbose ./test/sass-true",
+		"test:mcp": "node --experimental-vm-modules node_modules/.bin/jest --config jest.config.mcp.mjs"
 	},
 	"files": [
 		"dist",
@@ -85,7 +86,7 @@
 		"@storybook/addon-themes": "^10.4.5",
 		"@storybook/html-vite": "^10.4.5",
 		"@stylistic/eslint-plugin": "^3.1.0",
-		"@tui/cally": "1.1.1",
+		"@tui/cally": "^1.1.2",
 		"@types/js-beautify": "^1.14.3",
 		"@types/node": "^24.0.0",
 		"@typescript-eslint/eslint-plugin": "^8.46.2",

package/scss/lib/grid/_column.scss

@@ -32,6 +32,17 @@
 		}
 	}
 
+	// Alignment (per cell)
+	@each $value in $uilib-grid-align-values {
+		#{$uilib-grid-selector-column}--align-self#{$prefix}-#{$value} {
+			@include uilib-grid-col-align-self($value);
+		}
+
+		#{$uilib-grid-selector-column}--justify-self#{$prefix}-#{$value} {
+			@include uilib-grid-col-justify-self($value);
+		}
+	}
+
 	#{$uilib-grid-selector-column}--offset#{$prefix}-reset {
 		@include uilib-grid-col-offset-reset;
 	}

package/scss/lib/grid/_container.scss

@@ -19,3 +19,14 @@ $axes: '', 'x', 'y';
 		}
 	}
 }
+
+// Container-level alignment: applies to every cell in the grid.
+@each $value in $uilib-grid-align-values {
+	#{$uilib-grid-selector}--align-#{$value} {
+		@include uilib-grid-align-items($value);
+	}
+
+	#{$uilib-grid-selector}--justify-#{$value} {
+		@include uilib-grid-justify-items($value);
+	}
+}

package/scss/lib/grid/_mixins.scss

@@ -219,3 +219,33 @@
 		content: none;
 	}
 }
+
+/* --- Grid Alignment ------- */
+
+/// Vertical alignment of all grid items within their cells (container-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-align-items($value) {
+	align-items: $value;
+}
+
+/// Horizontal alignment of all grid items within their cells (container-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-justify-items($value) {
+	justify-items: $value;
+}
+
+/// Vertical alignment of a single grid item within its cell (column-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-col-align-self($value) {
+	align-self: $value;
+}
+
+/// Horizontal alignment of a single grid item within its cell (column-level).
+/// @param {String} $value - start | center | end | stretch
+
+@mixin uilib-grid-col-justify-self($value) {
+	justify-self: $value;
+}

package/scss/lib/grid/_variables.scss

@@ -9,3 +9,4 @@ $uilib-grid-selectors-custom: () !default;
 $uilib-grid-selectors-config: map.merge($uilib-grid-selectors-default, $uilib-grid-selectors-custom);
 $uilib-grid-selector: map.get($uilib-grid-selectors-config, 'grid');
 $uilib-grid-selector-column: map.get($uilib-grid-selectors-config, 'column');
+$uilib-grid-align-values: start, center, end, stretch !default;

package/scss/lib/list/_mixins.scss

@@ -142,7 +142,15 @@ $uilib-list-included: false !default;
 		&--horizontal {
 			display: flex;
 			flex-flow: row wrap;
-			gap: var(--uilib-spacing-200) var(--uilib-spacing-400);
+			gap: var(--uilib-list-row-gap) var(--uilib-spacing-400);
+		}
+
+		&--compact {
+			--uilib-list-row-gap: 0;
+		}
+
+		&--spacious {
+			--uilib-list-row-gap: var(--uilib-spacing-400);
 		}
 
 		&__title {
@@ -196,9 +204,11 @@ $uilib-list-included: false !default;
 
 /* For internal use to support richText component */
 @mixin uilib-list-base() {
+	--uilib-list-row-gap: var(--uilib-spacing-200);
+
 	display: flex;
 	flex-flow: column;
-	gap: var(--uilib-spacing-200) var(--uilib-spacing-500);
+	gap: var(--uilib-list-row-gap) var(--uilib-spacing-500);
 
 	margin: 0 0 var(--uilib-spacing-400);
 	padding: 0;

package/scss/lib/list/_variables.scss

@@ -6,6 +6,6 @@ $uilib-list-variables: (
 	bullet-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/list-item.svg'),
 	image-radius: var(--uilib-border-radius-100),
 	image-alt-radius: var(--uilib-border-radius-circle),
-	multiline-title-font: var(--uilib-typography-label-medium),
+	multiline-title-font: var(--uilib-typography-body-medium-strong),
 	highlight-color: var(--uilib-color-text-promotion),
 ) !default;

package/scss/lib/patterns/card-with-list/_index.scss

@@ -0,0 +1,4 @@
+// Card with list / index
+@use 'mixins' as *;
+@include uilib-card-with-list;
+@include uilib-card-with-list-highlight;

package/scss/lib/patterns/card-with-list/_mixins.scss

@@ -0,0 +1,86 @@
+// Card with list / _mixins
+@use '../../cards/card/mixins' as *;
+@use '../../highlight-panel/mixins' as *;
+@use '../../list/mixins' as *;
+
+$uilib-card-with-list-included: false !default;
+$uilib-card-with-list-highlight-included: false !default;
+$uilib-card-with-list-master-included: false !default;
+
+// Builds card with list
+@mixin uilib-card-with-list() {
+	@if not $uilib-card-with-list-included {
+		$uilib-card-with-list-included: true !global;
+
+		@include uilib-card;
+		@include uilib-list;
+		@include uilib-card-with-list-master;
+	}
+}
+
+@mixin uilib-card-with-list-highlight() {
+	@if not $uilib-card-with-list-highlight-included {
+		$uilib-card-with-list-highlight-included: true !global;
+
+		@include uilib-highlight-panel;
+		@include uilib-list;
+		@include uilib-card-with-list-master;
+	}
+}
+
+@mixin uilib-card-with-list-master() {
+	@if not $uilib-card-with-list-master-included {
+		$uilib-card-with-list-master-included: true !global;
+
+		.uilib-card-with-list {
+			container-name: uilib-card-with-list;
+			container-type: inline-size;
+
+			&__content {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uilib-spacing-600);
+			}
+
+			&__heading {
+				margin: 0;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-component-heading-xlarge-strong);
+			}
+
+			&__description {
+				margin: 0 0 var(--uilib-spacing-200);
+				padding-bottom: var(--uilib-spacing-200);
+
+				border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+			}
+
+			&__value {
+				font: var(--uilib-typography-body-medium-strong);
+			}
+
+			&__list {
+				margin-bottom: 0;
+
+				@container uilib-card-with-list (min-width: 36.25rem) {
+					display: block;
+					column-gap: calc(var(--uilib-grid-gutter-width) * 2);
+
+					column-count: 2;
+					column-rule: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+
+					> li {
+						margin-bottom: var(--uilib-list-row-gap);
+
+						break-inside: avoid;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/scss/lib/patterns/holiday-summary/_index.scss

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

package/scss/lib/patterns/holiday-summary/_mixins.scss

@@ -0,0 +1,94 @@
+// Holiday summary / _mixins
+@use '../../utility/mixins' as *;
+@use '../../alert/mixins' as *;
+@use '../../button/mixins' as *;
+@use '../../highlight-panel/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../list/mixins' as *;
+@use '../../price-box/mixins' as *;
+@use '../../skeleton/mixins' as *;
+
+$uilib-holiday-summary-included: false !default;
+$uilib-holiday-summary-skeleton-included: false !default;
+
+@mixin uilib-holiday-summary() {
+	@if not $uilib-holiday-summary-included {
+		$uilib-holiday-summary-included: true !global;
+
+		@include uilib-alert;
+		@include uilib-button;
+		@include uilib-highlight-panel;
+		@include uilib-link;
+		@include uilib-list;
+		@include uilib-price-box;
+		@include uilib-holiday-summary-master;
+	}
+}
+
+@mixin uilib-holiday-summary-skeleton() {
+	@if not $uilib-holiday-summary-skeleton-included {
+		$uilib-holiday-summary-skeleton-included: true !global;
+
+		@include uilib-skeleton;
+		@include uilib-holiday-summary-skeleton-master;
+	}
+}
+
+@mixin uilib-holiday-summary-master() {
+	.uilib-holiday-summary {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-300);
+
+		.uilib-list,
+		.uilib-alert {
+			margin: 0;
+		}
+
+		&__extras-link {
+			display: block;
+
+			width: max-content;
+			max-width: 100%;
+		}
+
+		&__footer {
+			padding-top: var(--uilib-spacing-200);
+
+			&:not(.uilib-price-box) .uilib-button {
+				width: 100%;
+			}
+		}
+	}
+
+	.uilib-highlight-panel:has(.uilib-holiday-summary) .uilib-highlight-panel__content--divider::after {
+		margin-top: var(--uilib-spacing-400);
+	}
+}
+
+@mixin uilib-holiday-summary-skeleton-master() {
+	.uilib-holiday-summary {
+		&__loading {
+			@include uilib-visually-hidden;
+		}
+
+		&__skeleton-header {
+			width: calc(100% + var(--uilib-spacing-400) * 2);
+			height: var(--uilib-spacing-1000);
+			margin: calc(var(--uilib-spacing-400) * -1) calc(var(--uilib-spacing-400) * -1) 0;
+
+			border-radius: 0;
+		}
+
+		&__skeleton-indent {
+			padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-200));
+		}
+	}
+
+	// Clips the bled header placeholder to the panel's own top corners instead of duplicating
+	// Highlight panel's radius token on a skeleton-owned element — stays correct even if that
+	// radius ever changes, since the panel's `__content` already carries it when there's no header.
+	.uilib-highlight-panel:has(.uilib-holiday-summary__skeleton-header) .uilib-highlight-panel__content {
+		overflow: hidden;
+	}
+}

package/scss/lib/patterns/review-card/_mixins.scss

@@ -235,6 +235,8 @@ $uilib-review-card-included: false !default;
 
 			.uilib-ratings-range-icons__details {
 				grid-column: unset;
+
+				flex-basis: unset;
 			}
 
 			.uilib-card__content-container {
@@ -245,12 +247,8 @@ $uilib-review-card-included: false !default;
 				}
 			}
 
-			.uilib-ratings-range-icons__details {
-				flex-basis: unset;
-			}
-
 			.uilib-ratings-range-icons-group {
-				display: none;
+				display: flex;
 			}
 
 			.uilib-ratings-range-icons__description {
@@ -259,10 +257,6 @@ $uilib-review-card-included: false !default;
 				display: block;
 				flex-basis: unset;
 			}
-
-			.uilib-ratings-range-icons-group {
-				display: flex;
-			}
 		}
 	}
 }

package/scss/mixins.scss

@@ -62,7 +62,9 @@
 @forward 'lib/utility/mixins';
 
 // Pattern mixins
+@forward 'lib/patterns/card-with-list/mixins';
 @forward 'lib/patterns/edit-search/mixins';
+@forward 'lib/patterns/holiday-summary/mixins';
 @forward 'lib/patterns/reasons-to-book/mixins';
 @forward 'lib/patterns/review-card/mixins';
 @forward 'lib/patterns/review-summary/mixins';

package/scss/themes/firstchoice/_colors.scss

@@ -11,7 +11,7 @@ $uilib-color-semantic-firstchoice: (
 	core-neutral: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
 	text-strong: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
 	text-body: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
-	text-link: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
+	text-link: map.get($uilib-firstchoice-primitives, 'color-pink-75'),
 	text-link-visited: map.get($uilib-firstchoice-primitives, 'color-purple-60'),
 	text-link-visited-inverse: map.get($uilib-firstchoice-primitives, 'color-purple-30'),
 	text-inverse: map.get($uilib-firstchoice-primitives, 'color-sand-10'),

package/scss/themes/firstchoice/_primitives.scss

@@ -7,6 +7,7 @@ $uilib-firstchoice-primitives: map.merge(
 		color-pink-100: #55031b,
 		color-pink-90: #770a2a,
 		color-pink-80: #99143b,
+		color-pink-75: #b8194d,
 		color-pink-70: #d61d5f,
 		color-pink-60: #ff467c,
 		color-pink-50: #ff7ea3,

package/scss/themes/firstchoice/theme.json

@@ -28,7 +28,7 @@
 					"primitive": "color-greenpalm-100"
 				},
 				"color-text-link": {
-					"primitive": "color-pink-70"
+					"primitive": "color-pink-75"
 				},
 				"color-text-link-visited": {
 					"primitive": "color-purple-60"

package/types/components.ts

@@ -3,8 +3,10 @@
 
 export type Theme = 'tui' | 'firstchoice' | 'crystalski';
 export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+export type Size = 'small' | 'medium' | 'large';
 export type IconPosition = 'none' | 'leading' | 'trailing';
 export type ButtonVariantBase = 'primary' | 'secondary' | 'promotion' | 'search';
+export type IconButtonVariant = ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
 export type HeadingLevel = '2' | '3' | '4' | '5' | '6';
 
 // ═══════════════════════════════════════════════════════════
@@ -359,6 +361,7 @@ export interface InputSliderProps {
 	value?: number | null;
 	minLabel?: string;
 	maxLabel?: string;
+	valueTextTemplate?: string;
 	disabled?: boolean;
 }
 
@@ -441,8 +444,8 @@ export interface IconProps {
 // ─── Icon Button ─────────────────────────────────────────
 export interface IconButtonProps {
 	element?: 'a' | 'button' | 'div';
-	variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
-	size?: 'small' | 'medium' | 'large';
+	variant?: IconButtonVariant;
+	size?: Size;
 	isDisabled?: boolean;
 	visibleLabel?: boolean;
 	labelRight?: boolean;
@@ -526,6 +529,7 @@ export type ListVariant = 'bulleted' | 'numbered' | 'icon' | 'image' | 'plain';
 export type ListTextVariant = 'default' | 'strong' | 'label';
 export type ListIconSize = 'small' | 'medium' | 'large';
 export type ListLayout = 'default' | 'columns' | 'horizontal';
+export type ListDensity = 'compact' | 'default' | 'spacious';
 
 export interface ListItem {
 	label?: string;
@@ -539,6 +543,7 @@ export interface ListProps {
 	textVariant?: ListTextVariant;
 	iconSize?: ListIconSize;
 	layout?: ListLayout;
+	density?: ListDensity;
 	/** @deprecated Use `layout: 'columns'` instead. */
 	columns?: boolean;
 	hint?: boolean;
@@ -553,7 +558,7 @@ export interface ListProps {
 
 // ─── Loader ────────────────────────────────────────────
 export interface LoaderProps {
-	size?: 'small' | 'medium' | 'large';
+	size?: Size;
 	message?: string;
 	messageVisible?: boolean;
 	theme?: Theme;
@@ -572,7 +577,7 @@ export interface MediaButtonProps {
 // ─── Modal ─────────────────────────────────────────────
 export interface ModalProps {
 	header?: string;
-	size?: 'small' | 'medium' | 'large';
+	size?: Size;
 	primaryButtonLabel?: string;
 	secondaryButtonLabel?: string;
 	closeButtonLabel?: string;
@@ -593,7 +598,7 @@ export const Currencies = ['GBP', 'EUR', 'USD', 'SEK', 'NOK', 'DKK', 'CHF'] as c
 export type Currency = (typeof Currencies)[number];
 
 export interface PriceProps {
-	size?: 'small' | 'medium' | 'large';
+	size?: Size;
 	currency?: Currency;
 	mainUnit?: string;
 	subUnit?: string;
@@ -617,6 +622,9 @@ export interface PriceBoxProps {
 	divider?: boolean;
 	footer?: boolean;
 	footerHtml?: string;
+	ctaLabel?: string;
+	price?: Partial<PriceProps>;
+	extraClasses?: string[];
 }
 
 // ─── Promo Tag ──────────────────────────────────────────
@@ -887,6 +895,26 @@ export interface TravelAwareBannerProps {
 // PATTERNS
 // ═══════════════════════════════════════════════════════════
 
+// ─── Card With List ────────────────────────────────────
+export interface CardWithListItem {
+	label?: string;
+	hint?: string;
+	hintHref?: string;
+}
+
+export interface CardWithListProps {
+	variant?: 'basic' | 'highlight';
+	heading?: string;
+	headingLevel?: HeadingLevel;
+	description?: string;
+	density?: ListDensity;
+	items?: CardWithListItem[];
+	collapsible?: boolean;
+	open?: boolean;
+	icon?: string;
+	theme?: Theme;
+}
+
 // ─── Edit Search ────────────────────────────────────────
 export interface EditSearchProps {
 	variant?: 'back' | 'list';
@@ -895,6 +923,49 @@ export interface EditSearchProps {
 	uniqueId?: string;
 }
 
+// ─── Holiday Summary ────────────────────────────────────
+export interface HolidaySummaryRow {
+	icon: string;
+	label: string;
+	detail?: string | string[];
+	editable?: boolean;
+	extrasLink?: boolean;
+}
+
+export interface HolidaySummaryNote {
+	text: string;
+	strong?: boolean;
+}
+
+export interface HolidaySummaryProps {
+	title?: string;
+	open?: boolean;
+	collapsible?: boolean;
+	rows?: HolidaySummaryRow[];
+	extrasCount?: number;
+	extrasHref?: string;
+	extrasLabel?: string;
+	promoTags?: boolean;
+	currency?: Currency;
+	pricePrefix?: boolean;
+	priceMainUnit?: string;
+	priceSubUnit?: string;
+	priceSuffix?: string;
+	totalPriceValue?: string;
+	showPrice?: boolean;
+	supportingText?: HolidaySummaryNote[];
+	ctaLabel?: string;
+	footerText?: string;
+	footerLinkLabel?: string;
+	footerLinkHref?: string;
+	editLabel?: string;
+	state?: 'default' | 'skeleton';
+	content?: string;
+	loadingLabel?: string;
+	skeletonRows?: number;
+	theme?: Theme;
+}
+
 // ─── Reasons To Book ───────────────────────────────────
 export interface ReasonToBookItem {
 	pictogram: string;