@tui/design-system 1.16.1 → 1.17.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 (21) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/themes/crystalski/index.css +2 -0
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +2 -0
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +2 -0
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +1 -1
  9. package/scss/lib/cards/transparent/_index.scss +3 -0
  10. package/scss/lib/cards/transparent/_mixins.scss +36 -0
  11. package/scss/lib/cards/transparent/_variables.scss +4 -0
  12. package/scss/lib/forms/form-row/_mixins.scss +43 -13
  13. package/scss/lib/forms/form-row/_variables.scss +1 -0
  14. package/scss/lib/forms/input-checkbox/_mixins.scss +6 -0
  15. package/scss/mixins.scss +1 -0
  16. package/scss/themes/crystalski/index.scss +3 -0
  17. package/scss/themes/firstchoice/index.scss +3 -0
  18. package/scss/themes/tui/index.scss +3 -0
  19. package/scss/variables/base-theme.json +17 -0
  20. package/scss/variables.scss +1 -0
  21. package/types/components.ts +30 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.17.0
4
+
5
+ ### Added
6
+
7
+ #### [Form group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-group--docs)
8
+
9
+ - Added the Form Group: a grouped-mode Form Row (`<fieldset>` with a `<legend>`) that semantically groups multiple related inputs sharing a single
10
+ question or label, with optional group-level hint and error text linked via `aria-describedby`.
11
+ - Added the `uilib-form-row__group-heading` legend class and the `uilib-form-row__group--horizontal` / `uilib-form-row__group--vertical` orientation
12
+ modifiers (the default layout stays responsive).
13
+
14
+ #### [Transparent card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-transparent-card--docs)
15
+
16
+ - Added the Transparent card as a modifier on the Basic Card (`uilib-card uilib-card--transparent`): no background fill and no elevation, so the
17
+ underlying surface shows through. The card itself is always a container, never an anchor or button. To make the whole card clickable, wrap a single
18
+ contained link/button and apply `uilib-card--link` (the stretched-link pattern), which adds a hover fill and a focus ring on the card itself.
19
+
20
+ ### Updated
21
+
22
+ #### [Form row](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-row--docs)
23
+
24
+ - Added grouped-input support used by the Form Group: an optional label class (`uilib-form-row__group-heading` for the larger legend) and the
25
+ `uilib-form-row__group` layout wrapper with `--horizontal` / `--vertical` orientation modifiers.
26
+
27
+ #### [Input checkbox](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-checkbox--docs)
28
+
29
+ - Added a horizontal orientation option (`uilib-input-checkbox-list--horizontal`) to lay checkbox group items out side by side.
30
+
3
31
  ## v1.16.1
4
32
 
5
33
  ### Fixed
package/dist/themes/crystalski/index.css CHANGED
@@ -267,6 +267,7 @@
267
267
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-filled.svg");
268
268
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-solid.svg");
269
269
  --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
270
+ --uilib-card-transparent-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
270
271
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
271
272
  --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
272
273
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
@@ -276,6 +277,7 @@
276
277
  --uilib-datepicker-color-date-bg-hover: var(--uilib-icon-button-ghost-hover-bg-color);
277
278
  --uilib-datepicker-radius-date: var(--uilib-icon-button-radius);
278
279
  --uilib-form-row-label-font: var(--uilib-typography-label-medium-strong);
280
+ --uilib-form-row-group-heading-font: var(--uilib-typography-component-heading-large);
279
281
  --uilib-form-row-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/exclamation-mark-circled-filled.svg");
280
282
  --uilib-input-checkbox-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark.svg");
281
283
  --uilib-input-checkbox-indeterminate-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/minus.svg");
package/dist/themes/crystalski/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -273,6 +273,7 @@
273
273
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-filled.svg");
274
274
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-solid.svg");
275
275
  --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
276
+ --uilib-card-transparent-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
276
277
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
277
278
  --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
278
279
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
@@ -282,6 +283,7 @@
282
283
  --uilib-datepicker-color-date-bg-hover: var(--uilib-icon-button-ghost-hover-bg-color);
283
284
  --uilib-datepicker-radius-date: var(--uilib-icon-button-radius);
284
285
  --uilib-form-row-label-font: var(--uilib-typography-label-medium-strong);
286
+ --uilib-form-row-group-heading-font: var(--uilib-typography-component-heading-large);
285
287
  --uilib-form-row-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/exclamation-mark-circled-filled.svg");
286
288
  --uilib-input-checkbox-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark.svg");
287
289
  --uilib-input-checkbox-indeterminate-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/minus.svg");
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -290,6 +290,7 @@
290
290
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-filled.svg");
291
291
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-solid.svg");
292
292
  --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
293
+ --uilib-card-transparent-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
293
294
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
294
295
  --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
295
296
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
@@ -299,6 +300,7 @@
299
300
  --uilib-datepicker-color-date-bg-hover: var(--uilib-icon-button-ghost-hover-bg-color);
300
301
  --uilib-datepicker-radius-date: var(--uilib-icon-button-radius);
301
302
  --uilib-form-row-label-font: var(--uilib-typography-label-medium);
303
+ --uilib-form-row-group-heading-font: var(--uilib-typography-component-heading-large);
302
304
  --uilib-form-row-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/exclamation-mark-circled-filled.svg");
303
305
  --uilib-input-checkbox-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark.svg");
304
306
  --uilib-input-checkbox-indeterminate-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/minus.svg");
package/dist/themes/tui/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.16.1",
3
+ "version": "1.17.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
package/scss/lib/cards/transparent/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Transparent card / index
2
+ @use 'mixins' as *;
3
+ @include uilib-card-transparent;
package/scss/lib/cards/transparent/_mixins.scss ADDED
@@ -0,0 +1,36 @@
1
+ // Transparent card / _mixins
2
+ @use 'variables' as *;
3
+ @use '../../utility/mixins' as *;
4
+ @use '../card/mixins' as *;
5
+
6
+ $uilib-card-transparent-included: false !default;
7
+
8
+ @mixin uilib-card-transparent() {
9
+ @if not $uilib-card-transparent-included {
10
+ $uilib-card-transparent-included: true !global;
11
+
12
+ @include uilib-card;
13
+ @include uilib-card-transparent-master;
14
+ }
15
+ }
16
+
17
+ @mixin uilib-card-transparent-master() {
18
+ .uilib-card--transparent {
19
+ margin: 0;
20
+
21
+ background: transparent;
22
+
23
+ box-shadow: none;
24
+
25
+ @media (prefers-reduced-motion: no-preference) {
26
+ transition: background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
27
+ }
28
+
29
+ /* stylelint-disable-next-line order/order */
30
+ &.uilib-card--link:hover {
31
+ background-color: var(--uilib-card-transparent-hover-bg-color);
32
+
33
+ box-shadow: none;
34
+ }
35
+ }
36
+ }
package/scss/lib/cards/transparent/_variables.scss ADDED
@@ -0,0 +1,4 @@
1
+ // Transparent card specific variables to allow theming
2
+ $uilib-card-transparent-variables: (
3
+ hover-bg-color: var(--uilib-color-other-secondary-button-hover-state),
4
+ ) !default;
package/scss/lib/forms/form-row/_mixins.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // form row / _mixins
2
2
  @use '../../utility/mixins' as *;
3
+ @use '../../grid/mixins' as *;
3
4
 
4
5
  $uilib-form-row-included: false !default;
5
6
 
@@ -22,6 +23,38 @@ $uilib-form-row-included: false !default;
22
23
  margin: var(--uilib-spacing-100) 0;
23
24
  }
24
25
 
26
+ &__group {
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: var(--uilib-spacing-200);
30
+
31
+ @include uilib-breakpoint(xs) {
32
+ flex-flow: row wrap;
33
+ }
34
+ }
35
+
36
+ &__group--horizontal {
37
+ flex-flow: row wrap;
38
+ }
39
+
40
+ &__group--vertical {
41
+ flex-flow: column;
42
+ }
43
+
44
+ &__group-item {
45
+ display: flex;
46
+ flex: 1 1 0;
47
+ flex-direction: column;
48
+ gap: var(--uilib-spacing-100);
49
+
50
+ min-width: 0;
51
+ }
52
+
53
+ &__group-label {
54
+ color: var(--uilib-color-text-strong);
55
+ font: var(--uilib-typography-label-medium);
56
+ }
57
+
25
58
  &__label {
26
59
  padding: 0;
27
60
 
@@ -29,6 +62,10 @@ $uilib-form-row-included: false !default;
29
62
  font: var(--uilib-form-row-label-font);
30
63
  }
31
64
 
65
+ &__group-heading {
66
+ font: var(--uilib-form-row-group-heading-font);
67
+ }
68
+
32
69
  &__hint {
33
70
  color: var(--uilib-color-text-body);
34
71
  font: var(--uilib-typography-body-medium);
@@ -52,7 +89,9 @@ $uilib-form-row-included: false !default;
52
89
 
53
90
  &::before {
54
91
  position: absolute;
55
- top: calc(calc(calc(var(--uilib-line-height-body) * var(--uilib-icon-size-xsmall)) - var(--uilib-icon-size-xsmall)) / 2);
92
+
93
+ // Vertically centre the icon against the first line of error text.
94
+ top: calc((var(--uilib-line-height-body) * var(--uilib-icon-size-xsmall) - var(--uilib-icon-size-xsmall)) / 2);
56
95
  left: 0;
57
96
  content: '';
58
97
 
@@ -61,18 +100,9 @@ $uilib-form-row-included: false !default;
61
100
  width: var(--uilib-icon-size-xsmall);
62
101
  aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
63
102
 
64
- background: currentcolor;
65
- background-repeat: no-repeat;
66
- background-position: center center;
67
- background-size: cover;
68
- -webkit-mask-repeat: no-repeat;
69
- mask-repeat: no-repeat;
70
- -webkit-mask-position: center;
71
- mask-position: center;
72
- -webkit-mask-size: cover;
73
- mask-size: cover;
74
- -webkit-mask-image: var(--uilib-form-row-icon);
75
- mask-image: var(--uilib-form-row-icon);
103
+ background-color: currentcolor;
104
+ -webkit-mask: var(--uilib-form-row-icon) center / cover no-repeat;
105
+ mask: var(--uilib-form-row-icon) center / cover no-repeat;
76
106
  }
77
107
  }
78
108
 
package/scss/lib/forms/form-row/_variables.scss CHANGED
@@ -3,5 +3,6 @@
3
3
  // Form row specific variables to allow theming
4
4
  $uilib-form-row-variables: (
5
5
  label-font: var(--uilib-typography-label-medium),
6
+ group-heading-font: var(--uilib-typography-component-heading-large),
6
7
  icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/exclamation-mark-circled-filled.svg'),
7
8
  ) !default;
package/scss/lib/forms/input-checkbox/_mixins.scss CHANGED
@@ -231,4 +231,10 @@ $uilib-input-checkbox-included: false !default;
231
231
  .uilib-input-checkbox-list__item .uilib-input-checkbox-list {
232
232
  padding-left: var(--uilib-spacing-600);
233
233
  }
234
+
235
+ .uilib-input-checkbox-list--horizontal {
236
+ display: flex;
237
+ flex-wrap: wrap;
238
+ gap: var(--uilib-spacing-400);
239
+ }
234
240
  }
package/scss/mixins.scss CHANGED
@@ -13,6 +13,7 @@
13
13
  @forward 'lib/cards/product/mixins';
14
14
  @forward 'lib/cards/promotion/mixins';
15
15
  @forward 'lib/cards/selectable/mixins';
16
+ @forward 'lib/cards/transparent/mixins';
16
17
  @forward 'lib/divider/mixins';
17
18
  @forward 'lib/flight-details/mixins';
18
19
  @forward 'lib/flyout-dropdown/mixins';
package/scss/themes/crystalski/index.scss CHANGED
@@ -95,6 +95,9 @@
95
95
  // Card - selectable
96
96
  @include util.uilib-build-css-vars('card-selectable', $uilib-crystalski-card-selectable-variables);
97
97
 
98
+ // Card - transparent
99
+ @include util.uilib-build-css-vars('card-transparent', $uilib-card-transparent-variables);
100
+
98
101
  // Flight details
99
102
  @include util.uilib-build-css-vars('flight-details', $uilib-crystalski-flight-details-variables);
100
103
 
package/scss/themes/firstchoice/index.scss CHANGED
@@ -95,6 +95,9 @@
95
95
  // Card - selectable
96
96
  @include util.uilib-build-css-vars('card-selectable', $uilib-firstchoice-card-selectable-variables);
97
97
 
98
+ // Card - transparent
99
+ @include util.uilib-build-css-vars('card-transparent', $uilib-card-transparent-variables);
100
+
98
101
  // Flight details
99
102
  @include util.uilib-build-css-vars('flight-details', $uilib-firstchoice-flight-details-variables);
100
103
 
package/scss/themes/tui/index.scss CHANGED
@@ -95,6 +95,9 @@
95
95
  // Card - selectable
96
96
  @include util.uilib-build-css-vars('card-selectable', $uilib-card-selectable-variables);
97
97
 
98
+ // Card - transparent
99
+ @include util.uilib-build-css-vars('card-transparent', $uilib-card-transparent-variables);
100
+
98
101
  // Flight details
99
102
  @include util.uilib-build-css-vars('flight-details', $uilib-flight-details-variables);
100
103
 
package/scss/variables/base-theme.json CHANGED
@@ -1096,6 +1096,16 @@
1096
1096
  }
1097
1097
  }
1098
1098
  },
1099
+ "card-transparent": {
1100
+ "tokens": {
1101
+ "card-transparent-hover-bg-color": {
1102
+ "primitive": "uilib-color-other-secondary-button-hover-state",
1103
+ "displayType": "color",
1104
+ "title": "Transparent card hover background colour",
1105
+ "description": "Fill shown on hover (matches the icon button hover colour)"
1106
+ }
1107
+ }
1108
+ },
1099
1109
  "card-search": {
1100
1110
  "tokens": {
1101
1111
  "card-search-radius-spacing": {
@@ -1271,6 +1281,13 @@
1271
1281
  "description": "Font style used for form row labels",
1272
1282
  "longValue": true
1273
1283
  },
1284
+ "form-row-group-heading-font": {
1285
+ "primitive": "uilib-typography-component-heading-large",
1286
+ "displayType": "font",
1287
+ "title": "Form row group heading font",
1288
+ "description": "Font style used for the legend when the row groups related inputs",
1289
+ "longValue": true
1290
+ },
1274
1291
  "form-row-icon": {
1275
1292
  "displayType": "icon",
1276
1293
  "title": "Form row error icon",
package/scss/variables.scss CHANGED
@@ -31,6 +31,7 @@
31
31
  @forward 'lib/cards/product/variables';
32
32
  @forward 'lib/cards/promotion/variables';
33
33
  @forward 'lib/cards/selectable/variables';
34
+ @forward 'lib/cards/transparent/variables';
34
35
  @forward 'lib/divider/variables';
35
36
  @forward 'lib/flight-details/variables';
36
37
  @forward 'lib/flyout-dropdown/variables';
package/types/components.ts CHANGED
@@ -105,6 +105,17 @@ export interface CardProps {
105
105
  theme?: Theme;
106
106
  }
107
107
 
108
+ // ─── Card Transparent ──────────────────────────────────
109
+ export interface CardTransparentProps {
110
+ extraClasses?: string[];
111
+ extraAttributes?: string[];
112
+ link?: 'none' | 'inside' | 'card';
113
+ linkHref?: string;
114
+ linkText?: string;
115
+ cardContent?: string;
116
+ theme?: Theme;
117
+ }
118
+
108
119
  // ─── Card Article ──────────────────────────────────────
109
120
  export interface CardArticleProps {
110
121
  type?: 'static' | 'link' | 'multi-link';
@@ -286,6 +297,24 @@ export interface DatepickerProps {
286
297
  allowedDates?: string;
287
298
  }
288
299
 
300
+ // ─── Form Group ──────────────────────────────────────────
301
+ export interface FormGroupItem {
302
+ labelText?: string;
303
+ input?: string;
304
+ inputId?: string;
305
+ }
306
+
307
+ export interface FormGroupProps {
308
+ legendText?: string;
309
+ hint?: boolean;
310
+ hintText?: string;
311
+ error?: boolean;
312
+ errorText?: string;
313
+ orientation?: 'responsive' | 'horizontal' | 'vertical';
314
+ items?: FormGroupItem[];
315
+ theme?: Theme;
316
+ }
317
+
289
318
  // ─── Form Row ────────────────────────────────────────────
290
319
  export interface FormRowProps {
291
320
  labelText?: string;
@@ -303,6 +332,7 @@ export interface InputCheckboxProps {
303
332
  isIndividual?: boolean;
304
333
  variant?: 'default' | 'strong' | 'title';
305
334
  state?: 'unchecked' | 'checked' | 'indeterminate';
335
+ orientation?: 'vertical' | 'horizontal';
306
336
  disabled?: boolean;
307
337
  }
308
338