@tui/design-system 1.15.0 → 1.15.1-MR-359.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 (23) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/themes/crystalski/index.css +7 -0
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +7 -0
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +7 -0
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +1 -1
  9. package/scss/lib/cards/article/_mixins.scss +15 -0
  10. package/scss/lib/cards/card/_mixins.scss +2 -0
  11. package/scss/lib/flyout-dropdown/_mixins.scss +18 -0
  12. package/scss/lib/media-block/_index.scss +3 -0
  13. package/scss/lib/media-block/_mixins.scss +134 -0
  14. package/scss/lib/media-block/_variables.scss +10 -0
  15. package/scss/lib/patterns/reasons-to-book/_mixins.scss +30 -8
  16. package/scss/lib/timeline/_mixins.scss +40 -0
  17. package/scss/mixins.scss +1 -0
  18. package/scss/themes/crystalski/index.scss +3 -0
  19. package/scss/themes/firstchoice/index.scss +3 -0
  20. package/scss/themes/tui/index.scss +3 -0
  21. package/scss/variables/base-theme.json +50 -0
  22. package/scss/variables.scss +1 -0
  23. package/types/components.ts +23 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.16.0
4
+
5
+ ### Updated
6
+
7
+ #### [Article card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs)
8
+
9
+ - Added an optional product label that displays an [info tag](/docs/components-info-tag--docs) over the top-left of the card image to highlight a
10
+ product designation (e.g. Platinum).
11
+
12
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
13
+
14
+ - Accessibility: fixed the flyout heading being announced twice by NVDA when the flyout opens. The heading referenced by `aria-labelledby` is now
15
+ `aria-hidden="true"`, so it still supplies the dialog's accessible name but is no longer also read as content. Note the heading is no longer
16
+ reachable via screen reader heading navigation. On open, focus moves once to the dialog container rather than to a control inside it, as focusing a
17
+ descendant makes NVDA announce the flyout name twice. No effect when `disable-focus-on-open` keeps focus on the trigger.
18
+ - Added the `disable-focus-on-open` attribute. In non-modal (desktop) mode it keeps focus on the trigger on open instead of moving it into the flyout
19
+ (the first Tab moves in). It has no effect in modal (mobile) mode, where focus always moves into the panel. Applies to both variants.
20
+ - Accessibility: in non-modal (desktop) mode the trigger is included in the keyboard trap, so focus cycles between the trigger and the flyout content
21
+ and can no longer reach elements on the page behind the open flyout. This lets keyboard users return to the original trigger while staying trapped.
22
+ The trigger is only included when it can actually take focus (connected, visible, enabled and keyboard-focusable); otherwise the trap falls back to
23
+ cycling within the flyout so focus is never stranded. Modal (mobile) mode keeps a flyout-only cyclic trap. Applies to both variants.
24
+ - Docs: added accessibility guidance to keep flyout content short and simple, and to keep the trigger and flyout element as adjacent siblings so the
25
+ content follows the trigger in the reading order.
26
+
27
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
28
+
29
+ - Accessibility: fixed the modal title being announced twice by NVDA when the modal opens. The heading referenced by `aria-labelledby` is now
30
+ `aria-hidden="true"`, so it still supplies the dialog's accessible name but is no longer also read as content. This works around an open NVDA bug
31
+ affecting `role="dialog"` ([nvaccess/nvda#8971](https://github.com/nvaccess/nvda/issues/8971)). Note the heading is no longer reachable via screen
32
+ reader heading navigation. Applies to both `version="1"` and `version="2"`.
33
+
34
+ #### [Timeline](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-timeline--docs)
35
+
36
+ - Added a `condensed` variant (`uilib-timeline--condensed`) with smaller icons, tighter spacing and a continuous (solid) connecting line, for dense
37
+ contexts such as flights in the basket holiday summary.
38
+
3
39
  ## v1.15.0
4
40
 
5
41
  ### Updated
package/dist/themes/crystalski/index.css CHANGED
@@ -424,6 +424,13 @@
424
424
  --uilib-loader-small-font: var(--uilib-typography-component-heading-medium);
425
425
  --uilib-loader-medium-font: var(--uilib-typography-component-heading-large);
426
426
  --uilib-loader-large-font: var(--uilib-typography-component-heading-xlarge);
427
+ --uilib-media-block-title-color: var(--uilib-color-text-strong);
428
+ --uilib-media-block-title-font-large: var(--uilib-typography-component-heading-xlarge-strong);
429
+ --uilib-media-block-title-font-medium: var(--uilib-typography-component-heading-small-strong);
430
+ --uilib-media-block-description-color: var(--uilib-color-text-body);
431
+ --uilib-media-block-description-font-large: var(--uilib-typography-body-large);
432
+ --uilib-media-block-description-font-medium: var(--uilib-typography-body-medium);
433
+ --uilib-media-block-media-radius: var(--uilib-border-radius-100);
427
434
  --uilib-media-button-color: var(--uilib-color-text-strong);
428
435
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
429
436
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
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;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;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;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;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -430,6 +430,13 @@
430
430
  --uilib-loader-small-font: var(--uilib-typography-component-heading-medium);
431
431
  --uilib-loader-medium-font: var(--uilib-typography-component-heading-large);
432
432
  --uilib-loader-large-font: var(--uilib-typography-component-heading-xlarge);
433
+ --uilib-media-block-title-color: var(--uilib-color-text-strong);
434
+ --uilib-media-block-title-font-large: var(--uilib-typography-component-heading-xlarge-strong);
435
+ --uilib-media-block-title-font-medium: var(--uilib-typography-component-heading-small-strong);
436
+ --uilib-media-block-description-color: var(--uilib-color-text-body);
437
+ --uilib-media-block-description-font-large: var(--uilib-typography-body-large);
438
+ --uilib-media-block-description-font-medium: var(--uilib-typography-body-medium);
439
+ --uilib-media-block-media-radius: var(--uilib-border-radius-100);
433
440
  --uilib-media-button-color: var(--uilib-color-text-strong);
434
441
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
435
442
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
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;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;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;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;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -447,6 +447,13 @@
447
447
  --uilib-loader-small-font: var(--uilib-typography-component-heading-medium);
448
448
  --uilib-loader-medium-font: var(--uilib-typography-component-heading-large);
449
449
  --uilib-loader-large-font: var(--uilib-typography-component-heading-xlarge);
450
+ --uilib-media-block-title-color: var(--uilib-color-text-strong);
451
+ --uilib-media-block-title-font-large: var(--uilib-typography-component-heading-xlarge-strong);
452
+ --uilib-media-block-title-font-medium: var(--uilib-typography-component-heading-small-strong);
453
+ --uilib-media-block-description-color: var(--uilib-color-text-body);
454
+ --uilib-media-block-description-font-large: var(--uilib-typography-body-large);
455
+ --uilib-media-block-description-font-medium: var(--uilib-typography-body-medium);
456
+ --uilib-media-block-media-radius: var(--uilib-border-radius-100);
450
457
  --uilib-media-button-color: var(--uilib-color-text-strong);
451
458
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
452
459
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
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;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;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;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;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.15.0",
3
+ "version": "1.15.1-MR-359.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
package/scss/lib/cards/article/_mixins.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use '../../utility/mixins' as *;
4
4
  @use '../card/mixins' as *;
5
5
  @use '../../image/mixins' as *;
6
+ @use '../../info-tag/mixins' as *;
6
7
  @use '../../richtext/mixins' as *;
7
8
 
8
9
  $uilib-card-article-included: false !default;
@@ -14,6 +15,7 @@ $uilib-card-article-included: false !default;
14
15
 
15
16
  @include uilib-card;
16
17
  @include uilib-image;
18
+ @include uilib-info-tag;
17
19
  @include uilib-richtext;
18
20
  @include uilib-card-article-master;
19
21
  }
@@ -25,6 +27,8 @@ $uilib-card-article-included: false !default;
25
27
  container-name: uilib-card-article;
26
28
  container-type: inline-size;
27
29
 
30
+ position: relative;
31
+
28
32
  display: flex;
29
33
  flex-flow: row wrap;
30
34
  align-items: stretch;
@@ -44,6 +48,17 @@ $uilib-card-article-included: false !default;
44
48
  border-radius: var(--uilib-card-article-radius) var(--uilib-card-article-radius) 0 0;
45
49
  }
46
50
 
51
+ &__product-label {
52
+ position: absolute;
53
+ top: var(--uilib-spacing-300);
54
+ left: var(--uilib-spacing-300);
55
+ z-index: 1;
56
+
57
+ max-width: calc(100% - (var(--uilib-spacing-300) * 2));
58
+
59
+ pointer-events: none;
60
+ }
61
+
47
62
  &__heading {
48
63
  margin-bottom: var(--uilib-spacing-200);
49
64
 
package/scss/lib/cards/card/_mixins.scss CHANGED
@@ -61,6 +61,8 @@ $uilib-card-included: false !default;
61
61
  &--link button {
62
62
  position: static;
63
63
 
64
+ text-decoration: none;
65
+
64
66
  &::after {
65
67
  position: absolute;
66
68
  inset: 0;
package/scss/lib/flyout-dropdown/_mixins.scss CHANGED
@@ -91,6 +91,24 @@ $uilib-flyout-dropdown-included: false !default;
91
91
  }
92
92
  }
93
93
 
94
+ // Show the ring on the focused element.
95
+ &--focus-on-open {
96
+ .uilib-flyout-dropdown__close-icon:focus {
97
+ @include uilib-focus;
98
+
99
+ /* stylelint-disable-next-line order/order */
100
+ &::before {
101
+ border-radius: var(--uilib-icon-button-radius);
102
+ }
103
+ }
104
+
105
+ .uilib-scroller:has(.uilib-scroller__inner:focus) {
106
+ border-radius: var(--uilib-scroller-focus-radius);
107
+
108
+ box-shadow: var(--uilib-focus-default);
109
+ }
110
+ }
111
+
94
112
  @media (prefers-reduced-motion: no-preference) {
95
113
  animation: slide-up var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
96
114
  }
package/scss/lib/media-block/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Media block / index
2
+ @use 'mixins' as *;
3
+ @include uilib-media-block;
package/scss/lib/media-block/_mixins.scss ADDED
@@ -0,0 +1,134 @@
1
+ // Media block / _mixins
2
+ @use 'variables' as *;
3
+ @use '../icon/mixins' as *;
4
+
5
+ $uilib-media-block-included: false !default;
6
+
7
+ @mixin uilib-media-block() {
8
+ @if not $uilib-media-block-included {
9
+ $uilib-media-block-included: true !global;
10
+
11
+ // Icon is a common media-slot content type, so its styles load with the block.
12
+ @include uilib-icon;
13
+ @include uilib-media-block-master;
14
+ }
15
+ }
16
+
17
+ @mixin uilib-media-block-master() {
18
+ .uilib-media-block {
19
+ // Resolves the size axis once so every layout rule reads one name.
20
+ --uilib-media-block-padding-inline-end-active: var(--uilib-spacing-500);
21
+
22
+ display: flex;
23
+ flex-flow: row wrap;
24
+
25
+ // Row-gap applies once the items wrap (stacked); column-gap while they share a line (inline).
26
+ gap: var(--uilib-spacing-200) var(--uilib-spacing-300);
27
+ align-items: center;
28
+
29
+ width: 100%;
30
+ margin: 0;
31
+
32
+ border: 0;
33
+
34
+ background: transparent;
35
+
36
+ box-shadow: none;
37
+
38
+ // ─── Media slot ───
39
+ &__media {
40
+ display: flex;
41
+ flex: 0 0 auto;
42
+ justify-content: center;
43
+ align-items: center;
44
+
45
+ width: 4rem; /* 64 / 16 */
46
+ margin-inline: auto;
47
+
48
+ border-radius: var(--uilib-media-block-media-radius);
49
+
50
+ overflow: hidden;
51
+ aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
52
+
53
+ img {
54
+ width: 100%;
55
+ height: 100%;
56
+
57
+ object-fit: contain;
58
+ }
59
+ }
60
+
61
+ // ─── Text column ───
62
+ // padding-inline-end lives here, not on the root, so the inline modifier can set it.
63
+ &__text {
64
+ display: flex;
65
+ flex: 1 1 100%;
66
+ flex-direction: column;
67
+
68
+ min-width: 0;
69
+ padding-inline-end: 0;
70
+
71
+ text-align: center;
72
+ overflow-wrap: break-word;
73
+ }
74
+
75
+ &__title {
76
+ margin: 0;
77
+
78
+ color: var(--uilib-media-block-title-color);
79
+ font: var(--uilib-media-block-title-font-medium);
80
+ }
81
+
82
+ &__description {
83
+ margin: 0;
84
+
85
+ color: var(--uilib-media-block-description-color);
86
+ font: var(--uilib-media-block-description-font-medium);
87
+ }
88
+ }
89
+
90
+ // ─── Large size ───
91
+ .uilib-media-block--large {
92
+ @include uilib-media-block-large;
93
+ }
94
+
95
+ // ─── Inline layout, the only layout modifier ───
96
+ .uilib-media-block--inline {
97
+ @include uilib-media-block-inline;
98
+ }
99
+ }
100
+
101
+ // Carries root declarations, so include only from a selector that is the root.
102
+ @mixin uilib-media-block-large() {
103
+ --uilib-media-block-padding-inline-end-active: var(--uilib-spacing-600);
104
+
105
+ gap: var(--uilib-spacing-300) var(--uilib-spacing-400);
106
+
107
+ .uilib-media-block__media {
108
+ width: 5rem; /* 80 / 16 */
109
+ }
110
+
111
+ .uilib-media-block__title {
112
+ font: var(--uilib-media-block-title-font-large);
113
+ }
114
+
115
+ .uilib-media-block__description {
116
+ font: var(--uilib-media-block-description-font-large);
117
+ }
118
+ }
119
+
120
+ // Shared inline presentation. Included from the --inline modifier, and available
121
+ // to a host to include inside its own container query.
122
+ @mixin uilib-media-block-inline() {
123
+ .uilib-media-block__media {
124
+ margin-inline: 0;
125
+ }
126
+
127
+ .uilib-media-block__text {
128
+ flex-basis: 0;
129
+
130
+ padding-inline-end: var(--uilib-media-block-padding-inline-end-active);
131
+
132
+ text-align: start;
133
+ }
134
+ }
package/scss/lib/media-block/_variables.scss ADDED
@@ -0,0 +1,10 @@
1
+ // Media block specific variables to allow theming
2
+ $uilib-media-block-variables: (
3
+ title-color: var(--uilib-color-text-strong),
4
+ title-font-large: var(--uilib-typography-component-heading-xlarge-strong),
5
+ title-font-medium: var(--uilib-typography-component-heading-small-strong),
6
+ description-color: var(--uilib-color-text-body),
7
+ description-font-large: var(--uilib-typography-body-large),
8
+ description-font-medium: var(--uilib-typography-body-medium),
9
+ media-radius: var(--uilib-border-radius-100),
10
+ ) !default;
package/scss/lib/patterns/reasons-to-book/_mixins.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use 'variables' as *;
3
3
  @use '../../link/mixins' as *;
4
4
  @use '../../cards/carousel/mixins' as *;
5
+ @use '../../media-block/mixins' as *;
5
6
 
6
7
  $uilib-reasons-to-book-included: false !default;
7
8
 
@@ -11,6 +12,7 @@ $uilib-reasons-to-book-included: false !default;
11
12
 
12
13
  @include uilib-link;
13
14
  @include uilib-carousel;
15
+ @include uilib-media-block;
14
16
  @include uilib-reasons-to-book-master;
15
17
  }
16
18
  }
@@ -48,10 +50,17 @@ $uilib-reasons-to-book-included: false !default;
48
50
  }
49
51
  }
50
52
 
53
+ // Pre-Media-Block markup support. The Storybook template no longer emits
54
+ // __reason / __pictogram / __text, but uilib-reasons-to-book is forwarded from
55
+ // src/mixins.scss, so consumers writing the markup by hand still depend on
56
+ // these. Safe to delete only once nothing outside this repo uses them.
51
57
  &__reason {
52
58
  display: flex;
59
+ flex-direction: column;
53
60
  gap: var(--uilib-spacing-200);
54
61
  align-items: center;
62
+
63
+ text-align: center;
55
64
  }
56
65
 
57
66
  &__pictogram {
@@ -69,17 +78,30 @@ $uilib-reasons-to-book-included: false !default;
69
78
  font: var(--uilib-typography-component-heading-small-strong);
70
79
  }
71
80
 
72
- // Compact reflow: below this container width the reason card centres its text and stacks
73
- // the pictogram above it. Driven by the pattern's own width, not the viewport, so it works
74
- // the same whether the carousel is full-bleed or nested in a narrower column.
75
- // 34.1875rem = 547px — the top of the Compact range in Figma (288–547px); Static/Scrollable
76
- // (548px+) stay above it.
81
+ // Media Block layer. The pattern now composes Media Block for its reason cards; these
82
+ // host-only rules add what Media Block does not set. Media Block owns its own gap, media
83
+ // size, typography, and inline-end padding, so nothing here overrides those.
84
+ // Base is the compact, stacked card (mobile-first): media centred above the text.
85
+ .uilib-media-block {
86
+ max-width: 10.5625rem; /* 169 — Figma compact card, media centred above the text */
87
+ }
88
+
89
+ // Above 547px the pattern switches its blocks to inline so the whole strip flips together,
90
+ // rather than each block measuring itself. Range syntax (width >) keeps the boundary
91
+ // exclusive — 547px is the top of the Compact range in Figma, so it stays stacked there.
77
92
  /* stylelint-disable-next-line order/order */
78
- @container uilib-reasons-to-book (max-width: 34.1875rem) {
93
+ @container uilib-reasons-to-book (width > 34.1875rem) {
94
+ @include uilib-media-block-inline;
95
+
96
+ .uilib-media-block {
97
+ max-width: 14.875rem; /* 238 — Figma inline card: 64 media + 12 gap + 142 text + 20 inline-end padding */
98
+ }
99
+
100
+ // Legacy markup: hand-written __reason cards go inline above the breakpoint.
79
101
  .uilib-reasons-to-book__reason {
80
- flex-direction: column;
102
+ flex-direction: row;
81
103
 
82
- text-align: center;
104
+ text-align: start;
83
105
  }
84
106
  }
85
107
  }
package/scss/lib/timeline/_mixins.scss CHANGED
@@ -13,6 +13,8 @@ $uilib-timeline-included: false !default;
13
13
 
14
14
  @mixin uilib-timeline-master() {
15
15
  .uilib-timeline {
16
+ $uilib-timeline-condensed-gap: var(--uilib-spacing-200);
17
+ $uilib-timeline-condensed-gap-large: var(--uilib-spacing-500);
16
18
  display: flex;
17
19
  flex-direction: column;
18
20
 
@@ -33,6 +35,44 @@ $uilib-timeline-included: false !default;
33
35
  margin-bottom: 0;
34
36
  }
35
37
 
38
+ &--condensed {
39
+ gap: $uilib-timeline-condensed-gap;
40
+
41
+ .uilib-timeline__item {
42
+ grid-template-columns: var(--uilib-icon-size-xsmall) 1fr;
43
+ gap: var(--uilib-spacing-100);
44
+ }
45
+
46
+ .uilib-timeline__icon {
47
+ margin-top: var(--uilib-spacing-050);
48
+ }
49
+
50
+ .uilib-timeline__content {
51
+ min-height: var(--uilib-icon-size-xsmall);
52
+ }
53
+
54
+ .uilib-timeline__marker::after {
55
+ top: calc(var(--uilib-spacing-100) + var(--uilib-icon-size-xsmall));
56
+ bottom: calc((#{$uilib-timeline-condensed-gap}) * -1);
57
+
58
+ border-left: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-brand-strong);
59
+ }
60
+
61
+ .uilib-timeline__item--gap:not(:last-child) {
62
+ .uilib-timeline__marker::after {
63
+ bottom: calc((#{$uilib-timeline-condensed-gap-large} + var(--uilib-spacing-100)) * -1);
64
+ }
65
+ }
66
+
67
+ &.uilib-timeline--gap {
68
+ gap: $uilib-timeline-condensed-gap-large;
69
+
70
+ .uilib-timeline__marker::after {
71
+ bottom: calc(#{$uilib-timeline-condensed-gap-large} * -1);
72
+ }
73
+ }
74
+ }
75
+
36
76
  &__item {
37
77
  display: grid;
38
78
  grid-template-columns: var(--uilib-spacing-500) 1fr;
package/scss/mixins.scss CHANGED
@@ -37,6 +37,7 @@
37
37
  @forward 'lib/link/mixins';
38
38
  @forward 'lib/list/mixins';
39
39
  @forward 'lib/loader/mixins';
40
+ @forward 'lib/media-block/mixins';
40
41
  @forward 'lib/media-button/mixins';
41
42
  @forward 'lib/pagination/mixins';
42
43
  @forward 'lib/price/mixins';
package/scss/themes/crystalski/index.scss CHANGED
@@ -161,6 +161,9 @@
161
161
  // Loader
162
162
  @include util.uilib-build-css-vars('loader', $uilib-crystalski-loader-variables);
163
163
 
164
+ // Media block
165
+ @include util.uilib-build-css-vars('media-block', $uilib-media-block-variables);
166
+
164
167
  // Media button
165
168
  @include util.uilib-build-css-vars('media-button', $uilib-media-button-variables);
166
169
 
package/scss/themes/firstchoice/index.scss CHANGED
@@ -161,6 +161,9 @@
161
161
  // Loader
162
162
  @include util.uilib-build-css-vars('loader', $uilib-firstchoice-loader-variables);
163
163
 
164
+ // Media block
165
+ @include util.uilib-build-css-vars('media-block', $uilib-media-block-variables);
166
+
164
167
  // Media button
165
168
  @include util.uilib-build-css-vars('media-button', $uilib-media-button-variables);
166
169
 
package/scss/themes/tui/index.scss CHANGED
@@ -161,6 +161,9 @@
161
161
  // Loader
162
162
  @include util.uilib-build-css-vars('loader', $uilib-loader-variables);
163
163
 
164
+ // Media block
165
+ @include util.uilib-build-css-vars('media-block', $uilib-media-block-variables);
166
+
164
167
  // Media button
165
168
  @include util.uilib-build-css-vars('media-button', $uilib-media-button-variables);
166
169
 
package/scss/variables/base-theme.json CHANGED
@@ -2170,6 +2170,56 @@
2170
2170
  }
2171
2171
  }
2172
2172
  },
2173
+ "media-block": {
2174
+ "tokens": {
2175
+ "media-block-title-color": {
2176
+ "displayType": "color",
2177
+ "primitive": "uilib-color-text-strong",
2178
+ "title": "Title colour",
2179
+ "description": "Colour of the title text, in every size and layout"
2180
+ },
2181
+ "media-block-title-font-large": {
2182
+ "displayType": "font",
2183
+ "primitive": "uilib-typography-component-heading-xlarge-strong",
2184
+ "title": "Title font (Large)",
2185
+ "description": "Font applied to the title at the Large size",
2186
+ "longValue": true
2187
+ },
2188
+ "media-block-title-font-medium": {
2189
+ "displayType": "font",
2190
+ "primitive": "uilib-typography-component-heading-small-strong",
2191
+ "title": "Title font (Medium)",
2192
+ "description": "Font applied to the title at the Medium size",
2193
+ "longValue": true
2194
+ },
2195
+ "media-block-description-color": {
2196
+ "displayType": "color",
2197
+ "primitive": "uilib-color-text-body",
2198
+ "title": "Description colour",
2199
+ "description": "Colour of the supporting description text, in every size and layout"
2200
+ },
2201
+ "media-block-description-font-large": {
2202
+ "displayType": "font",
2203
+ "primitive": "uilib-typography-body-large",
2204
+ "title": "Description font (Large)",
2205
+ "description": "Font applied to the description at the Large size",
2206
+ "longValue": true
2207
+ },
2208
+ "media-block-description-font-medium": {
2209
+ "displayType": "font",
2210
+ "primitive": "uilib-typography-body-medium",
2211
+ "title": "Description font (Medium)",
2212
+ "description": "Font applied to the description at the Medium size",
2213
+ "longValue": true
2214
+ },
2215
+ "media-block-media-radius": {
2216
+ "displayType": "radius",
2217
+ "primitive": "uilib-border-radius-100",
2218
+ "title": "Media radius",
2219
+ "description": "Corner radius that clips the square media slot and its contents"
2220
+ }
2221
+ }
2222
+ },
2173
2223
  "media-button": {
2174
2224
  "displayType": "color",
2175
2225
  "tokens": {
package/scss/variables.scss CHANGED
@@ -56,6 +56,7 @@
56
56
  @forward 'lib/link/variables';
57
57
  @forward 'lib/list/variables';
58
58
  @forward 'lib/loader/variables';
59
+ @forward 'lib/media-block/variables';
59
60
  @forward 'lib/media-button/variables';
60
61
  @forward 'lib/modal/variables';
61
62
  @forward 'lib/pagination/variables';
package/types/components.ts CHANGED
@@ -114,6 +114,8 @@ export interface CardArticleProps {
114
114
  elementType?: 'anchor' | 'button';
115
115
  content?: 'short' | 'medium' | 'long' | 'rich';
116
116
  headingText?: string;
117
+ productLabel?: boolean;
118
+ productLabelText?: string;
117
119
  theme?: Theme;
118
120
  }
119
121
 
@@ -257,6 +259,7 @@ export interface FlyoutDropdownProps {
257
259
  secondaryButtonLabel?: string;
258
260
  closeButtonLabel?: string;
259
261
  scrollerAriaLabel?: string;
262
+ disableFocusOnOpen?: boolean;
260
263
  }
261
264
 
262
265
  // ─── Forms ─────────────────────────────────────────────
@@ -565,6 +568,25 @@ export interface LoaderProps {
565
568
  theme?: Theme;
566
569
  }
567
570
 
571
+ // ─── Media Block ───────────────────────────────────────
572
+ export type MediaBlockSize = 'medium' | 'large';
573
+ export type MediaBlockLayout = 'inline' | 'stacked';
574
+ export type MediaBlockHeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
575
+ export type MediaBlockMediaType = 'image' | 'icon';
576
+
577
+ export interface MediaBlockProps {
578
+ size?: MediaBlockSize;
579
+ layout?: MediaBlockLayout;
580
+ title?: string;
581
+ titleHref?: string;
582
+ headingLevel?: MediaBlockHeadingLevel;
583
+ description?: string;
584
+ mediaType?: MediaBlockMediaType;
585
+ mediaSrc?: string;
586
+ icon?: string;
587
+ theme?: Theme;
588
+ }
589
+
568
590
  // ─── Media Button ──────────────────────────────────────
569
591
  export interface MediaButtonProps {
570
592
  element?: 'a' | 'button';
@@ -868,6 +890,7 @@ export interface TimelineProps {
868
890
  items?: TimelineItemProps[];
869
891
  itemCount?: number;
870
892
  gap?: boolean;
893
+ condensed?: boolean;
871
894
  theme?: Theme;
872
895
  }
873
896