@tui/design-system 1.4.0 → 1.6.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 (29) hide show
  1. package/CHANGELOG.md +199 -0
  2. package/dist/themes/crystalski/index.css +5 -2
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +5 -2
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +5 -2
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +17 -17
  9. package/scss/lib/alert/_mixins.scss +18 -1
  10. package/scss/lib/button/_mixins.scss +4 -0
  11. package/scss/lib/cards/selectable/_mixins.scss +0 -4
  12. package/scss/lib/cards/selectable/_variables.scss +2 -1
  13. package/scss/lib/forms/datepicker/_mixins.scss +5 -0
  14. package/scss/lib/forms/input-radio-scroll/_mixins.scss +6 -1
  15. package/scss/lib/grid/_column.scss +7 -0
  16. package/scss/lib/grid/_mixins.scss +4 -0
  17. package/scss/lib/price/_mixins.scss +28 -8
  18. package/scss/lib/price/_variables.scss +2 -1
  19. package/scss/lib/price-box/_index.scss +2 -0
  20. package/scss/lib/price-box/_mixins.scss +58 -0
  21. package/scss/lib/promo-tag/_mixins.scss +11 -1
  22. package/scss/mixins.scss +1 -0
  23. package/scss/themes/crystalski/_colors.scss +2 -0
  24. package/scss/themes/crystalski/theme.json +6 -0
  25. package/scss/themes/firstchoice/_colors.scss +2 -0
  26. package/scss/themes/firstchoice/theme.json +6 -0
  27. package/scss/variables/_colors.scss +2 -0
  28. package/scss/variables/base-theme.json +25 -15
  29. package/types/components.ts +19 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,204 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.6.0
4
+
5
+ ### Updated
6
+
7
+ #### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
8
+
9
+ - Changed `role="alert"` usage from inline on the alert element to a permanent wrapper pattern. Error alerts should be wrapped in `<div role="alert">`
10
+ and other variants in `<div role="status">` to ensure announcements on dynamic injection.
11
+ - Added accessibility guidance on limiting the number of alert/status roles to prevent colliding screen reader announcements.
12
+ - Added guidance on transferring focus to error alerts when used for form-level validation summaries.
13
+ - Added recommendation to use a `<section>` element with `aria-labelledby` for permanent, high-importance alerts to create a navigable landmark for
14
+ screen reader users.
15
+
16
+ #### [Divider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-divider--docs)
17
+
18
+ - Added accessibility guidance documenting the use of `aria-hidden` on dividers used purely for decoration
19
+
20
+ #### [Date range](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-range--docs)
21
+
22
+ - The web component wrapper has been moved so that the `<legend>` is the first child of the fieldset. This fixes an accessibility issue where the
23
+ legend was not the first child due to the web component element. The component will continue to work and style correctly without these changes, but
24
+ to ensure full accessibility compliance please update to the latest markup structure.
25
+
26
+ Was:
27
+
28
+ ```html
29
+ <fieldset class="uilib-form-row" aria-describedby="input-hint input-error" aria-invalid="true">
30
+ <tui-uilib-datepicker class="uilib-datepicker" version="1">
31
+ <legend class="uilib-form-row__label">Select a date</legend>
32
+ <p id="input-hint" class="uilib-form-row__hint">Input hint text</p>
33
+ <div class="uilib-form-row__input">...</div>
34
+ <p id="input-error" class="uilib-form-row__error">
35
+ <span class="uilib-form-row__error-prefix">Error: </span>
36
+ Input error message
37
+ </p>
38
+ </tui-uilib-datepicker>
39
+ </fieldset>
40
+ ```
41
+
42
+ Updated to:
43
+
44
+ ```html
45
+ <fieldset class="uilib-form-row" aria-describedby="input-hint input-error" aria-invalid="true">
46
+ <legend class="uilib-form-row__label">Select a date</legend>
47
+ <tui-uilib-datepicker class="uilib-datepicker" version="1">
48
+ <p id="input-hint" class="uilib-form-row__hint">Input hint text</p>
49
+ <div class="uilib-form-row__input">...</div>
50
+ <p id="input-error" class="uilib-form-row__error">
51
+ <span class="uilib-form-row__error-prefix">Error: </span>
52
+ Input error message
53
+ </p>
54
+ </tui-uilib-datepicker>
55
+ </fieldset>
56
+ ```
57
+
58
+ #### [Form row](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-row--docs)
59
+
60
+ - Added accessibility guidance on focus management for form submission errors, recommending focus transfer to the error alert or the first errored
61
+ input.
62
+
63
+ #### [Input radio scroll](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio-scroll--docs)
64
+
65
+ - The web component wrapper has been moved so that the `<legend>` is the first child of the fieldset. The `uilib-input-radio-scroll` class has also
66
+ moved to the fieldset. The component will continue to work and style correctly without these changes, but to ensure full accessibility compliance
67
+ please update to the latest markup structure.
68
+
69
+ Was:
70
+
71
+ ```html
72
+ <fieldset class="uilib-form-row" aria-describedby="group-hint">
73
+ <tui-uilib-input-radio-scroll class="uilib-input-radio-scroll" style="--card-default-width: 15rem">
74
+ <legend class="uilib-form-row__label">Group title</legend>
75
+ <p id="group-hint" class="uilib-form-row__hint">Sub title</p>
76
+ <div class="uilib-form-row__input">...</div>
77
+ </tui-uilib-input-radio-scroll>
78
+ </fieldset>
79
+ ```
80
+
81
+ Updated to:
82
+
83
+ ```html
84
+ <fieldset class="uilib-form-row uilib-input-radio-scroll" aria-describedby="group-hint">
85
+ <legend class="uilib-form-row__label">Group title</legend>
86
+ <p id="group-hint" class="uilib-form-row__hint">Sub title</p>
87
+ <div class="uilib-form-row__input">
88
+ <tui-uilib-input-radio-scroll style="--card-default-width: 15rem"> ... </tui-uilib-input-radio-scroll>
89
+ </div>
90
+ </fieldset>
91
+ ```
92
+
93
+ #### [Hero](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-hero--docs)
94
+
95
+ - Added `aria-hidden="true"` to the hero image as it is decorative and should not be announced by screen readers
96
+ - Updated default alt text to empty string to reflect the image being purely decorative
97
+ - Added accessibility guidance for visually hidden text in CTA buttons and linking terms and conditions
98
+
99
+ #### [Image](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
100
+
101
+ - Improved accessibility guidance with descriptive alt text examples, use of `aria-hidden` for decorative images, and recommendations for responsive
102
+ image delivery
103
+
104
+ #### [Loader](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-loader--docs)
105
+
106
+ - Removed `role="status"` from the loader element. The loader should instead be placed within a permanent `role="status"` wrapper in the DOM so that
107
+ screen readers announce loading state changes on injection and removal.
108
+
109
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
110
+
111
+ - Added close on backdrop click. Clicking the overlay area outside the modal dialog now dismisses it.
112
+
113
+ #### [Pagination](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-pagination--docs)
114
+
115
+ - Added focus management guidance for pagination interactions, recommending focus remains on the active control by default but may move to paginated
116
+ content on full page refresh.
117
+ - Added guidance on using live regions to announce content updates when dynamically paginating.
118
+
119
+ #### [Customer review](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-customer-review--docs)
120
+
121
+ - Added accessibility guidance on grouping multiple customer reviews within a `section` element using `aria-labelledby` to link to an overall heading.
122
+
123
+ #### [Numerical rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs)
124
+
125
+ - Updated accessible text to read "Customer overall rating" instead of "Customer Reviews" to make it clearer that the score represents an overall
126
+ rating rather than a count of reviews.
127
+
128
+ #### [Percentage rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
129
+
130
+ - The visually hidden accessible text now always renders regardless of whether the review count is a link or plain text. Previously it was removed
131
+ when the link variant was used, relying solely on the link's `aria-label`.
132
+ - Simplified the reviews link `aria-label` to avoid repeating the rating percentage (already announced via the hidden text):
133
+
134
+ #### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
135
+
136
+ - Updated accessibility guidance: Use `aria-busy="true"` on the parent container while loading, and remove or set it to false once content has loaded
137
+ to trigger a screen reader announcement.
138
+
139
+ ### Fixed
140
+
141
+ #### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
142
+
143
+ - Fix for missing `uilib-grid-col-offset-reset` mixin and classes `.uilib-grid\_\_col--offset-reset`, `.uilib-grid\_\_col--offset-[res]-reset`
144
+
145
+ #### [Input radio scroll](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio-scroll--docs)
146
+
147
+ - Fixed an issue where the scroll container remained focusable when all radio inputs are disabled and the content is not scrollable
148
+
149
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
150
+
151
+ - Fixed `modalClose` event not firing when the modal was dismissed via the Escape key. The event now fires consistently regardless of how the modal is
152
+ closed.
153
+
154
+ ### Deprecated
155
+
156
+ #### [Selectable card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
157
+
158
+ - Deprecated dashed outline variant `uilib-card-selectable--dashed` to simplify and align styling across the estate. With the dashed variant being
159
+ removed the css variable `--uilib-card-selectable-dashed-border-color` has also been deprecated.
160
+
161
+ ## v1.5.0
162
+
163
+ ### Added
164
+
165
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
166
+
167
+ - New colours added for neutral statuses, `--uilib-color-status-neutral-surface` and `--uilib-color-status-neutral-icon`
168
+
169
+ #### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
170
+
171
+ - Added neutral variant with configurable icon. Suitable for general, non-urgent notices, system status, supplementary guidance, or informational
172
+ context that doesn't fit other categories.
173
+
174
+ #### [Button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-button--docs)
175
+
176
+ - Added class `uilib-button__visually-hidden` to aid in visually hiding additional text needed to make the button more descriptive. We use
177
+ visually-hidden text rather than `aria-label` because it is picked up by automatic translation services, ensuring all users receive an accessible
178
+ experience. `aria-label` is not translated by browser or third-party translation tools.
179
+
180
+ #### [Price](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price--docs)
181
+
182
+ - Added support for an additional tooltip for providing a discount price breakdown.
183
+
184
+ #### [Price box](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price-box--docs)
185
+
186
+ - Added price box, a container component that groups pricing information with promotional tags, a CTA button, and optional footer content. Used in
187
+ search results, product cards, and booking flows to present a complete price-to-action unit.
188
+
189
+ ### Updated
190
+
191
+ #### [Input Stepper](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-stepper--docs)
192
+
193
+ - Interacting with the increase or decrease buttons now announces the updated value to screen readers via an `aria-live` region. No markup changes are
194
+ required — the live region is created and managed internally by the web component.
195
+
196
+ #### [Price](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price--docs)
197
+
198
+ - Updated spacing within the price display to match the latest designs, i.e. adding a small amount of space between the currency and the price.
199
+ - Updated font style for small variant. New component token added: `--uilib-price-main-small-font`.
200
+ - Improved documentation including additional content guidelines, i.e. formatting examples for different locales.
201
+
3
202
  ## v1.4.0
4
203
 
5
204
  ### Added
package/dist/themes/crystalski/index.css CHANGED
@@ -46,10 +46,12 @@
46
46
  --uilib-color-status-danger-surface: #ffbfd3;
47
47
  --uilib-color-status-warning-surface: #fff4c4;
48
48
  --uilib-color-status-info-surface: #f6d5ff;
49
+ --uilib-color-status-neutral-surface: #f5f5f5;
49
50
  --uilib-color-status-success-icon: #00a57c;
50
51
  --uilib-color-status-danger-icon: #970030;
51
52
  --uilib-color-status-warning-icon: #998117;
52
53
  --uilib-color-status-info-icon: #84329b;
54
+ --uilib-color-status-neutral-icon: #252a32;
53
55
  --uilib-color-canvas-default: #fff;
54
56
  --uilib-color-canvas-contrast: #f5f5f5;
55
57
  --uilib-color-border-interaction: #84329b;
@@ -239,10 +241,10 @@
239
241
  --uilib-card-selectable-radius: var(--uilib-border-radius-200);
240
242
  --uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
241
243
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
242
- --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
243
244
  --uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
244
245
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-filled.svg");
245
246
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-solid.svg");
247
+ --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
246
248
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
247
249
  --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
248
250
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
@@ -394,7 +396,8 @@
394
396
  --uilib-price-primary-font: var(--uilib-typography-component-heading-medium);
395
397
  --uilib-price-secondary-font: var(--uilib-typography-body-large);
396
398
  --uilib-price-discount-color: var(--uilib-color-promotion);
397
- --uilib-price-main-medium-font: var(--uilib-typography-component-heading-xlarge-strong);
399
+ --uilib-price-main-small-font: var(--uilib-typography-component-heading-medium-strong);
400
+ --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
398
401
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
399
402
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
400
403
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
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;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","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","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -47,10 +47,12 @@
47
47
  --uilib-color-status-danger-surface: #fbdbd9;
48
48
  --uilib-color-status-warning-surface: #fec;
49
49
  --uilib-color-status-info-surface: #faf5ed;
50
+ --uilib-color-status-neutral-surface: #e3e9e7;
50
51
  --uilib-color-status-success-icon: #81bc3c;
51
52
  --uilib-color-status-danger-icon: #a5261c;
52
53
  --uilib-color-status-warning-icon: #fa0;
53
54
  --uilib-color-status-info-icon: #002f17;
55
+ --uilib-color-status-neutral-icon: #3b4641;
54
56
  --uilib-color-canvas-default: #fff;
55
57
  --uilib-color-canvas-contrast: #faf5ed;
56
58
  --uilib-color-border-interaction: #d61d5f;
@@ -246,10 +248,10 @@
246
248
  --uilib-card-selectable-radius: var(--uilib-border-radius-200);
247
249
  --uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
248
250
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
249
- --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
250
251
  --uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
251
252
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-filled.svg");
252
253
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-solid.svg");
254
+ --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
253
255
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
254
256
  --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
255
257
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
@@ -401,7 +403,8 @@
401
403
  --uilib-price-primary-font: var(--uilib-typography-component-heading-medium);
402
404
  --uilib-price-secondary-font: var(--uilib-typography-body-large);
403
405
  --uilib-price-discount-color: var(--uilib-color-text-danger);
404
- --uilib-price-main-medium-font: var(--uilib-typography-component-heading-xlarge-strong);
406
+ --uilib-price-main-small-font: var(--uilib-typography-component-heading-medium-strong);
407
+ --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
405
408
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
406
409
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
407
410
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
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;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/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"}
package/dist/themes/tui/index.css CHANGED
@@ -46,10 +46,12 @@
46
46
  --uilib-color-status-danger-surface: #fde2e3;
47
47
  --uilib-color-status-warning-surface: #ffefd6;
48
48
  --uilib-color-status-info-surface: #d8e2fd;
49
+ --uilib-color-status-neutral-surface: #f5f5f5;
49
50
  --uilib-color-status-success-icon: #2ba168;
50
51
  --uilib-color-status-danger-icon: #c00c12;
51
52
  --uilib-color-status-warning-icon: #cc7a00;
52
53
  --uilib-color-status-info-icon: #1b115c;
54
+ --uilib-color-status-neutral-icon: #4c4c4c;
53
55
  --uilib-color-canvas-default: #fff;
54
56
  --uilib-color-canvas-contrast: #f5f5f5;
55
57
  --uilib-color-border-interaction: #0c4bf3;
@@ -262,10 +264,10 @@
262
264
  --uilib-card-selectable-radius: var(--uilib-border-radius-200);
263
265
  --uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
264
266
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
265
- --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
266
267
  --uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
267
268
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-filled.svg");
268
269
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-solid.svg");
270
+ --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
269
271
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
270
272
  --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
271
273
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
@@ -417,7 +419,8 @@
417
419
  --uilib-price-primary-font: var(--uilib-typography-component-heading-medium);
418
420
  --uilib-price-secondary-font: var(--uilib-typography-body-large);
419
421
  --uilib-price-discount-color: var(--uilib-color-promotion);
420
- --uilib-price-main-medium-font: var(--uilib-typography-component-heading-xlarge-strong);
422
+ --uilib-price-main-small-font: var(--uilib-typography-component-heading-medium-strong);
423
+ --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
421
424
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
422
425
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
423
426
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
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;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","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","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.4.0",
3
+ "version": "1.6.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -73,23 +73,23 @@
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.3",
77
- "@storybook/addon-docs": "10.4.3",
78
- "@storybook/addon-links": "10.4.3",
79
- "@storybook/addon-themes": "10.4.3",
80
- "@storybook/html-vite": "10.4.3",
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
- "@tui/cally": "^0.1.0",
82
+ "@tui/cally": "^0.1.1",
83
83
  "@types/js-beautify": "^1.14.3",
84
- "@types/node": "^25.2.3",
84
+ "@types/node": "^24.0.0",
85
85
  "@typescript-eslint/eslint-plugin": "^8.46.2",
86
86
  "@typescript-eslint/parser": "^8.46.2",
87
- "aws-cdk-lib": "^2.220.0",
87
+ "aws-cdk-lib": "^2.259.0",
88
88
  "copyfiles": "^2.4.1",
89
89
  "deepmerge": "^4.3.1",
90
90
  "dotenv": "^17.2.3",
91
91
  "dotenv-cli": "^11.0.0",
92
- "esbuild": "^0.28.0",
92
+ "esbuild": "^0.28.1",
93
93
  "eslint": "^9.38.0",
94
94
  "eslint-config-airbnb-extended": "^3.0.1",
95
95
  "eslint-config-prettier": "^10.0.1",
@@ -101,28 +101,28 @@
101
101
  "eslint-plugin-prettier": "^5.5.4",
102
102
  "eslint-plugin-react": "^7.37.5",
103
103
  "eslint-plugin-react-hooks": "^7.0.1",
104
- "eslint-plugin-storybook": "10.4.3",
104
+ "eslint-plugin-storybook": "^10.4.5",
105
105
  "git-format-staged": "4.0.1",
106
106
  "glob": "^13.0.0",
107
107
  "globals": "^17.3.0",
108
108
  "husky": "^9.1.7",
109
109
  "jest": "^30.2.0",
110
- "js-beautify": "^1.15.1",
110
+ "js-beautify": "^2.0.3",
111
111
  "lint-staged": "^17.0.2",
112
112
  "log-update": "^8.0.0",
113
113
  "node-fetch": "^3.3.2",
114
- "npm-run-all2": "^9.0.1",
114
+ "npm-run-all2": "^9.0.2",
115
115
  "postcss-import": "^16.1.1",
116
- "postcss-preset-env": "^11.3.0",
116
+ "postcss-preset-env": "^11.3.1",
117
117
  "postcss-scss": "^4.0.6",
118
118
  "prettier": "^3.4.2",
119
119
  "remark-gfm": "^4.0.0",
120
- "sass": "^1.93.2",
120
+ "sass": "^1.101.0",
121
121
  "sass-true": "^10.0.0",
122
122
  "shx": "0.4.0",
123
123
  "source-map-support": "^0.5.21",
124
- "storybook": "10.4.3",
125
- "storybook-addon-pseudo-states": "^10.4.3",
124
+ "storybook": "^10.4.5",
125
+ "storybook-addon-pseudo-states": "^10.4.5",
126
126
  "storybook-addon-tag-badges": "^3.1.0",
127
127
  "storybook-dark-mode": "^5.0.0",
128
128
  "stylelint": "^17.2.0",
package/scss/lib/alert/_mixins.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // Alert / _mixins
2
- @use '../grid/mixins' as *;
3
2
  @use '../utility/mixins' as *;
3
+ @use '../icon/mixins' as *;
4
4
 
5
5
  $uilib-alert-included: false !default;
6
6
 
@@ -9,6 +9,7 @@ $uilib-alert-included: false !default;
9
9
  @if not $uilib-alert-included {
10
10
  $uilib-alert-included: true !global;
11
11
 
12
+ @include uilib-icon;
12
13
  @include uilib-alert-master;
13
14
  }
14
15
  }
@@ -54,6 +55,12 @@ $uilib-alert-included: false !default;
54
55
  -webkit-mask-image: var(--uilib-alert-icon-info-mask);
55
56
  mask-image: var(--uilib-alert-icon-info-mask);
56
57
  }
58
+
59
+ &__icon {
60
+ position: absolute;
61
+ top: var(--uilib-spacing-300);
62
+ left: var(--uilib-spacing-300);
63
+ }
57
64
  }
58
65
 
59
66
  .uilib-alert--error {
@@ -92,6 +99,16 @@ $uilib-alert-included: false !default;
92
99
  }
93
100
  }
94
101
 
102
+ .uilib-alert--neutral {
103
+ border-color: var(--uilib-color-status-neutral-icon);
104
+
105
+ background: var(--uilib-color-status-neutral-surface);
106
+
107
+ &::before {
108
+ display: none;
109
+ }
110
+ }
111
+
95
112
  .uilib-alert__heading {
96
113
  font: var(--uilib-typography-component-heading-small-strong);
97
114
  text-wrap: initial;
package/scss/lib/button/_mixins.scss CHANGED
@@ -164,6 +164,10 @@ $uilib-button-included: false !default;
164
164
  .uilib-button--width-restrict {
165
165
  width: auto;
166
166
  }
167
+
168
+ .uilib-button__visually-hidden {
169
+ @include uilib-visually-hidden;
170
+ }
167
171
  }
168
172
 
169
173
  $uilib-button-list-included: false !default;
package/scss/lib/cards/selectable/_mixins.scss CHANGED
@@ -65,10 +65,6 @@ $uilib-card-selectable-included: false !default;
65
65
 
66
66
  box-shadow: none;
67
67
 
68
- &--dashed {
69
- outline: var(--uilib-stroke-size-025) var(--uilib-stroke-style-dashed) var(--uilib-card-selectable-dashed-border-color);
70
- }
71
-
72
68
  &--clickable-card {
73
69
  cursor: pointer;
74
70
 
package/scss/lib/cards/selectable/_variables.scss CHANGED
@@ -4,8 +4,9 @@ $uilib-card-selectable-variables: (
4
4
  radius: var(--uilib-border-radius-200),
5
5
  bg-color: var(--uilib-color-core-neutral),
6
6
  default-border-color: var(--uilib-color-border-card),
7
- dashed-border-color: var(--uilib-color-border-dashed),
8
7
  selected-border-color: var(--uilib-color-border-interaction),
9
8
  selected-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-filled.svg'),
10
9
  selected-icon-shape: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-solid.svg'),
10
+ // Below are deprecated
11
+ dashed-border-color: var(--uilib-color-border-dashed),
11
12
  ) !default;
package/scss/lib/forms/datepicker/_mixins.scss CHANGED
@@ -35,6 +35,11 @@ $uilib-datepicker-included: false !default;
35
35
  }
36
36
  }
37
37
 
38
+ .uilib-form-row:has(tui-uilib-datepicker[hide-input][defined]) [class^='uilib-form-row__'] {
39
+ /* Hide the form row contents once element is defined */
40
+ display: none;
41
+ }
42
+
38
43
  .uilib-datepicker {
39
44
  --uilib-datepicker-dual: #{$uilib-datepicker-dual};
40
45
  --uilib-datepicker-dual-weeknumbers: #{$uilib-datepicker-dual-weeknumbers};
package/scss/lib/forms/input-radio-scroll/_mixins.scss CHANGED
@@ -67,6 +67,10 @@ $uilib-input-radio-scroll-included: false !default;
67
67
  #0000
68
68
  );
69
69
 
70
+ tui-uilib-input-radio-scroll {
71
+ display: contents;
72
+ }
73
+
70
74
  .uilib-form-row__label {
71
75
  font: var(--uilib-typography-heading-xlarge);
72
76
  }
@@ -175,7 +179,8 @@ $uilib-input-radio-scroll-included: false !default;
175
179
  @include uilib-visually-hidden;
176
180
  }
177
181
 
178
- &[is-hydrated] {
182
+ &[is-hydrated],
183
+ tui-uilib-input-radio-scroll[is-hydrated] {
179
184
  .uilib-input-chip-list,
180
185
  .uilib-card-selectable-list {
181
186
  scrollbar-width: none;
package/scss/lib/grid/_column.scss CHANGED
@@ -31,12 +31,19 @@
31
31
  @include uilib-grid-col-offset($i);
32
32
  }
33
33
  }
34
+
35
+ #{$uilib-grid-selector-column}--offset#{$prefix}-reset {
36
+ @include uilib-grid-col-offset-reset;
37
+ }
38
+
34
39
  #{$uilib-grid-selector-column}--order#{$prefix}-first {
35
40
  @include uilib-grid-col-order-first;
36
41
  }
42
+
37
43
  #{$uilib-grid-selector-column}--order#{$prefix}-last {
38
44
  @include uilib-grid-col-order-last;
39
45
  }
46
+
40
47
  #{$uilib-grid-selector-column}--order#{$prefix}-reset {
41
48
  @include uilib-grid-col-order-reset;
42
49
  }
package/scss/lib/grid/_mixins.scss CHANGED
@@ -106,6 +106,10 @@
106
106
  grid-column-start: (1 + $offset);
107
107
  }
108
108
 
109
+ @mixin uilib-grid-col-offset-reset {
110
+ grid-column-start: auto;
111
+ }
112
+
109
113
  @mixin uilib-grid-col-order($i) {
110
114
  @if meta.type-of($i) != 'number' {
111
115
  @error 'Value for `uilib-grid-col-order` should be a number.';
package/scss/lib/price/_mixins.scss CHANGED
@@ -29,33 +29,54 @@ $uilib-price-included: false !default;
29
29
  &__content {
30
30
  display: flex;
31
31
  flex-wrap: wrap;
32
- gap: 0 var(--uilib-spacing-200);
32
+ gap: 0;
33
33
  align-items: baseline;
34
34
  }
35
35
 
36
36
  // Prefix element
37
37
  &__prefix {
38
- margin-right: var(--uilib-spacing-050);
38
+ margin-right: var(--uilib-spacing-100);
39
39
 
40
40
  font: var(--uilib-price-primary-font);
41
41
  }
42
42
 
43
43
  // Currency element
44
44
  &__currency,
45
- &__main-unit,
46
45
  &__sub-unit,
47
46
  &__suffix {
48
47
  font: var(--uilib-price-primary-font);
49
- font-weight: var(--uilib-font-weight-bold);
48
+ }
49
+
50
+ &__main-unit {
51
+ font: var(--uilib-price-main-small-font);
50
52
  }
51
53
 
52
54
  &__prefix,
53
55
  &__currency,
54
56
  &__main-unit,
55
57
  &__sub-unit,
56
- &__suffix {
57
- &:not(:first-child) {
58
- margin-left: calc(var(--uilib-spacing-200) * -1);
58
+ &__suffix,
59
+ &__discount-tooltip,
60
+ &__original-price {
61
+ &:has(+ .uilib-price__original-price),
62
+ &:has(+ .uilib-price__discount) {
63
+ margin-right: var(--uilib-spacing-200);
64
+ }
65
+ }
66
+
67
+ &__currency,
68
+ &__main-unit,
69
+ &__sub-unit {
70
+ &:has(+ .uilib-price__currency),
71
+ &:has(+ .uilib-price__suffix) {
72
+ margin-right: var(--uilib-spacing-100);
73
+ }
74
+ }
75
+
76
+ &__currency {
77
+ &:has(+ .uilib-price__main-unit),
78
+ &:has(+ .uilib-price__sub-unit) {
79
+ margin-right: var(--uilib-spacing-100);
59
80
  }
60
81
  }
61
82
 
@@ -67,7 +88,6 @@ $uilib-price-included: false !default;
67
88
  // Discount element
68
89
  &__discount {
69
90
  color: var(--uilib-price-discount-color);
70
- font-weight: var(--uilib-font-weight-bold);
71
91
  }
72
92
 
73
93
  &__total {
package/scss/lib/price/_variables.scss CHANGED
@@ -4,7 +4,8 @@ $uilib-price-variables: (
4
4
  primary-font: var(--uilib-typography-component-heading-medium),
5
5
  secondary-font: var(--uilib-typography-body-large),
6
6
  discount-color: var(--uilib-color-promotion),
7
- main-medium-font: var(--uilib-typography-component-heading-xlarge-strong),
7
+ main-small-font: var(--uilib-typography-component-heading-medium-strong),
8
+ main-medium-font: var(--uilib-typography-component-heading-large-strong),
8
9
  main-large-font: var(--uilib-typography-component-heading-xxlarge-strong),
9
10
  sub-large-font: var(--uilib-typography-component-heading-medium-strong),
10
11
  ) !default;
package/scss/lib/price-box/_index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @use 'mixins' as *;
2
+ @include uilib-price-box;
package/scss/lib/price-box/_mixins.scss ADDED
@@ -0,0 +1,58 @@
1
+ // Price Box / _mixins
2
+ @use '../button/mixins' as *;
3
+ @use '../divider/mixins' as *;
4
+ @use '../price/mixins' as *;
5
+ @use '../link/mixins' as *;
6
+ @use '../promo-tag/mixins' as *;
7
+
8
+ $uilib-price-box-included: false !default;
9
+
10
+ @mixin uilib-price-box() {
11
+ @if not $uilib-price-box-included {
12
+ $uilib-price-box-included: true !global;
13
+
14
+ @include uilib-button;
15
+ @include uilib-divider;
16
+ @include uilib-price;
17
+ @include uilib-link;
18
+ @include uilib-promo-tag;
19
+ @include uilib-promo-tag-list;
20
+ @include uilib-price-box-master;
21
+ }
22
+ }
23
+
24
+ @mixin uilib-price-box-master() {
25
+ .uilib-price-box {
26
+ display: flex;
27
+ flex-flow: column;
28
+ gap: var(--uilib-spacing-200);
29
+
30
+ &__tags,
31
+ &__tags.uilib-promo-tag-list {
32
+ margin: 0;
33
+ }
34
+
35
+ &__price {
36
+ display: flex;
37
+ flex-flow: row wrap;
38
+ gap: var(--uilib-spacing-200);
39
+ justify-content: space-between;
40
+ align-items: flex-start;
41
+ }
42
+
43
+ &__divider,
44
+ &__divider.uilib-divider {
45
+ margin: 0;
46
+ }
47
+
48
+ &__text {
49
+ color: var(--uilib-color-text-body);
50
+ font: var(--uilib-typography-body-small);
51
+
52
+ strong {
53
+ color: var(--uilib-color-text-strong);
54
+ font: var(--uilib-typography-body-small-strong);
55
+ }
56
+ }
57
+ }
58
+ }
package/scss/lib/promo-tag/_mixins.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use '../icon/mixins' as *;
4
4
 
5
5
  $uilib-promo-tag-included: false !default;
6
+ $uilib-promo-tag-list-included: false !default;
6
7
 
7
8
  // Builds promo tag
8
9
  @mixin uilib-promo-tag() {
@@ -14,6 +15,15 @@ $uilib-promo-tag-included: false !default;
14
15
  }
15
16
  }
16
17
 
18
+ @mixin uilib-promo-tag-list() {
19
+ @if not $uilib-promo-tag-list-included {
20
+ $uilib-promo-tag-list-included: true !global;
21
+
22
+ @include uilib-promo-tag;
23
+ @include uilib-promo-tag-list-master;
24
+ }
25
+ }
26
+
17
27
  @mixin uilib-promo-tag-master() {
18
28
  .uilib-promo-tag {
19
29
  display: flex;
@@ -63,7 +73,7 @@ $uilib-promo-tag-included: false !default;
63
73
  }
64
74
  }
65
75
 
66
- @mixin uilib-promo-tag-list() {
76
+ @mixin uilib-promo-tag-list-master() {
67
77
  .uilib-promo-tag-list {
68
78
  display: flex;
69
79
  flex-flow: row wrap;
package/scss/mixins.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  @forward 'lib/media-button/mixins';
36
36
  @forward 'lib/pagination/mixins';
37
37
  @forward 'lib/price/mixins';
38
+ @forward 'lib/price-box/mixins';
38
39
  @forward 'lib/promo-tag/mixins';
39
40
  @forward 'lib/ratings-reviews/customer-review/mixins';
40
41
  @forward 'lib/ratings-reviews/numerical/mixins';
package/scss/themes/crystalski/_colors.scss CHANGED
@@ -21,10 +21,12 @@ $uilib-color-semantic-crystalski: (
21
21
  status-danger-surface: map.get($uilib-crystalski-primitives, 'color-red-20'),
22
22
  status-warning-surface: map.get($uilib-crystalski-primitives, 'color-yellow-20'),
23
23
  status-info-surface: map.get($uilib-crystalski-primitives, 'color-purple-20'),
24
+ status-neutral-surface: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
24
25
  status-success-icon: map.get($uilib-crystalski-primitives, 'color-green-80'),
25
26
  status-danger-icon: map.get($uilib-crystalski-primitives, 'color-red-80'),
26
27
  status-warning-icon: map.get($uilib-crystalski-primitives, 'color-yellow-80'),
27
28
  status-info-icon: map.get($uilib-crystalski-primitives, 'color-purple-80'),
29
+ status-neutral-icon: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
28
30
  canvas-default: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
29
31
  canvas-contrast: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
30
32
  canvas-footer: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
package/scss/themes/crystalski/theme.json CHANGED
@@ -61,6 +61,9 @@
61
61
  "color-status-info-surface": {
62
62
  "primitive": "color-purple-20"
63
63
  },
64
+ "color-status-neutral-surface": {
65
+ "primitive": "color-neutral-20"
66
+ },
64
67
  "color-status-success-icon": {
65
68
  "primitive": "color-green-80",
66
69
  "darkColor": false,
@@ -74,6 +77,9 @@
74
77
  },
75
78
  "color-status-info-icon": {
76
79
  "primitive": "color-purple-80"
80
+ },
81
+ "color-status-neutral-icon": {
82
+ "primitive": "color-neutral-90"
77
83
  }
78
84
  }
79
85
  },
package/scss/themes/firstchoice/_colors.scss CHANGED
@@ -22,10 +22,12 @@ $uilib-color-semantic-firstchoice: (
22
22
  status-danger-surface: map.get($uilib-firstchoice-primitives, 'color-red-20'),
23
23
  status-warning-surface: map.get($uilib-firstchoice-primitives, 'color-orange-20'),
24
24
  status-info-surface: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
25
+ status-neutral-surface: map.get($uilib-firstchoice-primitives, 'color-neutral-20'),
25
26
  status-success-icon: map.get($uilib-firstchoice-primitives, 'color-greenmoss-70'),
26
27
  status-danger-icon: map.get($uilib-firstchoice-primitives, 'color-red-80'),
27
28
  status-warning-icon: map.get($uilib-firstchoice-primitives, 'color-orange-60'),
28
29
  status-info-icon: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
30
+ status-neutral-icon: map.get($uilib-firstchoice-primitives, 'color-neutral-90'),
29
31
  canvas-default: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
30
32
  canvas-contrast: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
31
33
  border-interaction: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
package/scss/themes/firstchoice/theme.json CHANGED
@@ -66,6 +66,9 @@
66
66
  "color-status-info-surface": {
67
67
  "primitive": "color-sand-30"
68
68
  },
69
+ "color-status-neutral-surface": {
70
+ "primitive": "color-neutral-20"
71
+ },
69
72
  "color-status-success-icon": {
70
73
  "primitive": "color-greenmoss-70",
71
74
  "lowContrast": false
@@ -79,6 +82,9 @@
79
82
  },
80
83
  "color-status-info-icon": {
81
84
  "primitive": "color-greenpalm-100"
85
+ },
86
+ "color-status-neutral-icon": {
87
+ "primitive": "color-neutral-90"
82
88
  }
83
89
  }
84
90
  },
package/scss/variables/_colors.scss CHANGED
@@ -22,10 +22,12 @@ $uilib-color-semantic: (
22
22
  status-danger-surface: map.get($uilib-primitives, 'color-red-20'),
23
23
  status-warning-surface: map.get($uilib-primitives, 'color-orange-20'),
24
24
  status-info-surface: map.get($uilib-primitives, 'color-blue-20'),
25
+ status-neutral-surface: map.get($uilib-primitives, 'color-neutral-20'),
25
26
  status-success-icon: map.get($uilib-primitives, 'color-green-80'),
26
27
  status-danger-icon: map.get($uilib-primitives, 'color-red-80'),
27
28
  status-warning-icon: map.get($uilib-primitives, 'color-orange-80'),
28
29
  status-info-icon: map.get($uilib-primitives, 'color-blue-100'),
30
+ status-neutral-icon: map.get($uilib-primitives, 'color-neutral-90'),
29
31
  canvas-default: map.get($uilib-primitives, 'color-neutral-10'),
30
32
  canvas-contrast: map.get($uilib-primitives, 'color-neutral-20'),
31
33
  border-interaction: map.get($uilib-primitives, 'color-blue-70'),
package/scss/variables/base-theme.json CHANGED
@@ -89,6 +89,10 @@
89
89
  "primitive": "color-blue-20",
90
90
  "title": "Status info surface"
91
91
  },
92
+ "color-status-neutral-surface": {
93
+ "primitive": "color-neutral-20",
94
+ "title": "Status neutral surface"
95
+ },
92
96
  "color-status-success-icon": {
93
97
  "primitive": "color-green-80",
94
98
  "title": "Status sucess icon",
@@ -108,6 +112,11 @@
108
112
  "primitive": "color-blue-100",
109
113
  "title": "Status info icon",
110
114
  "darkColor": true
115
+ },
116
+ "color-status-neutral-icon": {
117
+ "primitive": "color-neutral-90",
118
+ "title": "Status neutral icon",
119
+ "darkColor": true
111
120
  }
112
121
  }
113
122
  },
@@ -1062,12 +1071,6 @@
1062
1071
  "title": "Default border colour",
1063
1072
  "description": "Default border colour"
1064
1073
  },
1065
- "card-selectable-dashed-border-color": {
1066
- "primitive": "uilib-color-border-dashed",
1067
- "displayType": "color",
1068
- "title": "Dashed border colour",
1069
- "description": "Dashed border colour"
1070
- },
1071
1074
  "card-selectable-selected-border-color": {
1072
1075
  "primitive": "uilib-color-border-interaction",
1073
1076
  "displayType": "color",
@@ -2042,14 +2045,14 @@
2042
2045
  "displayType": "color"
2043
2046
  },
2044
2047
  "price-primary-font": {
2045
- "primitive": "uilib-font-family-lead",
2048
+ "primitive": "uilib-typography-component-heading-medium",
2046
2049
  "title": "Primary price font",
2047
2050
  "description": "Primary price font",
2048
2051
  "displayType": "font",
2049
2052
  "longValue": true
2050
2053
  },
2051
2054
  "price-secondary-font": {
2052
- "primitive": "uilib-font-family-base",
2055
+ "primitive": "uilib-typography-body-large",
2053
2056
  "title": "Secondary price font",
2054
2057
  "description": "Secondary price font",
2055
2058
  "displayType": "font",
@@ -2061,23 +2064,30 @@
2061
2064
  "description": "Discount colour",
2062
2065
  "displayType": "color"
2063
2066
  },
2067
+ "price-main-small-font": {
2068
+ "primitive": "uilib-typography-component-heading-medium-strong",
2069
+ "title": "Main price unit for small variant",
2070
+ "description": "Main price unit for small variant",
2071
+ "displayType": "font",
2072
+ "longValue": true
2073
+ },
2064
2074
  "price-main-medium-font": {
2065
- "primitive": "uilib-typography-component-heading-xlarge-strong",
2066
- "title": "Main price unit for Medium variant",
2067
- "description": "Main price unit for Medium variant",
2075
+ "primitive": "uilib-typography-component-heading-large-strong",
2076
+ "title": "Main price unit for medium variant",
2077
+ "description": "Main price unit for medium variant",
2068
2078
  "displayType": "font",
2069
2079
  "longValue": true
2070
2080
  },
2071
2081
  "price-main-large-font": {
2072
2082
  "primitive": "uilib-typography-component-heading-xxlarge-strong",
2073
- "title": "Main unit font for Medium variant",
2074
- "description": "Main unit font for Medium variant",
2083
+ "title": "Main unit font for large variant",
2084
+ "description": "Main unit font for large variant",
2075
2085
  "displayType": "font"
2076
2086
  },
2077
2087
  "price-sub-large-font": {
2078
2088
  "primitive": "uilib-typography-component-heading-medium-strong",
2079
- "title": "Sub unit font for Large variant",
2080
- "description": "Sub unit font for Large variant",
2089
+ "title": "Sub unit font for large variant",
2090
+ "description": "Sub unit font for large variant",
2081
2091
  "displayType": "font",
2082
2092
  "longValue": true
2083
2093
  }
package/types/components.ts CHANGED
@@ -40,7 +40,8 @@ export interface ActiveTagProps {
40
40
 
41
41
  // ─── Alert ─────────────────────────────────────────────
42
42
  export interface AlertProps {
43
- variant?: 'info' | 'error' | 'warning' | 'success';
43
+ variant?: 'info' | 'error' | 'warning' | 'success' | 'neutral';
44
+ iconAsset?: string;
44
45
  list?: boolean;
45
46
  heading?: boolean;
46
47
  headingText?: string;
@@ -223,15 +224,7 @@ export interface ImageSrcItem {
223
224
  }
224
225
 
225
226
  export type ImageFocalPoint =
226
- | 'top-left'
227
- | 'top-center'
228
- | 'top-right'
229
- | 'center-left'
230
- | 'center'
231
- | 'center-right'
232
- | 'bottom-left'
233
- | 'bottom-center'
234
- | 'bottom-right';
227
+ 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
235
228
 
236
229
  export interface ImageProps {
237
230
  altText: string;
@@ -435,9 +428,12 @@ export interface PaginationProps {
435
428
  }
436
429
 
437
430
  // ─── Price ─────────────────────────────────────────────
431
+ export const Currencies = ['GBP', 'EUR', 'USD', 'SEK', 'NOK', 'DKK', 'CHF'] as const;
432
+ export type Currency = (typeof Currencies)[number];
433
+
438
434
  export interface PriceProps {
439
435
  size?: 'small' | 'medium' | 'large';
440
- currency?: 'GBP' | 'EUR' | 'USD' | 'SEK' | 'NOK' | 'DKK';
436
+ currency?: Currency;
441
437
  mainUnit?: string;
442
438
  subUnit?: string;
443
439
  suffix?: string;
@@ -450,6 +446,18 @@ export interface PriceProps {
450
446
  showDecimal?: boolean;
451
447
  }
452
448
 
449
+ // ─── Price Box ──────────────────────────────────────────
450
+ export interface PriceBoxProps {
451
+ tags?: boolean;
452
+ currency?: Currency;
453
+ fullWidthButton?: boolean;
454
+ additionalContent?: boolean;
455
+ additionalContentHtml?: string;
456
+ divider?: boolean;
457
+ footer?: boolean;
458
+ footerHtml?: string;
459
+ }
460
+
453
461
  // ─── Promo Tag ──────────────────────────────────────────
454
462
  export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
455
463
  export type PromoTagSize = (typeof PromoTagSizes)[number];