@tui/design-system 1.6.0 → 1.7.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 (35) hide show
  1. package/CHANGELOG.md +118 -0
  2. package/dist/themes/crystalski/index.css +11 -1
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +11 -1
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +13 -3
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +2 -2
  9. package/scss/lib/accordion/_mixins.scss +1 -3
  10. package/scss/lib/active-tag/_mixins.scss +16 -4
  11. package/scss/lib/cards/promotion/_index.scss +3 -0
  12. package/scss/lib/cards/promotion/_mixins.scss +275 -0
  13. package/scss/lib/cards/promotion/_variables.scss +14 -0
  14. package/scss/lib/cards/selectable/_mixins.scss +1 -1
  15. package/scss/lib/flyout-dropdown/_variables.scss +0 -1
  16. package/scss/lib/forms/input-switch/_mixins.scss +12 -6
  17. package/scss/lib/list/_mixins.scss +91 -72
  18. package/scss/lib/list/_variables.scss +1 -0
  19. package/scss/lib/modal/_variables.scss +1 -4
  20. package/scss/lib/skeleton/_variables.scss +2 -6
  21. package/scss/lib/tabs/_mixins.scss +117 -60
  22. package/scss/lib/tabs/anchor/_mixins.scss +36 -0
  23. package/scss/lib/tabs/in-page/_mixins.scss +82 -29
  24. package/scss/lib/tooltip/_mixins.scss +2 -0
  25. package/scss/mixins.scss +1 -0
  26. package/scss/themes/crystalski/_overrides.scss +10 -0
  27. package/scss/themes/crystalski/index.scss +3 -0
  28. package/scss/themes/crystalski/theme.json +7 -0
  29. package/scss/themes/firstchoice/_overrides.scss +10 -0
  30. package/scss/themes/firstchoice/index.scss +3 -0
  31. package/scss/themes/firstchoice/theme.json +7 -0
  32. package/scss/themes/tui/index.scss +3 -0
  33. package/scss/variables/base-theme.json +64 -0
  34. package/scss/variables.scss +1 -0
  35. package/types/components.ts +32 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,123 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.7.0
4
+
5
+ ### Added
6
+
7
+ #### [Card Promotion](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-promotion--docs)
8
+
9
+ - Added Card Promotion component to highlight any discount, offer or promotional message. It should be placed in-page, ideally as the first component
10
+ on the page.
11
+
12
+ #### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
13
+
14
+ - Added horizontal layout variant (`uilib-list--horizontal`) for displaying list items inline with wrapping
15
+ - Added multiline content variant with `uilib-list__title` class for hierarchically structured list items (e.g. flight connections with departure and
16
+ arrival details)
17
+
18
+ ### Updated
19
+
20
+ #### [Accordion](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-accordion--docs)
21
+
22
+ - Remove `content-visibility` CSS property from accordion animation. This was preventing VoiceOver from accessing accordion content when expanded.
23
+
24
+ #### [Active tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-active-tag--docs)
25
+
26
+ - Added a visually hidden heading linked to each active tag button via `aria-describedby` to provide screen reader users with context on what the
27
+ button will do
28
+ - Added accessibility guidance covering heading levels and `aria-live` announcements for filter updates
29
+ - Added an include guard to `uilib-active-tag-group` mixin to prevent duplicate CSS output
30
+
31
+ #### [Breadcrumb](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-breadcrumb--docs)
32
+
33
+ - The current page breadcrumb item is no longer rendered as a link. The label is now plain text within the `<li>` with `aria-current="page"` on the
34
+ list item itself, as linking to the page you are already on provides no value and can be confusing for screen reader users.
35
+
36
+ #### [Flight Details](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flight-details--docs)
37
+
38
+ - Improved screen reader experience by adding visually hidden context to departure and arrival times ("Departs", "Arrives") so they are clearly
39
+ distinguished when announced
40
+ - Added "Connection time" prefix to the visually hidden connection duration text for clearer context
41
+ - Added accessibility guidance for wrapping the component in a `<section>` with `aria-labelledby` when used outside of a modal
42
+
43
+ #### [Date picker](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-picker--docs) and [Date range](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-range--docs)
44
+
45
+ - Updated default button labels from "Next" / "Previous" to "Next month" / "Previous month" to be more descriptive for screen reader users.
46
+ - Added `instructions` attribute to provide accessible keyboard navigation instructions to the calendar. Default: "Use arrow keys to navigate dates.
47
+ Left and right move by day, up and down move by week. Arrow keys move across months automatically. Press Enter or Space to select a date."
48
+ - Added `announce-start` and `announce-range` attributes for accessible announcements when dates are selected in range mode.
49
+
50
+ #### [Input switch](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-switch--docs)
51
+
52
+ - Component structure has been updated to fix interaction issues found when using NVDA. The input has been moved outside the label and the class name
53
+ for the input updated appropriately for the new structure.
54
+ - The component will continue to work and style correctly without these changes, but to ensure full accessibility compliance, please update to the
55
+ latest markup structure.
56
+
57
+ #### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
58
+
59
+ - Added accessibility documentation covering semantic HTML, decorative images, colour contrast, and link labels
60
+
61
+ #### [Anchor tabs](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-anchor-tabs--docs)
62
+
63
+ - Focus is now transferred to the target section when a tab is selected, ensuring screen reader users are taken directly to the associated content.
64
+ - Added `tabs-labelledby` and `tabs-label` attributes for providing an accessible name to the navigation landmark. One of these is now required. The
65
+ previous `aria-labelledby` attribute is deprecated as it was inappropriate to place ARIA attributes directly on the custom element host.
66
+ - Added `role="list"` to the host element and `role="listitem"` to each tab item, improving the non-JavaScript accessibility experience by providing
67
+ semantic list structure before the web component hydrates.
68
+
69
+ Was:
70
+
71
+ ```html
72
+ <tui-uilib-tabs-anchor version="1" tabs-label="Page sections">
73
+ <tui-uilib-tab>
74
+ <a slot="link" href="#section-1">Section 1</a>
75
+ </tui-uilib-tab>
76
+ <tui-uilib-tab>
77
+ <a slot="link" href="#section-2">Section 2</a>
78
+ </tui-uilib-tab>
79
+ </tui-uilib-tabs-anchor>
80
+ ```
81
+
82
+ Updated to:
83
+
84
+ ```html
85
+ <tui-uilib-tabs-anchor version="2" tabs-label="Page sections" role="list">
86
+ <tui-uilib-tab role="listitem">
87
+ <a slot="link" href="#section-1">Section 1</a>
88
+ </tui-uilib-tab>
89
+ <tui-uilib-tab role="listitem">
90
+ <a slot="link" href="#section-2">Section 2</a>
91
+ </tui-uilib-tab>
92
+ </tui-uilib-tabs-anchor>
93
+ ```
94
+
95
+ - **Web component version updated to 2.** The internal DOM structure has been revised to resolve an NVDA browse mode issue where the screen reader
96
+ traversed each tab individually instead of treating the tablist as a single composite widget. NVDA does not recognise a tablist as a composite
97
+ widget when `display: flex`, `inline-flex`, or `grid` is applied to the `role="tablist"` or `role="tab"` elements. Version 2 uses `display: table`
98
+ on the tablist and wraps each tab button in a `table-cell` span, with scrolling handled by a separate wrapper element. Consumers must update their
99
+ CSS alongside the JS. Version 1 remains available for backward compatibility.
100
+ - Fixed scroll fade mask not showing on the left edge when the right button was hidden, caused by unitless `0` in CSS custom properties being invalid
101
+ in `calc()` expressions
102
+
103
+ #### [In-Page tabs](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-in-page-tabs--docs)
104
+
105
+ - Added `tabs-labelledby` and `tabs-label` attributes for providing an accessible name to the tablist. One of these is now required. The previous
106
+ `aria-labelledby` attribute is deprecated as it was inappropriate to place ARIA attributes directly on the custom element host.
107
+ - **Web component version updated to 2.** The internal DOM structure has been revised to resolve an NVDA browse mode issue where the screen reader
108
+ traversed each tab individually instead of treating the tablist as a single composite widget. NVDA does not recognise a tablist as a composite
109
+ widget when `display: flex`, `inline-flex`, or `grid` is applied to the `role="tablist"` or `role="tab"` elements. Version 2 uses `display: table`
110
+ on the tablist and wraps each tab button in a `table-cell` span, with scrolling handled by a separate wrapper element. Consumers must update their
111
+ CSS alongside the JS. Version 1 remains available for backward compatibility.
112
+ - Fixed scroll fade mask not showing on the left edge when the right button was hidden, caused by unitless `0` in CSS custom properties being invalid
113
+ in `calc()` expressions
114
+
115
+ #### [Tooltip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tooltip--docs)
116
+
117
+ - Added support for selecting and copying text within the tooltip bubble, improving accessibility for users who need to reference the content.
118
+ - Tooltip now opens on keyboard focus (Tab to trigger) and adds `aria-expanded` to the trigger button, ensuring screen reader users are informed of
119
+ the tooltip's state and have content announced immediately when navigating.
120
+
3
121
  ## v1.6.0
4
122
 
5
123
  ### Updated
package/dist/themes/crystalski/index.css CHANGED
@@ -374,6 +374,7 @@
374
374
  --uilib-list-bullet-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/list-item.svg");
375
375
  --uilib-list-image-radius: var(--uilib-border-radius-100);
376
376
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
377
+ --uilib-list-multiline-title-font: var(--uilib-typography-label-medium-strong);
377
378
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/crystalski/loader.svg");
378
379
  --uilib-loader-small: 3.75rem;
379
380
  --uilib-loader-medium: 7.5rem;
@@ -384,7 +385,7 @@
384
385
  --uilib-media-button-color: var(--uilib-color-text-strong);
385
386
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
386
387
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
387
- --uilib-modal-radius: 1rem;
388
+ --uilib-modal-radius: var(--uilib-border-radius-400);
388
389
  --uilib-pagination-text-color: var(--uilib-color-text-body);
389
390
  --uilib-pagination-border-radius: var(--uilib-icon-button-radius);
390
391
  --uilib-pagination-icon-color: var(--uilib-icon-button-ghost-color);
@@ -400,6 +401,15 @@
400
401
  --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
401
402
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
402
403
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
404
+ --uilib-card-promotion-elevation: var(--uilib-elevation-100);
405
+ --uilib-card-promotion-radius: var(--uilib-border-radius-400);
406
+ --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
407
+ --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
408
+ --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
409
+ --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
410
+ --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
411
+ --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/copy.svg");
412
+ --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-circled-filled.svg");
403
413
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
404
414
  --uilib-promo-tag-color: var(--uilib-color-text-strong);
405
415
  --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
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","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","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -381,6 +381,7 @@
381
381
  --uilib-list-bullet-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/list-item.svg");
382
382
  --uilib-list-image-radius: var(--uilib-border-radius-100);
383
383
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
384
+ --uilib-list-multiline-title-font: var(--uilib-typography-label-medium-strong);
384
385
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/firstchoice/loader.svg");
385
386
  --uilib-loader-small: 3.75rem;
386
387
  --uilib-loader-medium: 7.5rem;
@@ -391,7 +392,7 @@
391
392
  --uilib-media-button-color: var(--uilib-color-text-strong);
392
393
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
393
394
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
394
- --uilib-modal-radius: 1rem;
395
+ --uilib-modal-radius: var(--uilib-border-radius-400);
395
396
  --uilib-pagination-text-color: var(--uilib-color-text-body);
396
397
  --uilib-pagination-border-radius: var(--uilib-icon-button-radius);
397
398
  --uilib-pagination-icon-color: var(--uilib-icon-button-ghost-color);
@@ -407,6 +408,15 @@
407
408
  --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
408
409
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
409
410
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
411
+ --uilib-card-promotion-elevation: var(--uilib-elevation-100);
412
+ --uilib-card-promotion-radius: var(--uilib-border-radius-400);
413
+ --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
414
+ --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
415
+ --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
416
+ --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
417
+ --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
418
+ --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/copy.svg");
419
+ --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-circled-filled.svg");
410
420
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
411
421
  --uilib-promo-tag-color: var(--uilib-color-text-strong);
412
422
  --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
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","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","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -397,6 +397,7 @@
397
397
  --uilib-list-bullet-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/list-item.svg");
398
398
  --uilib-list-image-radius: var(--uilib-border-radius-100);
399
399
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
400
+ --uilib-list-multiline-title-font: var(--uilib-typography-label-medium);
400
401
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/tui/loader.svg");
401
402
  --uilib-loader-small: 3.75rem;
402
403
  --uilib-loader-medium: 7.5rem;
@@ -407,7 +408,7 @@
407
408
  --uilib-media-button-color: var(--uilib-color-text-strong);
408
409
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
409
410
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
410
- --uilib-modal-radius: 1rem;
411
+ --uilib-modal-radius: var(--uilib-border-radius-400);
411
412
  --uilib-pagination-text-color: var(--uilib-color-text-body);
412
413
  --uilib-pagination-border-radius: var(--uilib-icon-button-radius);
413
414
  --uilib-pagination-icon-color: var(--uilib-icon-button-ghost-color);
@@ -423,6 +424,15 @@
423
424
  --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
424
425
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
425
426
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
427
+ --uilib-card-promotion-elevation: var(--uilib-elevation-100);
428
+ --uilib-card-promotion-radius: var(--uilib-border-radius-400);
429
+ --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
430
+ --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
431
+ --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
432
+ --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
433
+ --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
434
+ --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/copy.svg");
435
+ --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-circled-filled.svg");
426
436
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
427
437
  --uilib-promo-tag-color: var(--uilib-color-text-strong);
428
438
  --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
@@ -471,8 +481,8 @@
471
481
  --uilib-scroller-focus-radius: var(--uilib-border-radius-100);
472
482
  --uilib-scroller-bar-size: var(--uilib-spacing-400);
473
483
  --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
474
- --uilib-skeleton-color: #dcdcdc;
475
- --uilib-skeleton-shimmer-color: #f5f5f5;
484
+ --uilib-skeleton-color: var(--uilib-color-other-skeleton-loading);
485
+ --uilib-skeleton-shimmer-color: var(--uilib-color-canvas-contrast);
476
486
  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
477
487
  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
478
488
  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
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","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","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -79,7 +79,7 @@
79
79
  "@storybook/addon-themes": "^10.4.5",
80
80
  "@storybook/html-vite": "^10.4.5",
81
81
  "@stylistic/eslint-plugin": "^3.1.0",
82
- "@tui/cally": "^0.1.1",
82
+ "@tui/cally": "1.0.0",
83
83
  "@types/js-beautify": "^1.14.3",
84
84
  "@types/node": "^24.0.0",
85
85
  "@typescript-eslint/eslint-plugin": "^8.46.2",
package/scss/lib/accordion/_mixins.scss CHANGED
@@ -32,9 +32,7 @@ $uilib-accordion-included: false !default;
32
32
  overflow: hidden;
33
33
 
34
34
  @media (prefers-reduced-motion: no-preference) {
35
- transition:
36
- block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
37
- content-visibility var(--uilib-motion-duration-medium) allow-discrete;
35
+ transition: block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
38
36
  }
39
37
  }
40
38
 
package/scss/lib/active-tag/_mixins.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  @use '../icon/mixins' as *;
5
5
 
6
6
  $uilib-active-tag-included: false !default;
7
+ $uilib-active-tag-group-included: false !default;
7
8
 
8
9
  // Builds active tag
9
10
  @mixin uilib-active-tag() {
@@ -15,6 +16,16 @@ $uilib-active-tag-included: false !default;
15
16
  }
16
17
  }
17
18
 
19
+ @mixin uilib-active-tag-group() {
20
+ @if not $uilib-active-tag-group-included {
21
+ $uilib-active-tag-group-included: true !global;
22
+
23
+ @include uilib-icon;
24
+ @include uilib-link;
25
+ @include uilib-active-tag-group-master;
26
+ }
27
+ }
28
+
18
29
  @mixin uilib-active-tag-master() {
19
30
  .uilib-active-tag {
20
31
  display: flex;
@@ -73,16 +84,17 @@ $uilib-active-tag-included: false !default;
73
84
  }
74
85
  }
75
86
 
76
- @mixin uilib-active-tag-group() {
77
- @include uilib-icon;
78
- @include uilib-link;
79
-
87
+ @mixin uilib-active-tag-group-master() {
80
88
  .uilib-active-tag-group {
81
89
  display: flex;
82
90
  flex-wrap: wrap;
83
91
  gap: var(--uilib-spacing-200);
84
92
  align-items: center;
85
93
 
94
+ &__visually-hidden {
95
+ @include uilib-visually-hidden;
96
+ }
97
+
86
98
  &__list {
87
99
  display: flex;
88
100
  flex-wrap: wrap;
package/scss/lib/cards/promotion/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // card-promotion / index
2
+ @use 'mixins' as *;
3
+ @include uilib-card-promotion;
package/scss/lib/cards/promotion/_mixins.scss ADDED
@@ -0,0 +1,275 @@
1
+ // Promo Banner / _mixins
2
+ @use '../../button/mixins' as *;
3
+ @use '../../divider/mixins' as *;
4
+ @use '../../icon/mixins' as *;
5
+ @use '../../info-tag/mixins' as *;
6
+ @use '../../link/mixins' as *;
7
+ @use '../../utility/mixins' as *;
8
+
9
+ $uilib-card-promotion-included: false !default;
10
+ $uilib-card-promotion-horizontal: 36rem;
11
+
12
+ @mixin uilib-card-promotion() {
13
+ @if not $uilib-card-promotion-included {
14
+ $uilib-card-promotion-included: true !global;
15
+
16
+ @include uilib-button;
17
+ @include uilib-divider;
18
+ @include uilib-icon;
19
+ @include uilib-info-tag;
20
+ @include uilib-link;
21
+ @include uilib-card-promotion-master;
22
+ }
23
+ }
24
+
25
+ @mixin uilib-card-promotion-master() {
26
+ .uilib-card-promotion {
27
+ container-name: uilib-card-promotion;
28
+ container-type: inline-size;
29
+
30
+ display: block;
31
+
32
+ width: 100%;
33
+ min-width: 0;
34
+ max-width: 100%;
35
+ box-sizing: border-box;
36
+
37
+ &--condensed {
38
+ .uilib-card-promotion__main-content,
39
+ .uilib-card-promotion__code-section {
40
+ gap: var(--uilib-spacing-200);
41
+
42
+ padding: var(--uilib-spacing-200);
43
+ }
44
+
45
+ .uilib-card-promotion__main-content {
46
+ row-gap: 0;
47
+ }
48
+
49
+ .uilib-card-promotion__code-container {
50
+ gap: var(--uilib-spacing-200);
51
+ }
52
+
53
+ .uilib-card-promotion__subcopy {
54
+ grid-column: 2;
55
+
56
+ display: block;
57
+
58
+ @container uilib-card-promotion (max-width: #{$uilib-card-promotion-horizontal}) {
59
+ display: flex;
60
+ flex-flow: column nowrap;
61
+ gap: 0;
62
+ align-items: flex-start;
63
+ }
64
+ }
65
+ }
66
+
67
+ &__inner {
68
+ display: flex;
69
+ flex-flow: column nowrap;
70
+
71
+ @container uilib-card-promotion (min-width: #{$uilib-card-promotion-horizontal}) {
72
+ flex-flow: row nowrap;
73
+ align-items: stretch;
74
+ }
75
+ }
76
+
77
+ &__main-content,
78
+ &__code-section {
79
+ position: relative;
80
+ z-index: 1;
81
+
82
+ width: 100%;
83
+ min-width: 0;
84
+ padding: var(--uilib-spacing-400);
85
+
86
+ &::before {
87
+ position: absolute;
88
+ inset: 0;
89
+ content: '';
90
+ z-index: -1;
91
+
92
+ display: block;
93
+
94
+ border-radius: var(--uilib-card-promotion-radius);
95
+
96
+ background: var(--uilib-card-promotion-bg-color);
97
+
98
+ box-shadow: var(--uilib-card-promotion-elevation);
99
+ }
100
+ }
101
+
102
+ &__main-content {
103
+ display: grid;
104
+ grid-template-columns: auto 1fr;
105
+ gap: var(--uilib-spacing-200) var(--uilib-spacing-400);
106
+ align-items: start;
107
+
108
+ @container uilib-card-promotion (min-width: #{$uilib-card-promotion-horizontal}) {
109
+ flex: 1 1 0;
110
+
111
+ width: auto;
112
+ }
113
+ }
114
+
115
+ &__code-section {
116
+ display: flex;
117
+ flex-flow: row nowrap;
118
+ gap: var(--uilib-spacing-400);
119
+ justify-content: flex-end;
120
+ align-items: center;
121
+
122
+ @container uilib-card-promotion (min-width: 36rem) {
123
+ flex: 0 0 auto;
124
+ justify-content: center;
125
+ align-self: stretch;
126
+
127
+ width: auto;
128
+ min-width: 17.4375rem; /* 279 / 16 */
129
+ }
130
+ }
131
+
132
+ &__divider {
133
+ position: relative;
134
+ z-index: 2;
135
+
136
+ width: auto;
137
+ margin: 0 var(--uilib-spacing-300);
138
+
139
+ background: var(--uilib-card-promotion-bg-color);
140
+
141
+ @container uilib-card-promotion (min-width: 36rem) {
142
+ margin: var(--uilib-spacing-300) 0;
143
+
144
+ border-top-width: 0;
145
+ border-right-width: var(--uilib-stroke-size-025);
146
+ }
147
+ }
148
+
149
+ &__code-container {
150
+ display: inline-flex;
151
+ flex-wrap: wrap;
152
+ gap: var(--uilib-spacing-400);
153
+ justify-content: center;
154
+ align-items: center;
155
+
156
+ width: 100%;
157
+ }
158
+
159
+ &__code {
160
+ flex: 0 1 auto;
161
+
162
+ min-width: 0;
163
+
164
+ color: var(--uilib-card-promotion-code-color);
165
+ font: var(--uilib-typography-label-medium-strong);
166
+ text-align: center;
167
+ text-transform: uppercase;
168
+
169
+ @container uilib-card-promotion (min-width: 36rem) {
170
+ flex: 1;
171
+ }
172
+ }
173
+
174
+ &__cta {
175
+ display: inline-grid;
176
+ flex-shrink: 0;
177
+
178
+ // Both labels share one grid cell, so the wrapper always sizes to the wider of
179
+ // "Copy code" / "Code copied" — no JS measurement, immune to font/mount timing.
180
+ .uilib-card-promotion__cta-copy,
181
+ .uilib-card-promotion__cta-copied {
182
+ grid-area: 1 / 1;
183
+
184
+ white-space: nowrap;
185
+ }
186
+
187
+ .uilib-button__content {
188
+ white-space: nowrap;
189
+ }
190
+
191
+ .uilib-card-promotion__cta-copied {
192
+ visibility: hidden;
193
+ }
194
+
195
+ &.copied {
196
+ .uilib-card-promotion__cta-copy {
197
+ visibility: hidden;
198
+ }
199
+
200
+ .uilib-card-promotion__cta-copied {
201
+ visibility: visible;
202
+ }
203
+ }
204
+ }
205
+
206
+ &__icon {
207
+ grid-row: 1 / span 2;
208
+
209
+ flex-shrink: 0;
210
+ align-self: flex-start;
211
+
212
+ @container uilib-card-promotion (max-width: #{$uilib-card-promotion-horizontal}) {
213
+ grid-row: auto;
214
+ }
215
+
216
+ &-copied {
217
+ -webkit-mask-image: var(--uilib-card-promotion-cta-copied-icon);
218
+ mask-image: var(--uilib-card-promotion-cta-copied-icon);
219
+ }
220
+
221
+ &-copy {
222
+ -webkit-mask-image: var(--uilib-card-promotion-cta-copy-icon);
223
+ mask-image: var(--uilib-card-promotion-cta-copy-icon);
224
+ }
225
+ }
226
+
227
+ &__headline-row {
228
+ display: flex;
229
+ flex-flow: column nowrap;
230
+ gap: var(--uilib-spacing-200);
231
+ align-items: flex-start;
232
+
233
+ min-width: 0;
234
+
235
+ @container uilib-card-promotion (min-width: 36rem) {
236
+ flex-flow: row wrap;
237
+ }
238
+ }
239
+
240
+ &__headline {
241
+ flex: 1 0 0;
242
+
243
+ margin: 0;
244
+
245
+ color: var(--uilib-card-promotion-headline-color);
246
+ font: var(--uilib-typography-component-heading-large-strong);
247
+ }
248
+
249
+ &__subcopy {
250
+ grid-column: 2;
251
+
252
+ margin: 0;
253
+
254
+ color: var(--uilib-card-promotion-subcopy-color);
255
+ font: var(--uilib-typography-body-medium);
256
+
257
+ @container uilib-card-promotion (max-width: #{$uilib-card-promotion-horizontal}) {
258
+ grid-column: 1 / -1;
259
+
260
+ display: flex;
261
+ flex-flow: column nowrap;
262
+ gap: var(--uilib-spacing-200);
263
+ align-items: flex-start;
264
+ }
265
+
266
+ a {
267
+ color: var(--uilib-card-promotion-subcopy-link-color);
268
+ }
269
+ }
270
+
271
+ &__announcement {
272
+ @include uilib-visually-hidden;
273
+ }
274
+ }
275
+ }
package/scss/lib/cards/promotion/_variables.scss ADDED
@@ -0,0 +1,14 @@
1
+ @use '../../../variables/env-variables' as *;
2
+
3
+ // Promo Banner – variables
4
+ $uilib-card-promotion-variables: (
5
+ elevation: var(--uilib-elevation-100),
6
+ radius: var(--uilib-border-radius-400),
7
+ bg-color: var(--uilib-color-core-neutral),
8
+ headline-color: var(--uilib-color-text-strong),
9
+ subcopy-color: var(--uilib-color-text-body),
10
+ subcopy-link-color: var(--uilib-color-text-link),
11
+ code-color: var(--uilib-color-text-strong),
12
+ cta-copy-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/copy.svg'),
13
+ cta-copied-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-circled-filled.svg'),
14
+ ) !default;
package/scss/lib/cards/selectable/_mixins.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // Card Selectable / _mixins
2
2
  @use 'variables' as *;
3
- @use '../..//utility/mixins' as *;
3
+ @use '../../utility/mixins' as *;
4
4
  @use '../card/mixins' as *;
5
5
  @use '../../forms/form-row/mixins' as *;
6
6
  @use '../../forms/input-radio/mixins' as *;