@tui/design-system 1.1.1 → 1.3.0

package/types/components.ts

@@ -7,114 +7,24 @@ export type IconPosition = 'none' | 'leading' | 'trailing';
 export type ButtonVariantBase = 'primary' | 'secondary' | 'promotion' | 'search';
 export type HeadingLevel = '2' | '3' | '4' | '5' | '6';
 
-// ─── Form Row ────────────────────────────────────────────
-export interface FormRowProps {
-	labelText?: string;
-	reduced?: boolean;
-	hint?: boolean;
-	hintText?: string;
-	error?: boolean;
-	errorText?: string;
-	group?: boolean;
-	theme?: Theme;
-}
-
-// ─── Icon ────────────────────────────────────────────────
-export interface IconProps {
-	type?: 'standard' | 'color' | 'bullet';
-	nameStandard?: string;
-	nameColor?: string;
-	nameBullet?: string;
-	size?: IconSize;
-	color?: string;
-	theme?: Theme;
-}
-
-// ─── Icon Button ─────────────────────────────────────────
-export interface IconButtonProps {
-	element?: 'a' | 'button';
-	variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
-	size?: 'small' | 'medium' | 'large';
-	isDisabled?: boolean;
-	label?: string;
-	iconAsset?: string;
-	selected?: boolean;
-	theme?: Theme;
-}
-
-// ─── Button ──────────────────────────────────────────────
-export interface ButtonProps {
-	element?: 'a' | 'button' | 'span';
-	variant?: ButtonVariantBase | 'tertiary';
-	size?: 'medium' | 'large';
-	isDisabled?: boolean;
-	label?: string;
-	accessibleLabel?: string;
-	widthRestrict?: boolean;
-	icon?: IconPosition;
-	iconAsset?: string;
-	theme?: Theme;
-}
-
-// ─── Link ────────────────────────────────────────────────
-export interface LinkProps {
-	href?: string;
-	label?: string;
-	accessibleLabel?: string;
-	headingLink?: 'none' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-	isButtonLink?: boolean;
-	isInverse?: boolean;
-	icon?: IconPosition;
-	iconAsset?: string;
-	isExternal?: boolean;
-	theme?: Theme;
-}
-
-// ─── Tooltip ────────────────────────────────────────────
-export interface TooltipProps {
-	variant?: 'text' | 'icon';
-	label?: string;
-	content?: string;
-	isInverse?: boolean;
-	theme?: Theme;
-}
-
-// ─── Skeleton ───────────────────────────────────────────
-export const SkeletonTypes = ['heading', 'subheading', 'text', 'circle', 'card', 'container', 'spacer'] as const;
-export type SkeletonType = (typeof SkeletonTypes)[number];
-
-export const SkeletonWidths = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] as const;
-export type SkeletonWidth = (typeof SkeletonWidths)[number];
-
-export const SkeletonHeights = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] as const;
-export type SkeletonHeight = (typeof SkeletonHeights)[number];
-
-export interface SkeletonProps {
-	type?: SkeletonType;
-	variant?: 'filled' | 'outlined';
-	width?: SkeletonWidth;
-	widthXs?: SkeletonWidth;
-	height?: SkeletonHeight;
-	roundedBottom?: boolean;
-	theme?: Theme;
-}
-
-// ─── Skeleton Layout ────────────────────────────────────
-export interface SkeletonLayoutProps {
-	direction?: 'row' | 'column';
-	gap?: 'sm' | 'md';
-	justifyBetween?: boolean;
-	theme?: Theme;
+// ─── Accordion ─────────────────────────────────────────
+export interface AccordionProps {
+	hasImage?: 'none' | 'logo' | 'icon';
+	logoUrl?: string;
+	icon?: string;
+	headingLevel?: number;
+	headingText: string;
+	subTitle?: string;
+	content: string;
+	openState?: boolean;
 }
 
-// ─── Show More Or Less ──────────────────────────────────
-export interface ShowMoreOrLessProps {
-	isOpen?: boolean;
-	textOnly?: boolean;
+export interface AccordionGroupProps extends AccordionProps {
+	group?: 'none' | 'default' | 'divider';
+	groupLength?: number;
+	intro?: string;
 	toggleOpen?: string;
 	toggleClose?: string;
-	isInverse?: boolean;
-	theme?: Theme;
 }
 
 // ─── Active Tag ─────────────────────────────────────────
@@ -128,46 +38,6 @@ export interface ActiveTagProps {
 	theme?: Theme;
 }
 
-// ─── Info Tag ───────────────────────────────────────────
-export interface InfoTagProps {
-	variant?: 'info' | 'neutral' | 'scarcity' | 'local-product';
-	size?: 'small' | 'medium';
-	label?: string;
-	leadingIcon?: boolean;
-	leadingIconAsset?: string;
-	theme?: Theme;
-}
-
-// ─── Promo Tag ──────────────────────────────────────────
-export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
-export type PromoTagSize = (typeof PromoTagSizes)[number];
-
-export interface PromoTagProps {
-	icon?: string;
-	label?: string;
-	circleIcon?: boolean;
-	filled?: boolean;
-	size?: PromoTagSize;
-	theme?: Theme;
-}
-
-// ─── Divider ───────────────────────────────────────────
-export interface DividerProps {
-	variant?: 'horizontal' | 'vertical';
-	weight?: 'light' | 'medium' | 'heavy';
-	style?: 'solid' | 'dashed';
-	color?: 'default' | 'strong' | 'inverse';
-	theme?: Theme;
-}
-
-// ─── Loader ────────────────────────────────────────────
-export interface LoaderProps {
-	size?: 'small' | 'medium' | 'large';
-	message?: string;
-	messageVisible?: boolean;
-	theme?: Theme;
-}
-
 // ─── Alert ─────────────────────────────────────────────
 export interface AlertProps {
 	variant?: 'info' | 'error' | 'warning' | 'success';
@@ -184,209 +54,166 @@ export interface AlertProps {
 	theme?: Theme;
 }
 
-// ─── List ──────────────────────────────────────────────
-export type ListVariant = 'bulleted' | 'numbered' | 'icon' | 'image';
-export type ListTextVariant = 'default' | 'strong' | 'label';
-export type ListIconSize = 'small' | 'medium' | 'large';
-
-export interface ListProps {
-	variant?: ListVariant;
-	textVariant?: ListTextVariant;
-	iconSize?: ListIconSize;
-	columns?: boolean;
-	inverse?: boolean;
-	altShape?: boolean;
-	start?: number;
-	theme?: Theme;
-}
-
-// ─── Input Chip ────────────────────────────────────────
-export interface InputChipOption {
+// ─── Anchor Tabs ───────────────────────────────────────
+export interface AnchorTab {
 	label: string;
-	value: string;
+	href: string;
+	icon?: string;
+	disabled?: boolean;
+	sectionContent?: string;
 }
 
-export interface InputChipProps {
-	variant?: 'choice' | 'month-calendar';
-	inputType?: 'radio' | 'checkbox';
-	name?: string;
-	options?: InputChipOption[];
-	defaultValue?: string | string[];
-	disabled?: boolean;
-	theme?: Theme;
+export interface AnchorTabsProps {
+	icon?: string;
+	ariaLabelledby?: string;
+	tabs?: AnchorTab[];
+	sticky?: boolean;
 }
 
-// ─── Input Count ───────────────────────────────────────
-export interface InputCountOption {
+// ─── Breadcrumb ────────────────────────────────────────
+export interface BreadcrumbItem {
 	label: string;
-	value: string;
+	href: string;
+	isCurrent?: boolean;
 }
 
-export interface InputCountProps {
-	name?: string;
-	options?: InputCountOption[];
-	defaultValue?: string;
-	disabled?: boolean;
-	theme?: Theme;
+export interface BreadcrumbProps {
+	breadcrumbItems: BreadcrumbItem[];
+	ariaLabel?: string;
 }
 
-// ─── Input Switch ──────────────────────────────────────
-export interface InputSwitchProps {
-	labelText?: string;
-	labelOption?: 'default' | 'title';
-	state?: boolean;
-	disabled?: boolean;
+// ─── Button ──────────────────────────────────────────────
+export interface ButtonProps {
+	element?: 'a' | 'button' | 'span';
+	variant?: ButtonVariantBase | 'tertiary';
+	size?: 'medium' | 'large';
+	isDisabled?: boolean;
+	label?: string;
+	accessibleLabel?: string;
+	widthRestrict?: boolean;
+	icon?: IconPosition;
+	iconAsset?: string;
 	theme?: Theme;
 }
 
-// ─── Input Select ──────────────────────────────────────
-export interface InputSelectProps {
-	inputText?: string;
-	icon?: string;
-	disabled?: boolean;
-	theme?: Theme;
+// ─── Card Article ──────────────────────────────────────
+export interface CardArticleProps {
+	type?: 'static' | 'link' | 'multi-link';
+	elementType?: 'anchor' | 'button';
+	content?: 'short' | 'medium' | 'long' | 'rich';
+	headingText?: string;
 }
 
-// ─── Input Text ────────────────────────────────────────
-export interface InputTextProps {
-	type?: 'text' | 'number' | 'password' | 'search' | 'date';
-	icon?: string;
-	disabled?: boolean;
-	valid?: boolean;
-	theme?: Theme;
+// ─── Card Icon ─────────────────────────────────────────
+export interface CardIconProps {
+	type?: 'static' | 'link';
+	size?: 'small' | 'large';
+	elementType?: 'anchor' | 'button';
+	hasLabel?: boolean;
+	labelText?: string;
+	cardText?: string;
 }
 
-// ─── Pagination ────────────────────────────────────────
-export interface PaginationProps {
-	currentPage?: number;
-	totalPages?: number;
-	shouldUseLinks?: boolean;
-	customAriaLabel?: string;
-	theme?: Theme;
-}
-
-// ─── Textarea ──────────────────────────────────────────
-export interface TextareaProps {
-	textareaValue?: string;
-	charCount?: number;
+// ─── Card Selectable ───────────────────────────────────
+export interface CardSelectableProps {
 	disabled?: boolean;
-	theme?: Theme;
-}
-
-// ─── Ratings: shared ───────────────────────────────────
-export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t';
-export type RangeIconsSize = 'medium' | 'large';
-
-export interface SchemaProps {
-	reviewCount?: number;
-	itemName?: string;
-	author?: string;
-	reviewAspect?: string;
+	dashed?: boolean;
+	cardType?: 'card' | 'radio' | 'checkbox';
+	cardCount?: number;
+	showVisibleInput?: boolean;
+	visibleInputLocation?: 'top' | 'bottom';
+	cardLabelText?: string;
+	cardContentText?: string;
+	contentLayout?: 'content only' | 'title only' | 'title and content';
+	selectedIndex?: number;
+	clickableArea?: 'input' | 'card';
+	includeImage?: boolean;
 }
 
-// ─── Ratings: Numerical (9/10) ─────────────────────────
-export type NumericalType = 'rating' | 'filter';
-export type NumericalVariant = 'brand' | 'alt';
-
-export interface NumericalProps {
-	type?: NumericalType;
-	variant?: NumericalVariant;
-	score?: number;
-	word?: boolean;
-	link?: boolean;
-	inverse?: boolean;
-	theme?: Theme;
+// ─── Datepicker ────────────────────────────────────────
+export interface DatepickerProps {
+	rangeSelection?: boolean;
+	dualView?: boolean;
+	scrollableMobile?: boolean;
+	weekNumbers?: boolean;
+	weekLabel?: string;
+	weekLabelFull?: string;
+	hideInput?: boolean;
+	separateCal?: boolean;
+	value?: string;
+	minDate?: string;
+	maxDate?: string;
+	previousLabel?: string;
+	nextLabel?: string;
+	locale?: string;
 }
 
-// ─── Ratings: Percentage (HolidayCheck) ────────────────
-export type RatingPercentageVariant = 'default' | 'compact';
-
-export interface RatingPercentageProps {
-	variant?: RatingPercentageVariant;
-	rating?: number;
-	reviews?: number;
-	link?: boolean;
+// ─── Divider ───────────────────────────────────────────
+export interface DividerProps {
+	variant?: 'horizontal' | 'vertical';
+	weight?: 'light' | 'medium' | 'heavy';
+	style?: 'solid' | 'dashed';
+	color?: 'default' | 'strong' | 'inverse';
 	theme?: Theme;
 }
 
-// ─── Ratings: Range bar ────────────────────────────────
-export type RangeBarVariant = 'customer-review' | 'tripadvisor';
-
-export interface RangeBarProps {
-	variant?: RangeBarVariant;
+// ─── Flyout Dropdown ───────────────────────────────────
+export interface FlyoutDropdownProps {
+	variant?: 'default' | 'menu-flyout';
 	label?: string;
-	scoreTripadvisor?: number;
-	scoreCustomerReview?: number;
-	icon?: string;
-	hasSchema?: boolean;
-	additionalSchemaProps?: SchemaProps;
-	theme?: Theme;
+	primaryButtonLabel?: string;
+	secondaryButtonLabel?: string;
+	closeButtonLabel?: string;
+	scrollerAriaLabel?: string;
 }
 
-// ─── Ratings: Range icons (Sun/Star/Tripadvisor/TUI-T) ─
-export interface RangeIconsProps {
-	variant?: RangeIconsVariant;
-	size?: RangeIconsSize;
-	label?: string;
-	linkLabel?: string;
-	scoreT?: number;
-	scoreSun?: number;
-	scoreStar?: number;
-	scoreTripadvisor?: number;
-	hasLink?: boolean;
-	hasPlus?: boolean;
-	hasTooltip?: boolean;
-	tooltipText?: string;
-	hasLeadingImage?: boolean;
-	isInverse?: boolean;
-	hasSchema?: boolean;
-	additionalSchemaProps?: SchemaProps;
+// ─── Form Row ────────────────────────────────────────────
+export interface FormRowProps {
+	labelText?: string;
+	reduced?: boolean;
+	hint?: boolean;
+	hintText?: string;
+	error?: boolean;
+	errorText?: string;
+	group?: boolean;
 	theme?: Theme;
 }
 
-// ─── Ratings: Range icons group ────────────────────────
-export interface RangeIconsGroupItem {
-	categoryLabel: string;
-	score: number;
+// ─── Hero ──────────────────────────────────────────────
+export interface HeroProps {
+	alignment?: 'left' | 'right' | 'center';
+	reduced?: boolean;
+	variant?: 'default' | 'default slim' | 'flagship' | 'flagship slim' | 'illustration';
+	heading?: string;
+	content?: string;
+	hideButton?: boolean;
+	buttonLabel?: string;
+	caveat?: string;
+	imageUrl?: string;
+	altText?: string;
 }
 
-export interface RangeIconsGroupProps {
-	variant?: RangeIconsVariant;
-	size?: RangeIconsSize;
-	items?: RangeIconsGroupItem[];
+// ─── Icon ────────────────────────────────────────────────
+export interface IconProps {
+	type?: 'standard' | 'color' | 'bullet';
+	nameStandard?: string;
+	nameColor?: string;
+	nameBullet?: string;
+	size?: IconSize;
+	color?: string;
 	theme?: Theme;
 }
 
-// ─── Accordion ─────────────────────────────────────────
-export interface AccordionProps {
-	hasImage?: 'none' | 'logo' | 'icon';
-	logoUrl?: string;
-	icon?: string;
-	headingLevel?: number;
-	headingText: string;
-	subTitle?: string;
-	content: string;
-	openState?: boolean;
-}
-
-export interface AccordionGroupProps extends AccordionProps {
-	group?: 'none' | 'default' | 'divider';
-	groupLength?: number;
-	intro?: string;
-	toggleOpen?: string;
-	toggleClose?: string;
-}
-
-// ─── Breadcrumb ────────────────────────────────────────
-export interface BreadcrumbItem {
-	label: string;
-	href: string;
-	isCurrent?: boolean;
-}
-
-export interface BreadcrumbProps {
-	breadcrumbItems: BreadcrumbItem[];
-	ariaLabel?: string;
+// ─── Icon Button ─────────────────────────────────────────
+export interface IconButtonProps {
+	element?: 'a' | 'button';
+	variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
+	size?: 'small' | 'medium' | 'large';
+	isDisabled?: boolean;
+	label?: string;
+	iconAsset?: string;
+	selected?: boolean;
+	theme?: Theme;
 }
 
 // ─── Image ─────────────────────────────────────────────
@@ -415,37 +242,30 @@ export interface ImageProps {
 	focalPoint?: ImageFocalPoint;
 }
 
-// ─── Rich Text ─────────────────────────────────────────
-export interface RichTextProps {
+// ─── In-Page Tabs ──────────────────────────────────────
+export interface InPageTab {
+	label: string;
 	content?: string;
-	isComponent?: boolean;
-	isInverse?: boolean;
+	icon?: string;
+	disabled?: boolean;
 }
 
-// ─── Media Button ──────────────────────────────────────
-export interface MediaButtonProps {
-	element?: 'a' | 'button';
-	label?: string;
-	accessibleLabel?: string;
-	icon?: IconPosition;
-	iconAsset?: string;
-	isDisabled?: boolean;
+export interface InPageTabsProps {
+	variant?: 'left-aligned' | 'full-width';
+	icon?: string;
+	active?: string;
+	ariaLabelledby?: string;
+	tabs?: InPageTab[];
 }
 
-// ─── Price ─────────────────────────────────────────────
-export interface PriceProps {
-	size?: 'small' | 'medium' | 'large';
-	currency?: 'GBP' | 'EUR' | 'USD' | 'SEK' | 'NOK' | 'DKK';
-	mainUnit?: string;
-	subUnit?: string;
-	suffix?: string;
-	prefix?: boolean;
-	totalPrice?: boolean;
-	totalPriceValue?: string;
-	promo?: boolean;
-	originalPrice?: string;
-	discount?: string;
-	showDecimal?: boolean;
+// ─── Info Tag ───────────────────────────────────────────
+export interface InfoTagProps {
+	variant?: 'info' | 'neutral' | 'scarcity' | 'local-product';
+	size?: 'small' | 'medium';
+	label?: string;
+	leadingIcon?: boolean;
+	leadingIconAsset?: string;
+	theme?: Theme;
 }
 
 // ─── Input Checkbox ────────────────────────────────────
@@ -456,16 +276,61 @@ export interface InputCheckboxProps {
 	disabled?: boolean;
 }
 
-// ─── Input Radio ───────────────────────────────────────
-export interface InputRadioProps {
-	variant?: 'default' | 'strong' | 'title';
+// ─── Input Chip ────────────────────────────────────────
+export interface InputChipOption {
+	label: string;
+	value: string;
+}
+
+export interface InputChipProps {
+	variant?: 'choice' | 'month-calendar';
+	inputType?: 'radio' | 'checkbox';
+	name?: string;
+	options?: InputChipOption[];
+	defaultValue?: string | string[];
 	disabled?: boolean;
+	theme?: Theme;
 }
 
-// ─── Input Slider ──────────────────────────────────────
-export interface InputSliderProps {
-	min?: number;
-	max?: number;
+// ─── Input Count ───────────────────────────────────────
+export interface InputCountOption {
+	label?: string;
+	value?: string;
+}
+
+export interface InputCountProps {
+	name?: string;
+	options?: InputCountOption[];
+	defaultValue?: string;
+	disabled?: boolean;
+	theme?: Theme;
+}
+
+// ─── Input Radio ───────────────────────────────────────
+export interface InputRadioProps {
+	variant?: 'default' | 'strong' | 'title';
+	disabled?: boolean;
+}
+
+// ─── Input Radio Scroll ────────────────────────────────
+export interface InputRadioScrollProps {
+	instructionText?: string;
+	previousText?: string;
+	nextText?: string;
+}
+
+// ─── Input Select ──────────────────────────────────────
+export interface InputSelectProps {
+	inputText?: string;
+	icon?: string;
+	disabled?: boolean;
+	theme?: Theme;
+}
+
+// ─── Input Slider ──────────────────────────────────────
+export interface InputSliderProps {
+	min?: number;
+	max?: number;
 	step?: number;
 	value?: number | null;
 	minLabel?: string;
@@ -484,22 +349,70 @@ export interface InputStepperProps {
 	disabled?: boolean;
 }
 
-// ─── Datepicker ────────────────────────────────────────
-export interface DatepickerProps {
-	rangeSelection?: boolean;
-	dualView?: boolean;
-	scrollableMobile?: boolean;
-	weekNumbers?: boolean;
-	weekLabel?: string;
-	weekLabelFull?: string;
-	hideInput?: boolean;
-	separateCal?: boolean;
-	value?: string;
-	minDate?: string;
-	maxDate?: string;
-	previousLabel?: string;
-	nextLabel?: string;
-	locale?: string;
+// ─── Input Switch ──────────────────────────────────────
+export interface InputSwitchProps {
+	labelText?: string;
+	labelOption?: 'default' | 'title';
+	state?: boolean;
+	disabled?: boolean;
+	theme?: Theme;
+}
+
+// ─── Input Text ────────────────────────────────────────
+export interface InputTextProps {
+	type?: 'text' | 'number' | 'password' | 'search' | 'date';
+	icon?: string;
+	disabled?: boolean;
+	valid?: boolean;
+	theme?: Theme;
+}
+
+// ─── Link ────────────────────────────────────────────────
+export interface LinkProps {
+	href?: string;
+	label?: string;
+	accessibleLabel?: string;
+	headingLink?: 'none' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	isButtonLink?: boolean;
+	isInverse?: boolean;
+	icon?: IconPosition;
+	iconAsset?: string;
+	isExternal?: boolean;
+	theme?: Theme;
+}
+
+// ─── List ──────────────────────────────────────────────
+export type ListVariant = 'bulleted' | 'numbered' | 'icon' | 'image';
+export type ListTextVariant = 'default' | 'strong' | 'label';
+export type ListIconSize = 'small' | 'medium' | 'large';
+
+export interface ListProps {
+	variant?: ListVariant;
+	textVariant?: ListTextVariant;
+	iconSize?: ListIconSize;
+	columns?: boolean;
+	inverse?: boolean;
+	altShape?: boolean;
+	start?: number;
+	theme?: Theme;
+}
+
+// ─── Loader ────────────────────────────────────────────
+export interface LoaderProps {
+	size?: 'small' | 'medium' | 'large';
+	message?: string;
+	messageVisible?: boolean;
+	theme?: Theme;
+}
+
+// ─── Media Button ──────────────────────────────────────
+export interface MediaButtonProps {
+	element?: 'a' | 'button';
+	label?: string;
+	accessibleLabel?: string;
+	icon?: IconPosition;
+	iconAsset?: string;
+	isDisabled?: boolean;
 }
 
 // ─── Modal ─────────────────────────────────────────────
@@ -512,70 +425,149 @@ export interface ModalProps {
 	scrollerAriaLabel?: string;
 }
 
-// ─── Hero ──────────────────────────────────────────────
-export interface HeroProps {
-	alignment?: 'left' | 'right' | 'center';
-	reduced?: boolean;
-	variant?: 'default' | 'default slim' | 'flagship' | 'flagship slim' | 'illustration';
-	heading?: string;
-	content?: string;
-	hideButton?: boolean;
-	buttonLabel?: string;
-	caveat?: string;
-	imageUrl?: string;
-	altText?: string;
+// ─── Pagination ────────────────────────────────────────
+export interface PaginationProps {
+	currentPage?: number;
+	totalPages?: number;
+	shouldUseLinks?: boolean;
+	customAriaLabel?: string;
+	theme?: Theme;
 }
 
-// ─── Scroller ──────────────────────────────────────────
-export interface ScrollerProps {
-	isHorizontal?: boolean;
-	hasFade?: boolean;
-	isInverse?: boolean;
+// ─── Price ─────────────────────────────────────────────
+export interface PriceProps {
+	size?: 'small' | 'medium' | 'large';
+	currency?: 'GBP' | 'EUR' | 'USD' | 'SEK' | 'NOK' | 'DKK';
+	mainUnit?: string;
+	subUnit?: string;
+	suffix?: string;
+	prefix?: boolean;
+	totalPrice?: boolean;
+	totalPriceValue?: string;
+	promo?: boolean;
+	originalPrice?: string;
+	discount?: string;
+	showDecimal?: boolean;
+}
+
+// ─── Promo Tag ──────────────────────────────────────────
+export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
+export type PromoTagSize = (typeof PromoTagSizes)[number];
+
+export interface PromoTagProps {
+	icon?: string;
 	label?: string;
+	circleIcon?: boolean;
+	filled?: boolean;
+	size?: PromoTagSize;
+	theme?: Theme;
 }
 
-// ─── Flyout Dropdown ───────────────────────────────────
-export interface FlyoutDropdownProps {
-	variant?: 'default' | 'menu-flyout';
+// ─── Ratings: Numerical (9/10) ─────────────────────────
+export type NumericalType = 'rating' | 'filter';
+export type NumericalVariant = 'brand' | 'alt';
+
+export interface NumericalProps {
+	type?: NumericalType;
+	variant?: NumericalVariant;
+	score?: number;
+	word?: boolean;
+	link?: boolean;
+	inverse?: boolean;
+	theme?: Theme;
+}
+
+// ─── Ratings: Percentage (HolidayCheck) ────────────────
+export type RatingPercentageVariant = 'default' | 'compact';
+
+export interface RatingPercentageProps {
+	variant?: RatingPercentageVariant;
+	rating?: number;
+	reviews?: number;
+	link?: boolean;
+	theme?: Theme;
+}
+
+// ─── Ratings: Range bar ────────────────────────────────
+export type RangeBarVariant = 'customer-review' | 'tripadvisor';
+
+export interface RangeBarProps {
+	variant?: RangeBarVariant;
 	label?: string;
-	primaryButtonLabel?: string;
-	secondaryButtonLabel?: string;
-	closeButtonLabel?: string;
-	scrollerAriaLabel?: string;
+	score?: number;
+	/** @deprecated Use `score` instead */
+	scoreTripadvisor?: number;
+	/** @deprecated Use `score` instead */
+	scoreCustomerReview?: number;
+	/** @deprecated Icon is no longer supported */
+	icon?: string;
+	hasSchema?: boolean;
+	additionalSchemaProps?: SchemaProps;
+	/** @deprecated Theme is no longer supported for this component */
+	theme?: Theme;
+	isGroup?: boolean;
 }
 
-// ─── Card Article ──────────────────────────────────────
-export interface CardArticleProps {
-	type?: 'static' | 'link' | 'multi-link';
-	elementType?: 'anchor' | 'button';
-	content?: 'short' | 'medium' | 'long' | 'rich';
-	headingText?: string;
+// ─── Ratings: Range icons (Sun/Star/TUI/TripAdvisor/TUI-T) ─
+export interface RangeIconsProps {
+	variant?: RangeIconsVariant;
+	size?: RangeIconsSize;
+	label?: string;
+	linkLabel?: string;
+	scoreT?: number;
+	scoreCustomer?: number;
+	scoreSun?: number;
+	scoreStar?: number;
+	scoreTripadvisor?: number;
+	hasLink?: boolean;
+	hasPlus?: boolean;
+	hasTooltip?: boolean;
+	tooltipText?: string;
+	hasLeadingImage?: boolean;
+	isInverse?: boolean;
+	hasSchema?: boolean;
+	additionalSchemaProps?: SchemaProps;
+	theme?: Theme;
 }
 
-// ─── Card Icon ─────────────────────────────────────────
-export interface CardIconProps {
-	type?: 'static' | 'link';
-	size?: 'small' | 'large';
-	elementType?: 'anchor' | 'button';
-	hasLabel?: boolean;
-	labelText?: string;
-	cardText?: string;
+// ─── Ratings: Range icons group ────────────────────────
+export interface RangeIconsGroupItem {
+	categoryLabel: string;
+	score: number;
+	hasPlus?: boolean;
 }
 
-// ─── Card Selectable ───────────────────────────────────
-export interface CardSelectableProps {
-	disabled?: boolean;
-	dashed?: boolean;
-	cardType?: 'card' | 'radio' | 'checkbox';
-	cardCount?: number;
-	showVisibleInput?: boolean;
-	visibleInputLocation?: 'top' | 'bottom';
-	cardLabelText?: string;
-	cardContentText?: string;
-	contentLayout?: 'content only' | 'title only' | 'title and content';
-	selectedIndex?: number;
-	clickableArea?: 'input' | 'card';
-	includeImage?: boolean;
+export interface RangeIconsGroupProps {
+	variant?: RangeIconsVariant;
+	size?: RangeIconsSize;
+	items?: RangeIconsGroupItem[];
+	theme?: Theme;
+}
+
+// ─── Ratings: shared ───────────────────────────────────
+export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t' | 'customer';
+export type RangeIconsSize = 'medium' | 'large';
+
+export interface SchemaProps {
+	reviewCount?: number;
+	itemName?: string;
+	author?: string;
+	reviewAspect?: string;
+}
+
+// ─── Rich Text ─────────────────────────────────────────
+export interface RichTextProps {
+	content?: string;
+	isComponent?: boolean;
+	isInverse?: boolean;
+}
+
+// ─── Scroller ──────────────────────────────────────────
+export interface ScrollerProps {
+	isHorizontal?: boolean;
+	hasFade?: boolean;
+	isInverse?: boolean;
+	label?: string;
 }
 
 // ─── Search Card ───────────────────────────────────────
@@ -590,34 +582,68 @@ export interface SearchCardProps {
 	toggleClose?: string;
 }
 
-// ─── In-Page Tabs ──────────────────────────────────────
-export interface InPageTab {
-	label: string;
-	content?: string;
-	icon?: string;
-	disabled?: boolean;
+// ─── Show More Or Less ──────────────────────────────────
+export interface ShowMoreOrLessProps {
+	isOpen?: boolean;
+	textOnly?: boolean;
+	toggleOpen?: string;
+	toggleClose?: string;
+	isInverse?: boolean;
+	theme?: Theme;
 }
 
-export interface InPageTabsProps {
-	variant?: 'left-aligned' | 'full-width';
-	icon?: string;
-	active?: string;
-	ariaLabelledby?: string;
-	tabs?: InPageTab[];
+// ─── Skeleton ───────────────────────────────────────────
+export const SkeletonTypes = ['heading', 'subheading', 'text', 'circle', 'card', 'container', 'spacer'] as const;
+export type SkeletonType = (typeof SkeletonTypes)[number];
+
+export const SkeletonWidths = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] as const;
+export type SkeletonWidth = (typeof SkeletonWidths)[number];
+
+export const SkeletonHeights = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] as const;
+export type SkeletonHeight = (typeof SkeletonHeights)[number];
+
+export interface SkeletonProps {
+	type?: SkeletonType;
+	variant?: 'filled' | 'outlined';
+	width?: SkeletonWidth;
+	widthXs?: SkeletonWidth;
+	height?: SkeletonHeight;
+	roundedBottom?: boolean;
+	theme?: Theme;
 }
 
-// ─── Anchor Tabs ───────────────────────────────────────
-export interface AnchorTab {
-	label: string;
-	href: string;
-	icon?: string;
+// ─── Skeleton Layout ────────────────────────────────────
+export interface SkeletonLayoutProps {
+	direction?: 'row' | 'column';
+	gap?: 'sm' | 'md';
+	justifyBetween?: boolean;
+	theme?: Theme;
+}
+
+// ─── Textarea ──────────────────────────────────────────
+export interface TextareaProps {
+	textareaValue?: string;
+	charCount?: number;
 	disabled?: boolean;
-	sectionContent?: string;
+	theme?: Theme;
 }
 
-export interface AnchorTabsProps {
-	icon?: string;
-	ariaLabelledby?: string;
-	tabs?: AnchorTab[];
-	sticky?: boolean;
+// ─── Tooltip ────────────────────────────────────────────
+export interface TooltipProps {
+	variant?: 'text' | 'icon';
+	label?: string;
+	content?: string;
+	isInverse?: boolean;
+	theme?: Theme;
+}
+
+// ─── Travel Aware Banner ─────────────────────────────────────────────
+export interface TravelAwareBannerProps {
+	imageUrl?: string;
+	imageText?: string;
+	heading?: string;
+	linkUrl?: string;
+	linkText?: string;
+	linkAccessibilityLabel?: string;
+	isExternal?: boolean;
 }