@tui/design-system 1.0.0 → 1.1.1

package/scss/variables/base-theme.json

@@ -219,11 +219,20 @@
 			"description": "Specific brand colours",
 			"displayType": "color",
 			"tokens": {
-				"color-brand-trip-advisor": {
-					"primitive": "color-brand-trip-advisor-green",
-					"title": "Trip Advisor",
+				"color-brand-tripadvisor": {
+					"primitive": "color-brand-tripadvisor-green-60",
+					"title": "TripAdvisor",
 					"lowContrast": true
 				},
+				"color-brand-tripadvisor-pine-green": {
+					"primitive": "color-brand-tripadvisor-pine-green",
+					"title": "TripAdvisor pine green",
+					"darkColor": true
+				},
+				"color-brand-tripadvisor-inverse": {
+					"primitive": "color-brand-tripadvisor-trip-green",
+					"title": "TripAdvisor inverse"
+				},
 				"color-brand-paypal": {
 					"primitive": "color-brand-paypal-blue",
 					"title": "PayPal",
@@ -1061,12 +1070,6 @@
 				"title": "Selected border colour",
 				"description": "Selected border colour"
 			},
-			"card-selectable-disabled-text-color": {
-				"displayType": "color",
-				"primitive": "uilib-color-other-disabled-soft",
-				"title": "Disabled text colour",
-				"description": "Disabled text colour"
-			},
 			"card-selectable-selected-icon": {
 				"displayType": "icon",
 				"title": "Icon for selected card",
@@ -1163,6 +1166,16 @@
 			}
 		}
 	},
+	"flyout-dropdown": {
+		"tokens": {
+			"flyout-dropdown-close-icon": {
+				"displayType": "icon",
+				"title": "Close Icon ",
+				"description": "Flyout Dropdown close button icon",
+				"longValue": true
+			}
+		}
+	},
 	"form-row": {
 		"tokens": {
 			"form-row-label-font": {
@@ -1568,12 +1581,6 @@
 				"title": "Selected hover background colour",
 				"description": "Hover background colour when selected"
 			},
-			"input-chip-disabled-text-color": {
-				"displayType": "color",
-				"primitive": "uilib-color-other-disabled-soft",
-				"title": "Disabled text colour",
-				"description": "Disabled text colour"
-			},
 			"input-chip-disabled-bg-color": {
 				"displayType": "color",
 				"primitive": "uilib-color-core-neutral",
@@ -2248,7 +2255,7 @@
 			"ratings-range-bar-tripadvisor-bar-color": {
 				"title": "Tripadvisor range bar colour",
 				"description": "Tripadvisor range bar colour",
-				"primitive": "--uilib-color-brand-trip-advisor"
+				"primitive": "--uilib-color-brand-tripadvisor"
 			},
 			"ratings-range-bar-tripadvisor-bar-bg-color": {
 				"title": "Tripadvisor range bar background",

package/scss/variables.scss

@@ -29,6 +29,7 @@
 @forward 'lib/cards/selectable/variables';
 @forward 'lib/divider/variables';
 @forward 'lib/flight-details/variables';
+@forward 'lib/flyout-dropdown/variables';
 @forward 'lib/forms/datepicker/variables';
 @forward 'lib/forms/form-row/variables';
 @forward 'lib/forms/input-checkbox/variables';

package/types/components.ts

@@ -429,6 +429,7 @@ export interface MediaButtonProps {
 	accessibleLabel?: string;
 	icon?: IconPosition;
 	iconAsset?: string;
+	isDisabled?: boolean;
 }
 
 // ─── Price ─────────────────────────────────────────────
@@ -508,6 +509,7 @@ export interface ModalProps {
 	primaryButtonLabel?: string;
 	secondaryButtonLabel?: string;
 	closeButtonLabel?: string;
+	scrollerAriaLabel?: string;
 }
 
 // ─── Hero ──────────────────────────────────────────────
@@ -534,12 +536,12 @@ export interface ScrollerProps {
 
 // ─── Flyout Dropdown ───────────────────────────────────
 export interface FlyoutDropdownProps {
-	variant?: 'variable-height' | 'menu-flyout';
-	arrowPosition?: 'centre' | 'left' | 'right';
-	hasHeader?: boolean;
-	hasHeaderDivider?: boolean;
-	hasFooter?: boolean;
+	variant?: 'default' | 'menu-flyout';
 	label?: string;
+	primaryButtonLabel?: string;
+	secondaryButtonLabel?: string;
+	closeButtonLabel?: string;
+	scrollerAriaLabel?: string;
 }
 
 // ─── Card Article ──────────────────────────────────────
@@ -573,6 +575,7 @@ export interface CardSelectableProps {
 	contentLayout?: 'content only' | 'title only' | 'title and content';
 	selectedIndex?: number;
 	clickableArea?: 'input' | 'card';
+	includeImage?: boolean;
 }
 
 // ─── Search Card ───────────────────────────────────────