@tui/design-system 1.7.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +99 -1
  2. package/dist/themes/crystalski/index.css +30 -0
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +30 -0
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +30 -0
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +10 -9
  9. package/scss/lib/accordion/_mixins.scss +12 -3
  10. package/scss/lib/cards/carousel/_index.scss +3 -0
  11. package/scss/lib/cards/carousel/_mixins.scss +164 -0
  12. package/scss/lib/cards/carousel/_variables.scss +13 -0
  13. package/scss/lib/forms/input-stepper/_mixins.scss +1 -3
  14. package/scss/lib/highlight-panel/_index.scss +2 -0
  15. package/scss/lib/highlight-panel/_mixins.scss +244 -0
  16. package/scss/lib/highlight-panel/_variables.scss +21 -0
  17. package/scss/lib/list/_mixins.scss +51 -0
  18. package/scss/lib/list/_variables.scss +1 -0
  19. package/scss/lib/patterns/edit-search/_index.scss +3 -0
  20. package/scss/lib/patterns/edit-search/_mixins.scss +98 -0
  21. package/scss/lib/patterns/edit-search/_variables.scss +7 -0
  22. package/scss/lib/patterns/review-card/_index.scss +3 -0
  23. package/scss/lib/patterns/review-card/_mixins.scss +283 -0
  24. package/scss/lib/patterns/review-card/_variables.scss +3 -0
  25. package/scss/lib/patterns/review-summary/_index.scss +3 -0
  26. package/scss/lib/patterns/review-summary/_mixins.scss +156 -0
  27. package/scss/lib/patterns/review-summary/_variables.scss +3 -0
  28. package/scss/lib/ratings-reviews/range-bar/_mixins.scss +3 -2
  29. package/scss/lib/ratings-reviews/range-icons/_mixins.scss +16 -2
  30. package/scss/lib/ratings-reviews/range-icons/_variables.scss +2 -0
  31. package/scss/mixins.scss +7 -0
  32. package/scss/themes/crystalski/_overrides.scss +17 -0
  33. package/scss/themes/crystalski/index.scss +10 -0
  34. package/scss/themes/crystalski/theme.json +7 -0
  35. package/scss/themes/firstchoice/_overrides.scss +19 -0
  36. package/scss/themes/firstchoice/index.scss +10 -0
  37. package/scss/themes/firstchoice/theme.json +13 -0
  38. package/scss/themes/tui/_overrides.scss +19 -0
  39. package/scss/themes/tui/index.scss +10 -0
  40. package/scss/themes/tui/theme.json +8 -0
  41. package/scss/variables/_grid.scss +3 -3
  42. package/scss/variables/_primitives.scss +3 -0
  43. package/scss/variables/base-theme.json +191 -1
  44. package/scss/variables.scss +7 -0
  45. package/types/components.ts +40 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,103 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.9.0
4
+
5
+ ### Added
6
+
7
+ #### [Edit search](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-edit-search-or-unit--docs)
8
+
9
+ - Added the edit search or unit component that allows users to refine their journey from the Unit Details page without returning to earlier stages of
10
+ the experience. This is designed to minimise visual noise by remaining hidden until required, helping to keep the focus on the unit information.
11
+
12
+ #### [Review summary](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-review-summary--docs)
13
+
14
+ - Added Review Summary pattern that displays hotel review summary data. It presents an overall score with rating indicators, a breakdown by label with
15
+ progress bars, and per-category scores.
16
+
17
+ ### Updated
18
+
19
+ #### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs)
20
+
21
+ - Added schema guidance for score distribution breakdowns (Excellent, Good, etc.) — no JSON-LD should be included in this scenario
22
+ - Updated the bar styling slightly, making the bar itself 16px high (matching the range icon sizing) and also matching the group spacing so that both
23
+ range bar group and range icon group align.
24
+
25
+ ### Fixed
26
+
27
+ #### [Tooltip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tooltip--docs)
28
+
29
+ - Added `tooltip-root` attribute for MFE and Shadow DOM usage. The tooltip overlay is appended inside the specified root container, ensuring it
30
+ inherits scoped UILIB styles and remains positioned within the MFE boundary.
31
+ - Replaced `mousedown`/`mouseup` event listeners with `pointerdown` to fix an issue where keyboard-only tooltip opening was incorrectly triggered when
32
+ clicking the trigger inside a Shadow DOM or MFE.
33
+
34
+ ## v1.8.0
35
+
36
+ ### Added
37
+
38
+ #### [Card Carousel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-carousel--docs)
39
+
40
+ - New carousel component for horizontally navigating consumer-provided content items such as product cards, image galleries, or promotional banners.
41
+ Enhances static, natively scrollable markup into an Embla-driven carousel with `page` and `item` variants, and remains usable without JavaScript via
42
+ native horizontal scrolling.
43
+
44
+ #### [Highlight Panel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-highlight-panel--docs)
45
+
46
+ - Added the Highlight Panel which is a structural component for presenting content with elevated prominence. It provides a header, a collapsible
47
+ (optional) detail area, and an optional footer — suitable for summarised overviews, key information panels, or any context that benefits from a
48
+ clear visual hierarchy between a condensed summary and expandable detail.
49
+
50
+ #### [Review card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-review-card--docs)
51
+
52
+ - Added the Review card to display aggregated third-party ratings (e.g. Tripadvisor) in a compact card format. It shows an overall score, rating
53
+ descriptor, review count, per-category breakdowns, and a link to the full review source. The component is brand-agnostic and adapts to different
54
+ review providers across markets.
55
+
56
+ ### Updated
57
+
58
+ #### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
59
+
60
+ - Added `uilib-list--plain` variant for lists without any leading bullet, icon, number, or image. Useful when the list semantics are needed but no
61
+ visual indicator is required.
62
+ - Added `uilib-list__hint` class for right-aligned content within a list item (e.g. edit links, prices). Uses CSS grid to pin the hint to the right
63
+ while leaving the rest of the list item content unaffected.
64
+ - Added highlighted list item styling (`uilib-list__highlight-item`) for promoting a single item within a list, e.g. discount or coupon code.
65
+
66
+ #### [Numerical rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs)
67
+
68
+ - Rating scale changed from 1–10 to 1–5 to align with the updated TUI customer review scoring system
69
+ - Added `author` organization (TUI) to schema output to identify the rating source
70
+ - Schema now uses `Place` instead of `Hotel` and `reviewCount` instead of `ratingCount`
71
+ - Schema values now use numeric types instead of strings
72
+
73
+ #### [Percentage rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
74
+
75
+ - Updated schema example to use `Place` with `AggregateRating` pattern and corrected property types
76
+ - Added `author` organization (HolidayCheck) to schema output to identify the rating source
77
+ - Schema values now use numeric types instead of strings
78
+
79
+ #### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs)
80
+
81
+ - Updated schema documentation to use `Place` with `AggregateRating` pattern including `reviewAspect` for aspect-level ratings
82
+ - Added `author` organization to schema output to identify the rating source
83
+ - Range bar group now has a single consolidated JSON-LD block for all category schemas instead of individual schemas per bar
84
+
85
+ #### [Range icons](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs)
86
+
87
+ - Added HolidayCheck rating variant (`uilib-ratings-range-icons--holidaycheck`) with a 0–6 scale in 1 increments. HolidayCheck variant displays a
88
+ numerical score preceding the icon range, consistent with Customer and TripAdvisor variants
89
+ - Added `uilib-ratings-range-icons__description` element for an optional descriptive label (e.g. "Excellent") displayed alongside the score. For use
90
+ with [Review Card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-review-card--docs)
91
+ - Added `author` organization to schema output to identify the rating source (TUI, TripAdvisor, HolidayCheck)
92
+
93
+ #### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
94
+
95
+ - Added HolidayCheck variant support to the range icons group component
96
+ - Schema output consolidated into a single JSON-LD block per group using `additionalProperty` for aspect ratings, instead of individual schemas per
97
+ child range icon
98
+ - Added `author` organization to schema output to identify the rating source
99
+ - Schema `value` and `maxValue` now use numeric types instead of strings
100
+
3
101
  ## v1.7.0
4
102
 
5
103
  ### Added
@@ -410,7 +508,7 @@ The following markup shows the previous implementation that included the now-dep
410
508
 
411
509
  #### [Range icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs)
412
510
 
413
- - Added customer rating variant `uilib-ratings-range-icons--tui`.
511
+ - Added customer rating variant `uilib-ratings-range-icons--customer`.
414
512
  - Added inverse support for TripAdvisor variant.
415
513
  - Added rating score that precedes the customer and TripAdvisor icon ranges for better clarity.
416
514
  - Spacing between the logo, value, score and details elements has been adjusted to be consistently spacing-200 (8px).
package/dist/themes/crystalski/index.css CHANGED
@@ -231,6 +231,14 @@
231
231
  --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
232
232
  --uilib-card-article-radius: var(--uilib-border-radius-600);
233
233
  --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/arrow-right.svg");
234
+ --uilib-carousel-gap: var(--uilib-spacing-400);
235
+ --uilib-carousel-viewport-padding: var(--uilib-spacing-200);
236
+ --uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
237
+ --uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
238
+ --uilib-carousel-counter-color: var(--uilib-color-text-body);
239
+ --uilib-carousel-counter-font: var(--uilib-typography-body-medium);
240
+ --uilib-carousel-motion-duration: 300ms;
241
+ --uilib-carousel-motion-easing: ease-out;
234
242
  --uilib-card-icon-small-radius: var(--uilib-card-radius);
235
243
  --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
236
244
  --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
@@ -321,6 +329,22 @@
321
329
  --uilib-hero-flagship-content-bg-color: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent);
322
330
  --uilib-hero-flagship-content-text-color: var(--uilib-color-text-inverse);
323
331
  --uilib-hero-flagship-content-text-highlight-color: var(--uilib-color-text-inverse);
332
+ --uilib-highlight-panel-radius: var(--uilib-border-radius-400);
333
+ --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
334
+ --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
335
+ --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
336
+ --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
337
+ --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
338
+ --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
339
+ --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-body);
340
+ --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
341
+ --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
342
+ --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-core-interaction);
343
+ --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
344
+ --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
345
+ --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
346
+ --uilib-highlight-panel-header-bg-overlay-brand: none;
347
+ --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
324
348
  --uilib-icon-button-radius: var(--uilib-border-radius-pill);
325
349
  --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
326
350
  --uilib-icon-button-ghost-bg-color: transparent;
@@ -375,6 +399,7 @@
375
399
  --uilib-list-image-radius: var(--uilib-border-radius-100);
376
400
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
377
401
  --uilib-list-multiline-title-font: var(--uilib-typography-label-medium-strong);
402
+ --uilib-list-highlight-color: var(--uilib-color-text-promotion);
378
403
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/crystalski/loader.svg");
379
404
  --uilib-loader-small: 3.75rem;
380
405
  --uilib-loader-medium: 7.5rem;
@@ -444,6 +469,8 @@
444
469
  --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
445
470
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
446
471
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
472
+ --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
473
+ --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
447
474
  --uilib-ratings-range-bar-bar-width: 11.25rem;
448
475
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
449
476
  --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
@@ -483,6 +510,9 @@
483
510
  --uilib-tooltip-bg-color: var(--uilib-color-text-body);
484
511
  --uilib-tooltip-text-color: var(--uilib-color-text-inverse);
485
512
  --uilib-travel-aware-banner-radius: var(--uilib-border-radius-400);
513
+ --uilib-edit-search-radius: var(--uilib-border-radius-400);
514
+ --uilib-edit-search-bg-color: var(--uilib-color-core-surface);
515
+ --uilib-edit-search-text-color: var(--uilib-color-text-strong);
486
516
  }
487
517
 
488
518
  /*# sourceMappingURL=index.css.map */
package/dist/themes/crystalski/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -237,6 +237,14 @@
237
237
  --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
238
238
  --uilib-card-article-radius: var(--uilib-border-radius-200);
239
239
  --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/arrow-right.svg");
240
+ --uilib-carousel-gap: var(--uilib-spacing-400);
241
+ --uilib-carousel-viewport-padding: var(--uilib-spacing-200);
242
+ --uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
243
+ --uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
244
+ --uilib-carousel-counter-color: var(--uilib-color-text-body);
245
+ --uilib-carousel-counter-font: var(--uilib-typography-body-medium);
246
+ --uilib-carousel-motion-duration: 300ms;
247
+ --uilib-carousel-motion-easing: ease-out;
240
248
  --uilib-card-icon-small-radius: var(--uilib-border-radius-200);
241
249
  --uilib-card-icon-large-radius: var(--uilib-border-radius-200);
242
250
  --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
@@ -328,6 +336,22 @@
328
336
  --uilib-hero-flagship-content-bg-color: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent);
329
337
  --uilib-hero-flagship-content-text-color: var(--uilib-color-text-inverse);
330
338
  --uilib-hero-flagship-content-text-highlight-color: var(--uilib-color-text-inverse);
339
+ --uilib-highlight-panel-radius: var(--uilib-border-radius-200);
340
+ --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
341
+ --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
342
+ --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
343
+ --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
344
+ --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
345
+ --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
346
+ --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-strong);
347
+ --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
348
+ --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
349
+ --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-text-strong);
350
+ --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
351
+ --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
352
+ --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
353
+ --uilib-highlight-panel-header-bg-overlay-brand: none;
354
+ --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
331
355
  --uilib-icon-button-radius: var(--uilib-border-radius-200);
332
356
  --uilib-icon-button-ghost-color: var(--uilib-color-text-strong);
333
357
  --uilib-icon-button-ghost-bg-color: transparent;
@@ -382,6 +406,7 @@
382
406
  --uilib-list-image-radius: var(--uilib-border-radius-100);
383
407
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
384
408
  --uilib-list-multiline-title-font: var(--uilib-typography-label-medium-strong);
409
+ --uilib-list-highlight-color: var(--uilib-color-text-promotion);
385
410
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/firstchoice/loader.svg");
386
411
  --uilib-loader-small: 3.75rem;
387
412
  --uilib-loader-medium: 7.5rem;
@@ -451,6 +476,8 @@
451
476
  --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
452
477
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
453
478
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
479
+ --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
480
+ --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
454
481
  --uilib-ratings-range-bar-bar-width: 11.25rem;
455
482
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
456
483
  --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
@@ -490,6 +517,9 @@
490
517
  --uilib-tooltip-bg-color: var(--uilib-color-text-body);
491
518
  --uilib-tooltip-text-color: var(--uilib-color-text-inverse);
492
519
  --uilib-travel-aware-banner-radius: var(--uilib-border-radius-400);
520
+ --uilib-edit-search-radius: var(--uilib-border-radius-400);
521
+ --uilib-edit-search-bg-color: var(--uilib-color-core-surface);
522
+ --uilib-edit-search-text-color: var(--uilib-color-text-strong);
493
523
  }
494
524
 
495
525
  /*# sourceMappingURL=index.css.map */
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -254,6 +254,14 @@
254
254
  --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
255
255
  --uilib-card-article-radius: var(--uilib-border-radius-600);
256
256
  --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/arrow-right.svg");
257
+ --uilib-carousel-gap: var(--uilib-spacing-400);
258
+ --uilib-carousel-viewport-padding: var(--uilib-spacing-200);
259
+ --uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
260
+ --uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
261
+ --uilib-carousel-counter-color: var(--uilib-color-text-body);
262
+ --uilib-carousel-counter-font: var(--uilib-typography-body-medium);
263
+ --uilib-carousel-motion-duration: 300ms;
264
+ --uilib-carousel-motion-easing: ease-out;
257
265
  --uilib-card-icon-small-radius: var(--uilib-card-radius);
258
266
  --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
259
267
  --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
@@ -398,6 +406,7 @@
398
406
  --uilib-list-image-radius: var(--uilib-border-radius-100);
399
407
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
400
408
  --uilib-list-multiline-title-font: var(--uilib-typography-label-medium);
409
+ --uilib-list-highlight-color: var(--uilib-color-text-promotion);
401
410
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/tui/loader.svg");
402
411
  --uilib-loader-small: 3.75rem;
403
412
  --uilib-loader-medium: 7.5rem;
@@ -467,6 +476,8 @@
467
476
  --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
468
477
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
469
478
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
479
+ --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
480
+ --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
470
481
  --uilib-ratings-range-bar-bar-width: 11.25rem;
471
482
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
472
483
  --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
@@ -486,6 +497,22 @@
486
497
  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
487
498
  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
488
499
  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
500
+ --uilib-highlight-panel-radius: var(--uilib-border-radius-400);
501
+ --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
502
+ --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
503
+ --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
504
+ --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
505
+ --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
506
+ --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
507
+ --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-strong);
508
+ --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
509
+ --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
510
+ --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-core-interaction);
511
+ --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
512
+ --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
513
+ --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
514
+ --uilib-highlight-panel-header-bg-overlay-brand: radial-gradient(circle farthest-corner at 99.91% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 80%);
515
+ --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
489
516
  --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
490
517
  --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
491
518
  --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);
@@ -506,6 +533,9 @@
506
533
  --uilib-tooltip-bg-color: var(--uilib-color-text-body);
507
534
  --uilib-tooltip-text-color: var(--uilib-color-text-inverse);
508
535
  --uilib-travel-aware-banner-radius: var(--uilib-border-radius-400);
536
+ --uilib-edit-search-radius: var(--uilib-border-radius-400);
537
+ --uilib-edit-search-bg-color: var(--uilib-color-core-surface);
538
+ --uilib-edit-search-text-color: var(--uilib-color-text-strong);
509
539
  }
510
540
 
511
541
  /*# sourceMappingURL=index.css.map */
package/dist/themes/tui/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.7.0",
3
+ "version": "1.9.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -73,11 +73,11 @@
73
73
  "@eslint/js": "^9.38.0",
74
74
  "@figma/code-connect": "^1.4.5",
75
75
  "@jest/globals": "^30.2.0",
76
- "@storybook/addon-a11y": "^10.4.5",
77
- "@storybook/addon-docs": "^10.4.5",
78
- "@storybook/addon-links": "^10.4.5",
79
- "@storybook/addon-themes": "^10.4.5",
80
- "@storybook/html-vite": "^10.4.5",
76
+ "@storybook/addon-a11y": "~10.4.5",
77
+ "@storybook/addon-docs": "~10.4.5",
78
+ "@storybook/addon-links": "~10.4.5",
79
+ "@storybook/addon-themes": "~10.4.5",
80
+ "@storybook/html-vite": "~10.4.5",
81
81
  "@stylistic/eslint-plugin": "^3.1.0",
82
82
  "@tui/cally": "1.0.0",
83
83
  "@types/js-beautify": "^1.14.3",
@@ -89,6 +89,7 @@
89
89
  "deepmerge": "^4.3.1",
90
90
  "dotenv": "^17.2.3",
91
91
  "dotenv-cli": "^11.0.0",
92
+ "embla-carousel": "^8.6.0",
92
93
  "esbuild": "^0.28.1",
93
94
  "eslint": "^9.38.0",
94
95
  "eslint-config-airbnb-extended": "^3.0.1",
@@ -101,7 +102,7 @@
101
102
  "eslint-plugin-prettier": "^5.5.4",
102
103
  "eslint-plugin-react": "^7.37.5",
103
104
  "eslint-plugin-react-hooks": "^7.0.1",
104
- "eslint-plugin-storybook": "^10.4.5",
105
+ "eslint-plugin-storybook": "~10.4.5",
105
106
  "git-format-staged": "4.0.1",
106
107
  "glob": "^13.0.0",
107
108
  "globals": "^17.3.0",
@@ -121,8 +122,8 @@
121
122
  "sass-true": "^10.0.0",
122
123
  "shx": "0.4.0",
123
124
  "source-map-support": "^0.5.21",
124
- "storybook": "^10.4.5",
125
- "storybook-addon-pseudo-states": "^10.4.5",
125
+ "storybook": "~10.4.5",
126
+ "storybook-addon-pseudo-states": "~10.4.5",
126
127
  "storybook-addon-tag-badges": "^3.1.0",
127
128
  "storybook-dark-mode": "^5.0.0",
128
129
  "stylelint": "^17.2.0",
package/scss/lib/accordion/_mixins.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  @use '../icon/mixins' as *;
5
5
 
6
6
  $uilib-accordion-included: false !default;
7
+ $uilib-accordion-group-included: false !default;
7
8
 
8
9
  // Builds accordion
9
10
  @mixin uilib-accordion() {
@@ -15,6 +16,16 @@ $uilib-accordion-included: false !default;
15
16
  }
16
17
  }
17
18
 
19
+ @mixin uilib-accordion-group() {
20
+ @if not $uilib-accordion-group-included {
21
+ $uilib-accordion-group-included: true !global;
22
+
23
+ @include uilib-link;
24
+ @include uilib-accordion;
25
+ @include uilib-accordion-group-master;
26
+ }
27
+ }
28
+
18
29
  @mixin uilib-accordion-master() {
19
30
  .uilib-accordion {
20
31
  position: relative;
@@ -155,9 +166,7 @@ $uilib-accordion-included: false !default;
155
166
  }
156
167
  }
157
168
 
158
- @mixin uilib-accordion-group() {
159
- @include uilib-link;
160
-
169
+ @mixin uilib-accordion-group-master() {
161
170
  .uilib-accordion-group {
162
171
  display: flex;
163
172
  flex-direction: column;
package/scss/lib/cards/carousel/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Carousel / index
2
+ @use 'mixins' as *;
3
+ @include uilib-carousel;
package/scss/lib/cards/carousel/_mixins.scss ADDED
@@ -0,0 +1,164 @@
1
+ // Carousel / _mixins
2
+ @use 'sass:map';
3
+ @use 'variables' as *;
4
+ @use '../../utility/mixins' as *;
5
+ @use '../../icon-button/mixins' as *;
6
+
7
+ $uilib-carousel-included: false !default;
8
+
9
+ @mixin uilib-carousel() {
10
+ @if not $uilib-carousel-included {
11
+ $uilib-carousel-included: true !global;
12
+
13
+ @include uilib-icon-button;
14
+ @include uilib-carousel-master;
15
+ }
16
+ }
17
+
18
+ @mixin uilib-carousel-master() {
19
+ .uilib-carousel {
20
+ position: relative;
21
+
22
+ display: block;
23
+
24
+ margin: var(--uilib-spacing-400) 0;
25
+ }
26
+
27
+ .uilib-carousel__viewport {
28
+ // `overflow-x: auto` forces `overflow-y` to `auto`, clipping card shadows and
29
+ // focus rings. The block padding (+ matching negative margin) gives shadow/focus
30
+ // room without changing height.
31
+ margin-block: calc(-1 * var(--uilib-carousel-viewport-padding));
32
+ padding-block: var(--uilib-carousel-viewport-padding);
33
+
34
+ overflow-x: auto;
35
+ overscroll-behavior-x: contain;
36
+
37
+ // Sizes `.uilib-carousel__slide` via `cqw` against the visible frame, not the
38
+ // track's own (overflowing) intrinsic width.
39
+ container-type: inline-size;
40
+ }
41
+
42
+ // Once enhanced, the prev/next controls and drag/swipe are wired up as a replacement
43
+ // for native scrolling, so the native scrollbar is hidden. Before that (no-JS or
44
+ // init-failure fallback) the scrollbar stays visible — it's the only affordance that
45
+ // the content scrolls, since the controls don't work without the behaviour.
46
+ .uilib-carousel--enhanced .uilib-carousel__viewport {
47
+ // Embla drives movement via a transform, so native scrolling is disabled: a leftover
48
+ // `scrollLeft` after a resize would combine with the transform and reveal slivers of
49
+ // adjacent cards. `clip` (not `hidden`) keeps `overflow-y` visible for shadows.
50
+ overflow-x: clip;
51
+
52
+ scrollbar-width: none;
53
+
54
+ &::-webkit-scrollbar {
55
+ display: none;
56
+ }
57
+ }
58
+
59
+ .uilib-carousel__track {
60
+ display: flex;
61
+
62
+ // Slides carry their own spacing via padding (see __slide) — a track `gap` here
63
+ // would be mismeasured by Embla and clip the trailing slide.
64
+ gap: 0;
65
+
66
+ @media (prefers-reduced-motion: no-preference) {
67
+ transition: transform var(--uilib-carousel-motion-duration) var(--uilib-carousel-motion-easing);
68
+ }
69
+ }
70
+
71
+ // One item per slide, always — the behaviour never re-parents consumer content; grouping
72
+ // N slides into one page (page variant) is done via Embla's `slidesToScroll`, not DOM
73
+ // wrapping. Each slide fills 1/N of the frame (`--uilib-carousel-visible`, set by the
74
+ // behaviour; 1 without JS), so N whole, equal-width cards are always shown.
75
+ .uilib-carousel__slide {
76
+ display: flex;
77
+ flex: 0 0 calc(100cqw / var(--uilib-carousel-visible, 1));
78
+
79
+ min-width: 0;
80
+ padding-inline: calc(var(--uilib-carousel-gap) / 2);
81
+ }
82
+
83
+ .uilib-carousel__item {
84
+ flex: 1;
85
+ }
86
+
87
+ .uilib-carousel__control--prev .uilib-icon {
88
+ -webkit-mask-image: var(--uilib-carousel-prev-icon);
89
+ mask-image: var(--uilib-carousel-prev-icon);
90
+ }
91
+
92
+ .uilib-carousel__control--next .uilib-icon {
93
+ -webkit-mask-image: var(--uilib-carousel-next-icon);
94
+ mask-image: var(--uilib-carousel-next-icon);
95
+ }
96
+
97
+ .uilib-carousel__counter {
98
+ color: var(--uilib-carousel-counter-color);
99
+ font: var(--uilib-carousel-counter-font);
100
+ white-space: nowrap;
101
+ }
102
+
103
+ .uilib-carousel--page,
104
+ .uilib-carousel--item {
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: var(--uilib-spacing-400);
108
+ }
109
+
110
+ // Bleeds the viewport back out by the slide's own inline padding (see __slide) so
111
+ // cards land flush with the grid edge. Width must grow by the same amount the margin
112
+ // pulls in to actually bleed on a flex item.
113
+ // `position: relative` is load-bearing for the page (loop) variant: Embla measures
114
+ // slide/container positions with `offsetLeft` (relative to the offsetParent). Without
115
+ // it, the offsetParent is the outer `.uilib-carousel` (position:relative), and the
116
+ // bleed offsets the track by -gap/2 relative to it. On init the track has no transform
117
+ // so slides share that offsetParent and Embla's snap is 0 (correct); after a resize
118
+ // reInit the track already carries Embla's transform, which makes the track itself the
119
+ // slides' offsetParent — so Embla re-reads the slides at 0 while the track is still at
120
+ // -gap/2, shifting every snap by -gap/2 and knocking the cards off the grid (revealing
121
+ // a sliver of the next card at the right edge). Making the viewport the offsetParent
122
+ // keeps that reference stable across init and reInit, so the snap stays 0 either way.
123
+ .uilib-carousel--page .uilib-carousel__viewport,
124
+ .uilib-carousel--item .uilib-carousel__viewport {
125
+ position: relative;
126
+
127
+ width: calc(100% + var(--uilib-carousel-gap));
128
+ margin-inline: calc(var(--uilib-carousel-gap) / -2);
129
+ }
130
+
131
+ .uilib-carousel--page {
132
+ align-items: center;
133
+ }
134
+
135
+ .uilib-carousel__controls {
136
+ display: flex;
137
+ gap: var(--uilib-spacing-400);
138
+ justify-content: center;
139
+ align-items: center;
140
+ }
141
+
142
+ // The viewport's negative inline margin already brings the cards back to the true
143
+ // grid edge (see __viewport), so the footer needs no inset of its own to stay aligned.
144
+ .uilib-carousel__footer {
145
+ display: flex;
146
+ gap: var(--uilib-spacing-400);
147
+ align-items: center;
148
+ }
149
+
150
+ .uilib-carousel--item .uilib-carousel__controls {
151
+ gap: var(--uilib-spacing-200);
152
+
153
+ margin-left: auto;
154
+ }
155
+
156
+ // Behaviour toggles this when everything fits (a single scroll snap): nothing to scroll.
157
+ .uilib-carousel--controls-hidden .uilib-carousel__controls {
158
+ display: none;
159
+ }
160
+
161
+ .uilib-carousel__announcement {
162
+ @include uilib-visually-hidden;
163
+ }
164
+ }
package/scss/lib/cards/carousel/_variables.scss ADDED
@@ -0,0 +1,13 @@
1
+ @use '../../../variables/env-variables' as *;
2
+
3
+ // Carousel specific variables to allow theming
4
+ $uilib-carousel-variables: (
5
+ gap: var(--uilib-spacing-400),
6
+ viewport-padding: var(--uilib-spacing-200),
7
+ prev-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-left.svg'),
8
+ next-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
9
+ counter-color: var(--uilib-color-text-body),
10
+ counter-font: var(--uilib-typography-body-medium),
11
+ motion-duration: 300ms,
12
+ motion-easing: ease-out,
13
+ ) !default;
package/scss/lib/forms/input-stepper/_mixins.scss CHANGED
@@ -62,9 +62,7 @@ $uilib-input-stepper-included: false !default;
62
62
  &:has(.uilib-input-text__input:focus) {
63
63
  &::before {
64
64
  // reduce focus box sizes
65
- --size: calc(100% - var(--uilib-spacing-200));
66
- top: var(--uilib-spacing-100);
67
- left: var(--uilib-spacing-100);
65
+ inset: 0;
68
66
  }
69
67
  }
70
68
  }
package/scss/lib/highlight-panel/_index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @use 'mixins' as *;
2
+ @include uilib-highlight-panel;