@tui/design-system 1.12.0 → 1.14.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 (37) hide show
  1. package/CHANGELOG.md +106 -0
  2. package/dist/themes/crystalski/index.css +4 -0
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +5 -1
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +5 -1
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +15 -15
  9. package/scss/lib/cards/article/_mixins.scss +76 -29
  10. package/scss/lib/cards/card/_mixins.scss +76 -0
  11. package/scss/lib/flyout-dropdown/_mixins.scss +2 -0
  12. package/scss/lib/grid/_column.scss +11 -0
  13. package/scss/lib/grid/_container.scss +11 -0
  14. package/scss/lib/grid/_mixins.scss +30 -0
  15. package/scss/lib/grid/_variables.scss +1 -0
  16. package/scss/lib/highlight-panel/_mixins.scss +4 -2
  17. package/scss/lib/icon-button/_mixins.scss +232 -55
  18. package/scss/lib/icon-button/_variables.scss +1 -0
  19. package/scss/lib/image/_mixins.scss +56 -28
  20. package/scss/lib/info-tag/_mixins.scss +7 -1
  21. package/scss/lib/info-tag/_variables.scss +2 -0
  22. package/scss/lib/list/_mixins.scss +12 -2
  23. package/scss/lib/list/_variables.scss +1 -1
  24. package/scss/lib/modal/_mixins.scss +9 -3
  25. package/scss/lib/patterns/card-with-list/_index.scss +4 -0
  26. package/scss/lib/patterns/card-with-list/_mixins.scss +86 -0
  27. package/scss/lib/patterns/holiday-summary/_index.scss +3 -0
  28. package/scss/lib/patterns/holiday-summary/_mixins.scss +94 -0
  29. package/scss/lib/patterns/review-card/_mixins.scss +3 -9
  30. package/scss/mixins.scss +2 -0
  31. package/scss/themes/firstchoice/_colors.scss +1 -1
  32. package/scss/themes/firstchoice/_primitives.scss +1 -0
  33. package/scss/themes/firstchoice/theme.json +1 -1
  34. package/scss/variables/_colors.scss +1 -0
  35. package/scss/variables/_primitives.scss +1 -0
  36. package/scss/variables/base-theme.json +21 -0
  37. package/types/components.ts +129 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,111 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.14.0
4
+
5
+ ### Added
6
+
7
+ #### [Card with list](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-cards-card-with-list--docs)
8
+
9
+ - New pattern for presenting categorised label and value information, with a basic card variant and a collapsible highlight panel variant. The list
10
+ reflows into two columns from a card width of 580px, driven by a container query so it responds to the width of the card rather than the viewport.
11
+
12
+ #### [Holiday summary](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-holiday-summary--docs)
13
+
14
+ - New pattern for summarising a booking — party, dates, board, room, extras and flights — alongside the price and primary call to action.
15
+
16
+ ### Updated
17
+
18
+ #### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
19
+
20
+ - Added grid content alignment modifiers. Container-level `.uilib-grid--align-[align]` / `.uilib-grid--justify-[align]` align all cells; column-level
21
+ `.uilib-grid__col--align-self-[align]` / `.uilib-grid__col--justify-self-[align]` (with responsive `[res]` variants) align individual cells.
22
+ Available values: `start`, `center`, `end`, `stretch`.
23
+
24
+ #### [Input slider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-slider--docs)
25
+
26
+ - Added a `uilib-slider-commit` event that fires once user interaction completes (pointer/mouse release or blur after keyboard adjustment). The
27
+ committed value is available on `event.detail.value`.
28
+ - Added a `valuetext-template` attribute for a custom `aria-valuetext`. Use `{value}` as the placeholder.
29
+
30
+ #### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
31
+
32
+ - Added density modifiers (`uilib-list--compact`, `uilib-list--spacious`) to change the vertical spacing between list items. Default spacing is
33
+ unchanged and still needs no class. The row spacing is now set through the `--uilib-list-row-gap` custom property, so components that lay list items
34
+ out without a flex gap can apply the same density.
35
+ - Updated the multiline title (`uilib-list__title`) font from the label style to `body-medium-strong`, matching the Figma update to the List
36
+ component's text styles.
37
+
38
+ ### Fixed
39
+
40
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
41
+
42
+ - Darkened the First Choice link colour from `color-pink-70` (`#d61d5f`) to a new `color-pink-75` (`#b8194d`) primitive so it passes colour contrast
43
+ requirements on background colours.
44
+
45
+ ## v1.13.0
46
+
47
+ ### Updated
48
+
49
+ #### [Article card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs) and [Basic card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-card--docs)
50
+
51
+ - Added icon button support for link cards, with or without a visible label, replacing the previous pseudo-element arrow indicator.
52
+ - Multi-link cards also support the icon button but require a visible label.
53
+ - With a label, the button sits at the bottom of the card beneath all content. Without a label, the content is pushed over.
54
+
55
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
56
+
57
+ - Added `flyoutClose` event, fired whenever the flyout is dismissed (close button, outside click, Escape key, or primary button).
58
+
59
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
60
+
61
+ - Added a new Platinum brand colour.
62
+
63
+ #### [Icon button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon-button--docs)
64
+
65
+ - Added option for visible label beside the icon button. It is recommended that this variant is used wherever possible as it improves accessibility by
66
+ clearly communicating the button's purpose.
67
+ - Corrected the disabled colour for the icon on the ghost variant.
68
+
69
+ #### [Image](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
70
+
71
+ - Added responsive focal point support. Set the `--uilib-image-focus-{breakpoint}` custom properties (`xs`, `sm`, `md`, `lg`) on `.uilib-image` to
72
+ change the focal point per breakpoint. Each breakpoint falls back to the next smallest, then to `center`. The existing `uilib-image--focus-*`
73
+ classes are unchanged and continue to set the focal point at all breakpoints.
74
+
75
+ #### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
76
+
77
+ - Added a new platinum variant.
78
+
79
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
80
+
81
+ - Added `version="2"` for compatibility with micro-frontends that use shadow DOM. If your modal is rendered inside a shadow root, switch to version 2
82
+ to ensure slotted content displays correctly. Version 1 remains the default and continues to work as before.
83
+
84
+ ### Fixed
85
+
86
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
87
+
88
+ - Fixed Shadow DOM compatibility: trigger lookup, outside-click detection, focus trapping, positioning, and content rendering now work correctly when
89
+ the flyout is inside a shadow root. No markup changes required.
90
+ - Fixed background page scroll handling: scroll is now locked only in modal (mobile) mode, where the native backdrop does not reliably block it, and
91
+ released on close. In non-modal (desktop) mode the page stays scrollable, matching expected anchored-dropdown behaviour.
92
+ - Fixed clicking on dialog padding/empty space incorrectly closing the flyout in non-modal mode.
93
+
94
+ #### [Highlight panel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-highlight-panel--docs)
95
+
96
+ - Fixed an unexpected line appearing on the header by adjusting the `__header:after` offset.
97
+
98
+ #### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
99
+
100
+ - Corrected the font size to small.
101
+
102
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
103
+
104
+ - Fixed background page scroll not being blocked while the modal is open when rendered inside a shadow root. Scroll is now locked from JavaScript on
105
+ open and released on close (including Escape and backdrop dismissal), instead of relying on a CSS selector that cannot cross the shadow boundary.
106
+ - Fixed `unmount()` not cleaning up the generated dialog, which caused duplicate modal UI when the element was reparented or remounted.
107
+ - Fixed internal element queries (close button, primary button, etc.) potentially matching consumer-provided elements inside custom footer slots.
108
+
3
109
  ## v1.12.0
4
110
 
5
111
  ### Updated
package/dist/themes/crystalski/index.css CHANGED
@@ -75,6 +75,7 @@
75
75
  --uilib-color-brand-tripadvisor-pine-green: #002b11;
76
76
  --uilib-color-brand-tripadvisor-inverse: #00eb5b;
77
77
  --uilib-color-brand-paypal: #253b80;
78
+ --uilib-color-brand-platinum: #4b5560;
78
79
  --uilib-color-other-scroll-handle: #a3a3a3;
79
80
  --uilib-color-brand-trip-advisor: #00b747;
80
81
  --uilib-color-canvas-footer: #252a32;
@@ -359,6 +360,7 @@
359
360
  --uilib-highlight-panel-header-bg-overlay-brand: none;
360
361
  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
361
362
  --uilib-icon-button-radius: var(--uilib-border-radius-pill);
363
+ --uilib-icon-button-text-color: var(--uilib-color-core-interaction);
362
364
  --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
363
365
  --uilib-icon-button-ghost-bg-color: transparent;
364
366
  --uilib-icon-button-ghost-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
@@ -397,6 +399,8 @@
397
399
  --uilib-info-tag-text-color: var(--uilib-color-text-body);
398
400
  --uilib-info-tag-info-bg-color: var(--uilib-color-status-info-surface);
399
401
  --uilib-info-tag-local-product-bg-color: var(--uilib-color-canvas-contrast);
402
+ --uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
403
+ --uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
400
404
  --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
401
405
  --uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
402
406
  --uilib-link-decoration-color: var(--uilib-color-text-link);
package/dist/themes/crystalski/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -37,7 +37,7 @@
37
37
  --uilib-color-core-neutral: #fff;
38
38
  --uilib-color-text-strong: #002f17;
39
39
  --uilib-color-text-body: #002f17;
40
- --uilib-color-text-link: #d61d5f;
40
+ --uilib-color-text-link: #b8194d;
41
41
  --uilib-color-text-link-visited: #6c69b7;
42
42
  --uilib-color-text-link-visited-inverse: #9996f1;
43
43
  --uilib-color-text-inverse: #fffefe;
@@ -76,6 +76,7 @@
76
76
  --uilib-color-brand-tripadvisor-pine-green: #002b11;
77
77
  --uilib-color-brand-tripadvisor-inverse: #00eb5b;
78
78
  --uilib-color-brand-paypal: #253b80;
79
+ --uilib-color-brand-platinum: #4b5560;
79
80
  --uilib-color-other-scroll-handle: #9faca7;
80
81
  --uilib-color-brand-trip-advisor: #00b747;
81
82
  --uilib-color-text-tooltip: #002f17;
@@ -365,6 +366,7 @@
365
366
  --uilib-highlight-panel-header-bg-overlay-brand: none;
366
367
  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
367
368
  --uilib-icon-button-radius: var(--uilib-border-radius-200);
369
+ --uilib-icon-button-text-color: var(--uilib-color-core-interaction);
368
370
  --uilib-icon-button-ghost-color: var(--uilib-color-text-strong);
369
371
  --uilib-icon-button-ghost-bg-color: transparent;
370
372
  --uilib-icon-button-ghost-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
@@ -403,6 +405,8 @@
403
405
  --uilib-info-tag-text-color: var(--uilib-color-text-strong);
404
406
  --uilib-info-tag-info-bg-color: var(--uilib-color-status-info-surface);
405
407
  --uilib-info-tag-local-product-bg-color: var(--uilib-color-canvas-contrast);
408
+ --uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
409
+ --uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
406
410
  --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
407
411
  --uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
408
412
  --uilib-link-decoration-color: var(--uilib-color-text-link);
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -75,6 +75,7 @@
75
75
  --uilib-color-brand-tripadvisor-pine-green: #002b11;
76
76
  --uilib-color-brand-tripadvisor-inverse: #00eb5b;
77
77
  --uilib-color-brand-paypal: #253b80;
78
+ --uilib-color-brand-platinum: #4b5560;
78
79
  --uilib-color-other-scroll-handle: #b9b9b9;
79
80
  --uilib-color-brand-trip-advisor: #00b747;
80
81
  --uilib-color-promotion-free-kids: #0caaf3;
@@ -382,6 +383,7 @@
382
383
  --uilib-highlight-panel-header-bg-overlay-brand: radial-gradient(circle farthest-corner at 99.91% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 80%);
383
384
  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
384
385
  --uilib-icon-button-radius: var(--uilib-border-radius-pill);
386
+ --uilib-icon-button-text-color: var(--uilib-color-core-interaction);
385
387
  --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
386
388
  --uilib-icon-button-ghost-bg-color: transparent;
387
389
  --uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
@@ -420,6 +422,8 @@
420
422
  --uilib-info-tag-text-color: var(--uilib-color-text-strong);
421
423
  --uilib-info-tag-info-bg-color: var(--uilib-color-status-info-surface);
422
424
  --uilib-info-tag-local-product-bg-color: var(--uilib-color-brand-local);
425
+ --uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
426
+ --uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
423
427
  --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
424
428
  --uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
425
429
  --uilib-link-decoration-color: var(--uilib-color-text-link);
@@ -434,7 +438,7 @@
434
438
  --uilib-list-bullet-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/list-item.svg");
435
439
  --uilib-list-image-radius: var(--uilib-border-radius-100);
436
440
  --uilib-list-image-alt-radius: var(--uilib-border-radius-circle);
437
- --uilib-list-multiline-title-font: var(--uilib-typography-label-medium);
441
+ --uilib-list-multiline-title-font: var(--uilib-typography-body-medium-strong);
438
442
  --uilib-list-highlight-color: var(--uilib-color-text-promotion);
439
443
  --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/tui/loader.svg");
440
444
  --uilib-loader-small: 3.75rem;
package/dist/themes/tui/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.12.0",
3
+ "version": "1.14.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -35,8 +35,8 @@
35
35
  "lint:styles": "npm run lint:styles:ci && npm run lint:styles:fix",
36
36
  "lint:styles:fix": "stylelint \"src/**/*.{scss,css}\" --fix --config .stylelintrc.fix.json",
37
37
  "lint:styles:ci": "stylelint \"src/**/*.{scss,css}\"",
38
- "lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --cache --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
39
- "lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
38
+ "lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" \"figma/**/*.figma.ts\" --cache --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
39
+ "lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" \"figma/**/*.figma.ts\" --config eslint.config.mjs --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
40
40
  "lint:storybook": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
41
41
  "lint:storybook:ci": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
42
42
  "lint": "npm run lint:standard && npm run lint:storybook",
@@ -53,7 +53,8 @@
53
53
  "ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.sh",
54
54
  "ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh",
55
55
  "scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
56
- "test:sass": "node --experimental-vm-modules node_modules/.bin/jest --verbose ./test/sass-true"
56
+ "test:sass": "node --experimental-vm-modules node_modules/.bin/jest --verbose ./test/sass-true",
57
+ "test:mcp": "node --experimental-vm-modules node_modules/.bin/jest --config jest.config.mcp.mjs"
57
58
  },
58
59
  "files": [
59
60
  "dist",
@@ -77,15 +78,15 @@
77
78
  "@commitlint/config-conventional": "^21.0.2",
78
79
  "@eslint/compat": "^2.0.0",
79
80
  "@eslint/js": "^9.38.0",
80
- "@figma/code-connect": "^1.4.5",
81
+ "@figma/code-connect": "^2.0.0",
81
82
  "@jest/globals": "^30.2.0",
82
- "@storybook/addon-a11y": "~10.4.5",
83
- "@storybook/addon-docs": "~10.4.5",
84
- "@storybook/addon-links": "~10.4.5",
85
- "@storybook/addon-themes": "~10.4.5",
86
- "@storybook/html-vite": "~10.4.5",
83
+ "@storybook/addon-a11y": "^10.4.5",
84
+ "@storybook/addon-docs": "^10.4.5",
85
+ "@storybook/addon-links": "^10.4.5",
86
+ "@storybook/addon-themes": "^10.4.5",
87
+ "@storybook/html-vite": "^10.4.5",
87
88
  "@stylistic/eslint-plugin": "^3.1.0",
88
- "@tui/cally": "1.1.0",
89
+ "@tui/cally": "^1.1.2",
89
90
  "@types/js-beautify": "^1.14.3",
90
91
  "@types/node": "^24.0.0",
91
92
  "@typescript-eslint/eslint-plugin": "^8.46.2",
@@ -108,8 +109,7 @@
108
109
  "eslint-plugin-prettier": "^5.5.4",
109
110
  "eslint-plugin-react": "^7.37.5",
110
111
  "eslint-plugin-react-hooks": "^7.0.1",
111
- "eslint-plugin-storybook": "~10.4.5",
112
- "git-format-staged": "4.0.1",
112
+ "eslint-plugin-storybook": "^10.4.5",
113
113
  "glob": "^13.0.0",
114
114
  "globals": "^17.3.0",
115
115
  "husky": "^9.1.7",
@@ -128,8 +128,8 @@
128
128
  "sass-true": "^10.0.0",
129
129
  "shx": "0.4.0",
130
130
  "source-map-support": "^0.5.21",
131
- "storybook": "~10.4.5",
132
- "storybook-addon-pseudo-states": "~10.4.5",
131
+ "storybook": "^10.4.5",
132
+ "storybook-addon-pseudo-states": "^10.4.5",
133
133
  "storybook-addon-tag-badges": "^3.1.0",
134
134
  "storybook-dark-mode": "^5.0.0",
135
135
  "stylelint": "^17.2.0",
package/scss/lib/cards/article/_mixins.scss CHANGED
@@ -27,7 +27,6 @@ $uilib-card-article-included: false !default;
27
27
 
28
28
  display: flex;
29
29
  flex-flow: row wrap;
30
- place-content: flex-start;
31
30
  align-items: stretch;
32
31
 
33
32
  margin: var(--uilib-spacing-500) 0;
@@ -58,6 +57,7 @@ $uilib-card-article-included: false !default;
58
57
 
59
58
  color: inherit;
60
59
  font: inherit;
60
+ text-align: left;
61
61
 
62
62
  border: 0;
63
63
 
@@ -70,9 +70,13 @@ $uilib-card-article-included: false !default;
70
70
  }
71
71
 
72
72
  .uilib-card__content-container {
73
+ display: flex;
73
74
  flex: 1 1 auto;
75
+ flex-direction: column;
76
+ align-self: stretch;
74
77
 
75
78
  width: 100%;
79
+ min-height: calc(100% - (100cqi / tan(atan2(var(--uilib-image-wide), 1))));
76
80
  }
77
81
 
78
82
  &.uilib-card--link {
@@ -80,50 +84,92 @@ $uilib-card-article-included: false !default;
80
84
  text-decoration: none;
81
85
  }
82
86
 
83
- .uilib-card__content-container {
84
- padding-right: calc(var(--uilib-spacing-800) + 2.75rem); // content padding + icon size
87
+ &:not(:has(.uilib-card__icon-button)) {
88
+ .uilib-card__content-container {
89
+ padding-right: calc(var(--uilib-spacing-800) + var(--uilib-icon-button-size-medium)); // content padding + icon size
90
+
91
+ &::before,
92
+ &::after {
93
+ position: absolute;
94
+ bottom: var(--uilib-spacing-400);
95
+ right: var(--uilib-spacing-400);
96
+ content: '';
97
+
98
+ display: block;
99
+
100
+ width: var(--uilib-icon-button-size-medium);
101
+ padding: 0;
102
+ aspect-ratio: 1/1;
103
+
104
+ border-radius: var(--uilib-icon-button-radius);
85
105
 
86
- &::before,
87
- &::after {
88
- position: absolute;
89
- bottom: var(--uilib-spacing-400);
90
- right: var(--uilib-spacing-400);
91
- content: '';
106
+ background: var(--uilib-icon-button-primary-bg-color);
92
107
 
93
- display: block;
108
+ @media (prefers-reduced-motion: no-preference) {
109
+ transition: background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
110
+ }
111
+ }
112
+
113
+ &::after {
114
+ $offset: calc((var(--uilib-icon-size-medium) - var(--uilib-icon-button-size-medium)) / 2);
115
+ width: var(--uilib-icon-size-medium);
94
116
 
95
- width: 2.75rem; /* 44px */
96
- padding: 0;
97
- aspect-ratio: 1/1;
117
+ border-radius: 0;
98
118
 
99
- border-radius: var(--uilib-icon-button-radius);
119
+ background: var(--uilib-icon-button-primary-color);
100
120
 
101
- background: var(--uilib-icon-button-primary-bg-color);
121
+ transform: translate($offset, $offset);
102
122
 
103
- @media (prefers-reduced-motion: no-preference) {
104
- transition: background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
123
+ -webkit-mask: var(--uilib-card-article-link-icon) no-repeat center;
124
+ mask: var(--uilib-card-article-link-icon) no-repeat center;
125
+ -webkit-mask-size: cover;
126
+ mask-size: cover;
105
127
  }
106
128
  }
129
+ }
107
130
 
108
- &::after {
109
- $offset: calc((var(--uilib-icon-size-medium) - 2.75rem) / 2);
110
- width: var(--uilib-icon-size-medium);
131
+ &:has(a:hover, button:hover) {
132
+ .uilib-card__content-container::before {
133
+ background-color: var(--uilib-icon-button-primary-hover-bg-color);
134
+ }
135
+ }
136
+ }
111
137
 
112
- border-radius: 0;
138
+ &:has(.uilib-card__icon-button) {
139
+ &:not(:has(.uilib-card__icon-button .uilib-icon-button__content)) {
140
+ .uilib-card__content-container {
141
+ padding-right: calc(var(--uilib-spacing-800) + var(--uilib-icon-button-size-medium)); // content padding + icon size
113
142
 
114
- background: var(--uilib-icon-button-primary-color);
143
+ &::before,
144
+ &::after {
145
+ display: none;
146
+ }
147
+ }
148
+ }
115
149
 
116
- transform: translate($offset, $offset);
150
+ &:has(.uilib-card__icon-button .uilib-icon-button__content) {
151
+ .uilib-card__content-container {
152
+ &::before,
153
+ &::after {
154
+ display: none;
155
+ }
156
+ }
117
157
 
118
- -webkit-mask: var(--uilib-card-article-link-icon) no-repeat center;
119
- mask: var(--uilib-card-article-link-icon) no-repeat center;
120
- -webkit-mask-size: cover;
121
- mask-size: cover;
158
+ .uilib-card__icon-button {
159
+ margin: auto 0 0;
160
+ padding-top: var(--uilib-spacing-200);
122
161
  }
123
162
  }
163
+ }
124
164
 
125
- &:has(a:hover, button:hover) .uilib-card__content-container::before {
126
- background-color: var(--uilib-icon-button-primary-hover-bg-color);
165
+ &:not(&--link):has(.uilib-card__icon-button .uilib-icon-button__content) {
166
+ .uilib-card__icon-button {
167
+ position: relative;
168
+ inset: unset;
169
+
170
+ &::before {
171
+ top: calc(var(--uilib-spacing-200) - var(--uilib-focus-gap));
172
+ }
127
173
  }
128
174
  }
129
175
 
@@ -141,6 +187,7 @@ $uilib-card-article-included: false !default;
141
187
 
142
188
  .uilib-card__content-container {
143
189
  width: calc(50% + var(--uilib-spacing-200));
190
+ min-height: unset;
144
191
  }
145
192
  }
146
193
  }
package/scss/lib/cards/card/_mixins.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  // Card / _mixins
2
2
  @use 'variables' as *;
3
3
  @use '../../utility/mixins' as *;
4
+ @use '../../icon-button/mixins' as *;
4
5
 
5
6
  $uilib-card-included: false !default;
6
7
 
@@ -9,6 +10,7 @@ $uilib-card-included: false !default;
9
10
  @if not $uilib-card-included {
10
11
  $uilib-card-included: true !global;
11
12
 
13
+ @include uilib-icon-button;
12
14
  @include uilib-card-master;
13
15
  }
14
16
  }
@@ -66,11 +68,85 @@ $uilib-card-included: false !default;
66
68
  }
67
69
  }
68
70
 
71
+ &--link:has(a:hover, button:hover) {
72
+ .uilib-card__icon-button::after {
73
+ background: var(--uilib-icon-button-primary-hover-bg-color);
74
+ }
75
+ }
76
+
77
+ &--link:has(a:active, button:active) {
78
+ .uilib-card__icon-button {
79
+ &::after {
80
+ transform: scale(0.96);
81
+ }
82
+
83
+ .uilib-icon-button__icon {
84
+ transform: translate(var(--uilib-icon-button-medium-offset), 0) scale(0.96);
85
+ }
86
+ }
87
+ }
88
+
69
89
  &__content-container,
70
90
  &__supplementary-container {
71
91
  padding: var(--uilib-spacing-400);
72
92
  }
73
93
 
94
+ &__icon-button,
95
+ &--link &__icon-button {
96
+ align-self: flex-end;
97
+
98
+ width: fit-content;
99
+ max-width: 100%;
100
+
101
+ &::after {
102
+ position: static;
103
+ inset: unset;
104
+ }
105
+
106
+ &:is(a, button)::before {
107
+ position: absolute;
108
+ inset: 0;
109
+ content: '';
110
+ }
111
+ }
112
+
113
+ &:not(&--link) &__icon-button {
114
+ position: relative;
115
+ }
116
+
117
+ &:has(.uilib-card__icon-button) {
118
+ .uilib-card__content-container,
119
+ .uilib-card__supplementary-container {
120
+ padding-right: calc(var(--uilib-spacing-800) + var(--uilib-icon-button-size-medium)); // content padding + icon size
121
+ }
122
+
123
+ .uilib-card__icon-button {
124
+ position: absolute;
125
+ bottom: var(--uilib-spacing-400);
126
+ right: var(--uilib-spacing-400);
127
+ }
128
+ }
129
+
130
+ &:has(.uilib-card__icon-button .uilib-icon-button__content) {
131
+ .uilib-card__content-container,
132
+ .uilib-card__supplementary-container {
133
+ padding-right: var(--uilib-spacing-400);
134
+ }
135
+
136
+ .uilib-card__icon-button {
137
+ position: static;
138
+
139
+ margin: calc(var(--uilib-spacing-200) * -1) var(--uilib-spacing-400) var(--uilib-spacing-400);
140
+ }
141
+ }
142
+
143
+ &:not(&--link):has(.uilib-card__icon-button .uilib-icon-button__content) {
144
+ .uilib-card__icon-button {
145
+ position: relative;
146
+ inset: unset;
147
+ }
148
+ }
149
+
74
150
  &__content-container {
75
151
  flex-grow: 1;
76
152
  }
package/scss/lib/flyout-dropdown/_mixins.scss CHANGED
@@ -116,6 +116,8 @@ $uilib-flyout-dropdown-included: false !default;
116
116
  mask-image: var(--uilib-flyout-dropdown-close-icon);
117
117
  }
118
118
 
119
+ // Small-screen scroll lock fallback for the JS lock.
120
+ // TODO(next-major): remove once JS handles this alone.
119
121
  body:has(&[open]) {
120
122
  overflow: hidden;
121
123
 
package/scss/lib/grid/_column.scss CHANGED
@@ -32,6 +32,17 @@
32
32
  }
33
33
  }
34
34
 
35
+ // Alignment (per cell)
36
+ @each $value in $uilib-grid-align-values {
37
+ #{$uilib-grid-selector-column}--align-self#{$prefix}-#{$value} {
38
+ @include uilib-grid-col-align-self($value);
39
+ }
40
+
41
+ #{$uilib-grid-selector-column}--justify-self#{$prefix}-#{$value} {
42
+ @include uilib-grid-col-justify-self($value);
43
+ }
44
+ }
45
+
35
46
  #{$uilib-grid-selector-column}--offset#{$prefix}-reset {
36
47
  @include uilib-grid-col-offset-reset;
37
48
  }
package/scss/lib/grid/_container.scss CHANGED
@@ -19,3 +19,14 @@ $axes: '', 'x', 'y';
19
19
  }
20
20
  }
21
21
  }
22
+
23
+ // Container-level alignment: applies to every cell in the grid.
24
+ @each $value in $uilib-grid-align-values {
25
+ #{$uilib-grid-selector}--align-#{$value} {
26
+ @include uilib-grid-align-items($value);
27
+ }
28
+
29
+ #{$uilib-grid-selector}--justify-#{$value} {
30
+ @include uilib-grid-justify-items($value);
31
+ }
32
+ }