@tui/design-system 1.12.0 → 1.13.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 (22) hide show
  1. package/CHANGELOG.md +64 -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 +4 -0
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +4 -0
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +11 -12
  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/highlight-panel/_mixins.scss +4 -2
  13. package/scss/lib/icon-button/_mixins.scss +232 -55
  14. package/scss/lib/icon-button/_variables.scss +1 -0
  15. package/scss/lib/image/_mixins.scss +56 -28
  16. package/scss/lib/info-tag/_mixins.scss +7 -1
  17. package/scss/lib/info-tag/_variables.scss +2 -0
  18. package/scss/lib/modal/_mixins.scss +9 -3
  19. package/scss/variables/_colors.scss +1 -0
  20. package/scss/variables/_primitives.scss +1 -0
  21. package/scss/variables/base-theme.json +21 -0
  22. package/types/components.ts +53 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,69 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.13.0
4
+
5
+ ### Updated
6
+
7
+ #### [Article card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs) and [Basic card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-card--docs)
8
+
9
+ - Added icon button support for link cards, with or without a visible label, replacing the previous pseudo-element arrow indicator.
10
+ - Multi-link cards also support the icon button but require a visible label.
11
+ - With a label, the button sits at the bottom of the card beneath all content. Without a label, the content is pushed over.
12
+
13
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
14
+
15
+ - Added `flyoutClose` event, fired whenever the flyout is dismissed (close button, outside click, Escape key, or primary button).
16
+
17
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
18
+
19
+ - Added a new Platinum brand colour.
20
+
21
+ #### [Icon button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon-button--docs)
22
+
23
+ - Added option for visible label beside the icon button. It is recommended that this variant is used wherever possible as it improves accessibility by
24
+ clearly communicating the button's purpose.
25
+ - Corrected the disabled colour for the icon on the ghost variant.
26
+
27
+ #### [Image](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
28
+
29
+ - Added responsive focal point support. Set the `--uilib-image-focus-{breakpoint}` custom properties (`xs`, `sm`, `md`, `lg`) on `.uilib-image` to
30
+ change the focal point per breakpoint. Each breakpoint falls back to the next smallest, then to `center`. The existing `uilib-image--focus-*`
31
+ classes are unchanged and continue to set the focal point at all breakpoints.
32
+
33
+ #### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
34
+
35
+ - Added a new platinum variant.
36
+
37
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
38
+
39
+ - 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
40
+ to ensure slotted content displays correctly. Version 1 remains the default and continues to work as before.
41
+
42
+ ### Fixed
43
+
44
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
45
+
46
+ - Fixed Shadow DOM compatibility: trigger lookup, outside-click detection, focus trapping, positioning, and content rendering now work correctly when
47
+ the flyout is inside a shadow root. No markup changes required.
48
+ - Fixed background page scroll handling: scroll is now locked only in modal (mobile) mode, where the native backdrop does not reliably block it, and
49
+ released on close. In non-modal (desktop) mode the page stays scrollable, matching expected anchored-dropdown behaviour.
50
+ - Fixed clicking on dialog padding/empty space incorrectly closing the flyout in non-modal mode.
51
+
52
+ #### [Highlight panel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-highlight-panel--docs)
53
+
54
+ - Fixed an unexpected line appearing on the header by adjusting the `__header:after` offset.
55
+
56
+ #### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
57
+
58
+ - Corrected the font size to small.
59
+
60
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
61
+
62
+ - 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
63
+ open and released on close (including Escape and backdrop dismissal), instead of relying on a CSS selector that cannot cross the shadow boundary.
64
+ - Fixed `unmount()` not cleaning up the generated dialog, which caused duplicate modal UI when the element was reparented or remounted.
65
+ - Fixed internal element queries (close button, primary button, etc.) potentially matching consumer-provided elements inside custom footer slots.
66
+
3
67
  ## v1.12.0
4
68
 
5
69
  ### 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
@@ -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);
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.13.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -77,15 +77,15 @@
77
77
  "@commitlint/config-conventional": "^21.0.2",
78
78
  "@eslint/compat": "^2.0.0",
79
79
  "@eslint/js": "^9.38.0",
80
- "@figma/code-connect": "^1.4.5",
80
+ "@figma/code-connect": "^2.0.0",
81
81
  "@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",
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",
87
87
  "@stylistic/eslint-plugin": "^3.1.0",
88
- "@tui/cally": "1.1.0",
88
+ "@tui/cally": "1.1.1",
89
89
  "@types/js-beautify": "^1.14.3",
90
90
  "@types/node": "^24.0.0",
91
91
  "@typescript-eslint/eslint-plugin": "^8.46.2",
@@ -108,8 +108,7 @@
108
108
  "eslint-plugin-prettier": "^5.5.4",
109
109
  "eslint-plugin-react": "^7.37.5",
110
110
  "eslint-plugin-react-hooks": "^7.0.1",
111
- "eslint-plugin-storybook": "~10.4.5",
112
- "git-format-staged": "4.0.1",
111
+ "eslint-plugin-storybook": "^10.4.5",
113
112
  "glob": "^13.0.0",
114
113
  "globals": "^17.3.0",
115
114
  "husky": "^9.1.7",
@@ -128,8 +127,8 @@
128
127
  "sass-true": "^10.0.0",
129
128
  "shx": "0.4.0",
130
129
  "source-map-support": "^0.5.21",
131
- "storybook": "~10.4.5",
132
- "storybook-addon-pseudo-states": "~10.4.5",
130
+ "storybook": "^10.4.5",
131
+ "storybook-addon-pseudo-states": "^10.4.5",
133
132
  "storybook-addon-tag-badges": "^3.1.0",
134
133
  "storybook-dark-mode": "^5.0.0",
135
134
  "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/highlight-panel/_mixins.scss CHANGED
@@ -52,12 +52,14 @@ $uilib-highlight-panel-included: false !default;
52
52
 
53
53
  &::after {
54
54
  position: absolute;
55
- inset: auto 0 0;
55
+
56
+ // fixed pixel issue
57
+ inset: auto 0 -0.05rem;
56
58
  content: '';
57
59
 
58
60
  display: block;
59
61
 
60
- height: var(--uilib-spacing-400);
62
+ height: calc(var(--uilib-spacing-400) + 0.05rem);
61
63
 
62
64
  border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
63
65
  border-bottom-width: 0;
package/scss/lib/icon-button/_mixins.scss CHANGED
@@ -16,125 +16,216 @@ $uilib-icon-button-included: false !default;
16
16
 
17
17
  @mixin uilib-icon-button-master() {
18
18
  .uilib-icon-button {
19
+ --uilib-icon-button-small-offset: calc(((var(--uilib-icon-button-size-small) - var(--uilib-icon-size-xsmall)) / 2) * -1);
20
+ --uilib-icon-button-medium-offset: calc(((var(--uilib-icon-button-size-medium) - var(--uilib-icon-size-medium)) / 2) * -1);
21
+ --uilib-icon-button-large-offset: calc(((var(--uilib-icon-button-size-large) - var(--uilib-icon-size-xlarge)) / 2) * -1);
22
+
19
23
  position: relative;
20
24
 
21
25
  display: inline-flex;
22
26
  flex-flow: row nowrap;
23
- justify-content: center;
27
+ gap: 0;
28
+ justify-content: flex-end;
24
29
  align-items: center;
25
30
 
26
- width: var(--uilib-icon-button-size-medium);
27
31
  padding: 0;
28
- aspect-ratio: 1/1;
29
32
 
30
- color: var(--uilib-icon-button-primary-color);
33
+ color: var(--uilib-icon-button-text-color);
31
34
  font: var(--uilib-typography-label-medium);
32
35
  text-decoration: none;
33
36
 
34
- border-radius: var(--uilib-icon-button-radius);
37
+ border: 0;
35
38
 
36
- background: var(--uilib-icon-button-primary-bg-color);
39
+ background: transparent;
37
40
 
38
41
  cursor: pointer;
39
42
 
40
43
  appearance: none;
41
44
 
42
- @media (prefers-reduced-motion: no-preference) {
43
- transition:
44
- border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
45
- background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
46
- color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
47
- transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
45
+ &::after {
46
+ content: '';
47
+
48
+ order: 2;
49
+
50
+ flex-grow: 0;
51
+ flex-shrink: 0;
52
+
53
+ width: var(--uilib-icon-button-size-medium);
54
+ padding: 0;
55
+ aspect-ratio: 1/1;
56
+
57
+ border-radius: var(--uilib-icon-button-radius);
58
+
59
+ background: var(--uilib-icon-button-primary-bg-color);
60
+
61
+ @media (prefers-reduced-motion: no-preference) {
62
+ transition:
63
+ border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
64
+ background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
65
+ color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
66
+ transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
67
+ }
48
68
  }
49
69
 
50
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
70
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
51
71
  background: var(--uilib-icon-button-primary-hover-bg-color);
52
72
  }
53
73
 
54
74
  &:focus-visible {
55
75
  @include uilib-focus;
76
+
77
+ /* stylelint-disable-next-line order/order */
78
+ &::before {
79
+ border-radius: var(--uilib-icon-button-radius);
80
+ }
56
81
  }
57
82
 
58
83
  &:active:not(:disabled, .uilib-icon-button--disabled) {
59
- transform: scale(0.96);
84
+ &::after {
85
+ transform: scale(0.96);
86
+ }
87
+
88
+ .uilib-icon-button__icon {
89
+ transform: translate(var(--uilib-icon-button-medium-offset), 0) scale(0.96);
90
+ }
91
+ }
92
+
93
+ &:is(div) {
94
+ pointer-events: none;
95
+
96
+ &::after,
97
+ &::before,
98
+ .uilib-icon-button__icon {
99
+ pointer-events: none;
100
+ }
60
101
  }
61
102
 
62
103
  &__content {
63
- flex-grow: 1;
104
+ order: 1;
105
+
106
+ padding-right: var(--uilib-spacing-300);
107
+
108
+ font: var(--uilib-typography-label-large);
109
+ text-align: left;
64
110
  }
65
111
 
66
112
  &__icon {
113
+ position: relative;
114
+ z-index: 1;
115
+
116
+ order: 3;
117
+
118
+ flex-shrink: 0;
119
+
120
+ margin-left: calc((var(--uilib-icon-size-medium)) * -1);
121
+
122
+ color: var(--uilib-icon-button-primary-color);
123
+
124
+ transform: translate(var(--uilib-icon-button-medium-offset), 0);
125
+
67
126
  pointer-events: none;
127
+
128
+ @media (prefers-reduced-motion: no-preference) {
129
+ transition:
130
+ border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
131
+ background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
132
+ color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
133
+ transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
134
+ }
68
135
  }
69
136
  }
70
137
 
71
138
  .uilib-icon-button--ghost {
72
- color: var(--uilib-icon-button-ghost-color);
73
-
74
- background: var(--uilib-icon-button-ghost-bg-color);
139
+ &::after {
140
+ background: var(--uilib-icon-button-ghost-bg-color);
141
+ }
75
142
 
76
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
143
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
77
144
  background: var(--uilib-icon-button-ghost-hover-bg-color);
78
145
  }
146
+
147
+ .uilib-icon-button__icon {
148
+ color: var(--uilib-icon-button-ghost-color);
149
+ }
79
150
  }
80
151
 
81
152
  .uilib-icon-button--secondary {
82
- color: var(--uilib-icon-button-secondary-color);
83
-
84
- border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-icon-button-secondary-color);
153
+ &::after {
154
+ border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-icon-button-secondary-color);
85
155
 
86
- background: var(--uilib-icon-button-secondary-bg-color);
156
+ background: var(--uilib-icon-button-secondary-bg-color);
157
+ }
87
158
 
88
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
159
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
89
160
  background: var(--uilib-icon-button-secondary-hover-bg-color);
90
161
  }
162
+
163
+ .uilib-icon-button__icon {
164
+ color: var(--uilib-icon-button-secondary-color);
165
+ }
91
166
  }
92
167
 
93
168
  .uilib-icon-button--control {
94
- color: var(--uilib-icon-button-control-color);
169
+ &::after {
170
+ background: var(--uilib-icon-button-control-bg-color);
95
171
 
96
- background: var(--uilib-icon-button-control-bg-color);
97
-
98
- box-shadow: var(--uilib-elevation-200);
172
+ box-shadow: var(--uilib-elevation-200);
173
+ }
99
174
 
100
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
175
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
101
176
  background: var(--uilib-icon-button-control-hover-bg-color);
102
177
  }
178
+
179
+ .uilib-icon-button__icon {
180
+ color: var(--uilib-icon-button-control-color);
181
+ }
103
182
  }
104
183
 
105
184
  .uilib-icon-button--promotion {
106
- color: var(--uilib-icon-button-promotion-color);
107
-
108
- background: var(--uilib-icon-button-promotion-bg-color);
185
+ &::after {
186
+ background: var(--uilib-icon-button-promotion-bg-color);
187
+ }
109
188
 
110
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
189
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
111
190
  background: var(--uilib-icon-button-promotion-hover-bg-color);
112
191
  }
192
+
193
+ .uilib-icon-button__icon {
194
+ color: var(--uilib-icon-button-promotion-color);
195
+ }
113
196
  }
114
197
 
115
198
  .uilib-icon-button--search {
116
- color: var(--uilib-icon-button-search-color);
117
-
118
- background: var(--uilib-icon-button-search-bg-color);
199
+ &::after {
200
+ background: var(--uilib-icon-button-search-bg-color);
201
+ }
119
202
 
120
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
203
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
121
204
  background: var(--uilib-icon-button-search-hover-bg-color);
122
205
  }
206
+
207
+ .uilib-icon-button__icon {
208
+ color: var(--uilib-icon-button-search-color);
209
+ }
123
210
  }
124
211
 
125
212
  .uilib-icon-button--shortlist {
126
- color: var(--uilib-icon-button-shortlist-color);
213
+ &::after {
214
+ background: var(--uilib-icon-button-shortlist-bg-color);
127
215
 
128
- background: var(--uilib-icon-button-shortlist-bg-color);
129
-
130
- box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
216
+ box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
217
+ }
131
218
 
132
- &:hover:not(:disabled, .uilib-icon-button--disabled) {
219
+ &:hover:not(:disabled, .uilib-icon-button--disabled)::after {
133
220
  background: var(--uilib-icon-button-shortlist-hover-bg-color);
134
221
  }
135
222
 
136
- .uilib-icon-button__icon--selected {
137
- display: none;
223
+ .uilib-icon-button__icon {
224
+ color: var(--uilib-icon-button-shortlist-color);
225
+
226
+ &--selected {
227
+ display: none;
228
+ }
138
229
  }
139
230
 
140
231
  &[aria-pressed='true'] .uilib-icon-button__icon {
@@ -148,33 +239,119 @@ $uilib-icon-button-included: false !default;
148
239
 
149
240
  .uilib-icon-button:disabled,
150
241
  .uilib-icon-button--disabled {
151
- color: var(--uilib-icon-button-disabled-color);
242
+ cursor: default;
152
243
 
153
- border-color: var(--uilib-icon-button-disabled-bg-color);
244
+ &::after {
245
+ border-color: var(--uilib-icon-button-disabled-bg-color);
154
246
 
155
- background: var(--uilib-icon-button-disabled-bg-color);
247
+ background: var(--uilib-icon-button-disabled-bg-color);
156
248
 
157
- box-shadow: none;
249
+ box-shadow: none;
250
+ }
158
251
 
159
- cursor: default;
252
+ .uilib-icon-button__icon {
253
+ color: var(--uilib-icon-button-disabled-color);
254
+ }
255
+
256
+ .uilib-icon-button__content {
257
+ color: var(--uilib-icon-button-disabled-color);
258
+ }
160
259
  }
161
260
 
162
261
  .uilib-icon-button--ghost:disabled,
163
262
  .uilib-icon-button--ghost.uilib-icon-button--disabled {
164
- color: var(--uilib-icon-button-disabled-bg-color);
263
+ cursor: default;
165
264
 
166
- border-color: var(--uilib-icon-button-ghost-bg-color);
265
+ &::after {
266
+ color: var(--uilib-icon-button-disabled-bg-color);
167
267
 
168
- background: var(--uilib-icon-button-ghost-bg-color);
268
+ border-color: var(--uilib-icon-button-ghost-bg-color);
169
269
 
170
- cursor: default;
270
+ background: var(--uilib-icon-button-ghost-bg-color);
271
+ }
272
+
273
+ .uilib-icon-button__icon {
274
+ color: var(--uilib-icon-button-disabled-color);
275
+ }
276
+
277
+ .uilib-icon-button__content {
278
+ color: var(--uilib-icon-button-disabled-color);
279
+ }
171
280
  }
172
281
 
173
282
  .uilib-icon-button--small {
174
- width: var(--uilib-icon-button-size-small);
283
+ &::after {
284
+ width: var(--uilib-icon-button-size-small);
285
+ }
286
+
287
+ .uilib-icon-button__content {
288
+ padding-right: var(--uilib-spacing-200);
289
+
290
+ font: var(--uilib-typography-label-medium);
291
+ }
292
+
293
+ .uilib-icon-button__icon {
294
+ margin-left: calc((var(--uilib-icon-size-xsmall)) * -1);
295
+
296
+ transform: translate(var(--uilib-icon-button-small-offset), 0);
297
+ }
298
+
299
+ /* stylelint-disable-next-line order/order */
300
+ &:active:not(:disabled, .uilib-icon-button--disabled) {
301
+ .uilib-icon-button__icon {
302
+ transform: translate(var(--uilib-icon-button-small-offset), 0) scale(0.96);
303
+ }
304
+ }
175
305
  }
176
306
 
177
307
  .uilib-icon-button--large {
178
- width: var(--uilib-icon-button-size-large);
308
+ &::after {
309
+ width: var(--uilib-icon-button-size-large);
310
+ }
311
+
312
+ .uilib-icon-button__content {
313
+ padding-right: var(--uilib-spacing-400);
314
+
315
+ font: var(--uilib-typography-component-heading-xlarge);
316
+ }
317
+
318
+ .uilib-icon-button__icon {
319
+ margin-left: calc((var(--uilib-icon-size-xlarge)) * -1);
320
+
321
+ transform: translate(var(--uilib-icon-button-large-offset), 0);
322
+ }
323
+
324
+ /* stylelint-disable-next-line order/order */
325
+ &:active:not(:disabled, .uilib-icon-button--disabled) {
326
+ .uilib-icon-button__icon {
327
+ transform: translate(var(--uilib-icon-button-large-offset), 0) scale(0.96);
328
+ }
329
+ }
330
+ }
331
+
332
+ .uilib-icon-button--label-right {
333
+ justify-content: flex-start;
334
+
335
+ &::after {
336
+ order: 1;
337
+ }
338
+
339
+ .uilib-icon-button__icon {
340
+ order: 2;
341
+ }
342
+
343
+ .uilib-icon-button__content {
344
+ order: 3;
345
+
346
+ padding: 0 0 0 var(--uilib-spacing-300);
347
+ }
348
+
349
+ &.uilib-icon-button--small .uilib-icon-button__content {
350
+ padding-left: var(--uilib-spacing-200);
351
+ }
352
+
353
+ &.uilib-icon-button--large .uilib-icon-button__content {
354
+ padding-left: var(--uilib-spacing-400);
355
+ }
179
356
  }
180
357
  }
package/scss/lib/icon-button/_variables.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  // Icon button specific variables to allow theming
6
6
  $uilib-icon-button-variables: (
7
7
  radius: var(--uilib-border-radius-pill),
8
+ text-color: var(--uilib-color-core-interaction),
8
9
  ghost-color: var(--uilib-color-core-interaction),
9
10
  ghost-bg-color: transparent,
10
11
  ghost-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state),
package/scss/lib/image/_mixins.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // image / _mixins
2
2
  @use '../../variables/env-variables' as *;
3
+ @use '../grid/mixins' as *;
3
4
 
4
5
  $uilib-image-included: false !default;
5
6
 
@@ -18,6 +19,9 @@ $uilib-image-included: false !default;
18
19
  }
19
20
 
20
21
  .uilib-image {
22
+ // Active focal point — cascades from the largest set breakpoint down to base, then center.
23
+ --uilib-image-focus: var(--uilib-image-focus-base, center);
24
+
21
25
  display: flex;
22
26
 
23
27
  border-radius: var(--uilib-image-rectangle);
@@ -51,53 +55,77 @@ $uilib-image-included: false !default;
51
55
  border-radius: var(--uilib-image-rounded);
52
56
  }
53
57
 
54
- img {
55
- width: 100%;
56
- height: 100%;
57
-
58
- font-size: 0;
59
-
60
- object-fit: cover;
61
- object-position: center;
62
- }
63
-
58
+ // Static focal point classes — set the base var, applied at all breakpoints.
64
59
  /* stylelint-disable-next-line order/order */
65
60
  &--focus {
66
- &-top-left img {
67
- object-position: top left;
61
+ &-top-left {
62
+ --uilib-image-focus-base: top left;
68
63
  }
69
64
 
70
- &-top-center img {
71
- object-position: top center;
65
+ &-top-center {
66
+ --uilib-image-focus-base: top center;
72
67
  }
73
68
 
74
- &-top-right img {
75
- object-position: top right;
69
+ &-top-right {
70
+ --uilib-image-focus-base: top right;
76
71
  }
77
72
 
78
- &-center-left img {
79
- object-position: center left;
73
+ &-center-left {
74
+ --uilib-image-focus-base: center left;
80
75
  }
81
76
 
82
- &-center img {
83
- object-position: center;
77
+ &-center {
78
+ --uilib-image-focus-base: center;
84
79
  }
85
80
 
86
- &-center-right img {
87
- object-position: center right;
81
+ &-center-right {
82
+ --uilib-image-focus-base: center right;
88
83
  }
89
84
 
90
- &-bottom-left img {
91
- object-position: bottom left;
85
+ &-bottom-left {
86
+ --uilib-image-focus-base: bottom left;
92
87
  }
93
88
 
94
- &-bottom-center img {
95
- object-position: bottom center;
89
+ &-bottom-center {
90
+ --uilib-image-focus-base: bottom center;
96
91
  }
97
92
 
98
- &-bottom-right img {
99
- object-position: bottom right;
93
+ &-bottom-right {
94
+ --uilib-image-focus-base: bottom right;
100
95
  }
101
96
  }
97
+
98
+ // Per-breakpoint overrides, each falling back to the smaller breakpoints.
99
+ @include uilib-breakpoint(xs) {
100
+ --uilib-image-focus: var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center));
101
+ }
102
+
103
+ @include uilib-breakpoint(sm) {
104
+ --uilib-image-focus: var(--uilib-image-focus-sm, var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center)));
105
+ }
106
+
107
+ @include uilib-breakpoint(md) {
108
+ --uilib-image-focus: var(
109
+ --uilib-image-focus-md,
110
+ var(--uilib-image-focus-sm, var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center)))
111
+ );
112
+ }
113
+
114
+ @include uilib-breakpoint(lg) {
115
+ --uilib-image-focus: var(
116
+ --uilib-image-focus-lg,
117
+ var(--uilib-image-focus-md, var(--uilib-image-focus-sm, var(--uilib-image-focus-xs, var(--uilib-image-focus-base, center))))
118
+ );
119
+ }
120
+
121
+ img {
122
+ width: 100%;
123
+ height: 100%;
124
+
125
+ font-size: 0;
126
+
127
+ object-fit: cover;
128
+ object-position: var(--uilib-image-focus, center);
129
+ }
102
130
  }
103
131
  }
package/scss/lib/info-tag/_mixins.scss CHANGED
@@ -37,7 +37,7 @@ $uilib-info-tag-list-included: false !default;
37
37
  padding: var(--uilib-spacing-050) var(--uilib-spacing-100); /* 2px 4px */
38
38
 
39
39
  color: var(--uilib-info-tag-text-color);
40
- font: var(--uilib-typography-label-xsmall);
40
+ font: var(--uilib-typography-label-small);
41
41
  text-align: left;
42
42
  text-decoration: none;
43
43
 
@@ -69,6 +69,12 @@ $uilib-info-tag-list-included: false !default;
69
69
  background: var(--uilib-info-tag-local-product-bg-color);
70
70
  }
71
71
 
72
+ .uilib-info-tag--platinum {
73
+ color: var(--uilib-info-tag-platinum-text-color);
74
+
75
+ background: var(--uilib-info-tag-platinum-bg-color);
76
+ }
77
+
72
78
  // Tooltip variant styles
73
79
  .uilib-info-tag .uilib-tooltip.uilib-tooltip--icon {
74
80
  margin: calc(var(--uilib-spacing-200) * -1);
package/scss/lib/info-tag/_variables.scss CHANGED
@@ -8,6 +8,8 @@ $uilib-info-tag-variables: (
8
8
  text-color: var(--uilib-color-text-strong),
9
9
  info-bg-color: var(--uilib-color-status-info-surface),
10
10
  local-product-bg-color: var(--uilib-color-brand-local),
11
+ platinum-bg-color: var(--uilib-color-brand-platinum),
12
+ platinum-text-color: var(--uilib-color-core-neutral),
11
13
  neutral-bg-color: var(--uilib-color-core-neutral),
12
14
  scarcity-bg-color: var(--uilib-color-status-warning-surface),
13
15
  ) !default;
package/scss/lib/modal/_mixins.scss CHANGED
@@ -119,7 +119,8 @@ $uilib-modal-included: false !default;
119
119
  justify-content: end;
120
120
  align-items: center;
121
121
 
122
- slot[name='price'] {
122
+ slot[name='price'],
123
+ [slot='price'] {
123
124
  display: flex;
124
125
 
125
126
  margin-right: auto;
@@ -138,8 +139,11 @@ $uilib-modal-included: false !default;
138
139
  }
139
140
  }
140
141
 
141
- // show divider only if price slot is used
142
- &:not(:has(slot[name='price'] *)) .uilib-divider {
142
+ // show divider only if price slot has content
143
+ // V1: slot[name='price'] always exists in the template — use :not(:empty)
144
+ // to check it actually has distributed content.
145
+ // V2: [slot='price'] only exists when the consumer provides it.
146
+ &:not(:has(slot[name='price']:not(:empty), [slot='price'])) .uilib-divider {
143
147
  display: none;
144
148
  }
145
149
  }
@@ -149,6 +153,8 @@ $uilib-modal-included: false !default;
149
153
  mask-image: var(--uilib-modal-close-icon);
150
154
  }
151
155
 
156
+ // Scroll lock fallback for v1 (v2 handles this in JS).
157
+ // TODO(next-major): remove once v1 is retired.
152
158
  body:has(&[open]) {
153
159
  overflow: hidden;
154
160
  }
package/scss/variables/_colors.scss CHANGED
@@ -51,6 +51,7 @@ $uilib-color-semantic: (
51
51
  brand-tripadvisor-pine-green: map.get($uilib-primitives, 'color-brand-tripadvisor-pine-green'),
52
52
  brand-tripadvisor-inverse: map.get($uilib-primitives, 'color-brand-tripadvisor-trip-green'),
53
53
  brand-paypal: map.get($uilib-primitives, 'color-brand-paypal-blue'),
54
+ brand-platinum: map.get($uilib-primitives, 'color-brand-platinum-grey'),
54
55
  other-scroll-handle: map.get($uilib-primitives, 'color-neutral-50'),
55
56
  /* Deprecated */ brand-trip-advisor: map.get($uilib-primitives, 'color-brand-tripadvisor-green-60'),
56
57
  );
package/scss/variables/_primitives.scss CHANGED
@@ -80,6 +80,7 @@ $uilib-primitives: (
80
80
  color-brand-tripadvisor-green-60: #00b747,
81
81
  color-brand-tripadvisor-pine-green: #002b11,
82
82
  color-brand-paypal-blue: #253b80,
83
+ color-brand-platinum-grey: #4b5560,
83
84
  color-brand-holidaycheck-blue: #0e55cd,
84
85
  color-brand-holidaycheck-yellow: #ffca3a,
85
86
  color-brand-holidaycheck-lightblue: #c7d5ed,
package/scss/variables/base-theme.json CHANGED
@@ -246,6 +246,11 @@
246
246
  "primitive": "color-brand-paypal-blue",
247
247
  "title": "PayPal",
248
248
  "darkColor": true
249
+ },
250
+ "color-brand-platinum": {
251
+ "primitive": "color-brand-platinum-grey",
252
+ "title": "Platinum",
253
+ "darkColor": true
249
254
  }
250
255
  }
251
256
  }
@@ -1464,6 +1469,12 @@
1464
1469
  "title": "Button radius",
1465
1470
  "description": "Button radius"
1466
1471
  },
1472
+ "icon-button-text-color": {
1473
+ "primitive": "uilib-color-core-interaction",
1474
+ "displayType": "color",
1475
+ "title": "Label text colour",
1476
+ "description": "Label text colour"
1477
+ },
1467
1478
  "icon-button-ghost-color": {
1468
1479
  "primitive": "uilib-color-core-interaction",
1469
1480
  "title": "Ghost text colour",
@@ -1672,6 +1683,16 @@
1672
1683
  "title": "Local product background colour",
1673
1684
  "description": "Local product background colour"
1674
1685
  },
1686
+ "info-tag-platinum-bg-color": {
1687
+ "primitive": "uilib-color-brand-platinum",
1688
+ "title": "Platinum background colour",
1689
+ "description": "Platinum background colour"
1690
+ },
1691
+ "info-tag-platinum-text-color": {
1692
+ "primitive": "uilib-color-core-neutral",
1693
+ "title": "Platinum text colour",
1694
+ "description": "Platinum text colour"
1695
+ },
1675
1696
  "info-tag-neutral-bg-color": {
1676
1697
  "primitive": "uilib-color-core-neutral",
1677
1698
  "title": "Neutral background colour",
package/types/components.ts CHANGED
@@ -87,12 +87,32 @@ export interface ButtonProps {
87
87
 
88
88
  // ─── Cards ─────────────────────────────────────────────
89
89
 
90
+ // ─── Card ──────────────────────────────────────
91
+ export interface CardProps {
92
+ extraClasses?: string[];
93
+ extraAttributes?: string[];
94
+ link?: boolean;
95
+ iconButton?: boolean;
96
+ iconButtonLabel?: boolean;
97
+ iconButtonLabelText?: string;
98
+ linkText?: string;
99
+ linkHref?: string;
100
+ supplementaryContainer?: boolean;
101
+ cardContent?: string;
102
+ supplementaryContent?: string;
103
+ theme?: Theme;
104
+ }
105
+
90
106
  // ─── Card Article ──────────────────────────────────────
91
107
  export interface CardArticleProps {
92
108
  type?: 'static' | 'link' | 'multi-link';
109
+ iconButton?: boolean;
110
+ iconButtonLabel?: boolean;
111
+ iconButtonLabelText?: string;
93
112
  elementType?: 'anchor' | 'button';
94
113
  content?: 'short' | 'medium' | 'long' | 'rich';
95
114
  headingText?: string;
115
+ theme?: Theme;
96
116
  }
97
117
 
98
118
  // ─── Card Icon ─────────────────────────────────────────
@@ -420,10 +440,12 @@ export interface IconProps {
420
440
 
421
441
  // ─── Icon Button ─────────────────────────────────────────
422
442
  export interface IconButtonProps {
423
- element?: 'a' | 'button';
443
+ element?: 'a' | 'button' | 'div';
424
444
  variant?: ButtonVariantBase | 'ghost' | 'control' | 'shortlist';
425
445
  size?: 'small' | 'medium' | 'large';
426
446
  isDisabled?: boolean;
447
+ visibleLabel?: boolean;
448
+ labelRight?: boolean;
427
449
  label?: string;
428
450
  iconAsset?: string;
429
451
  selected?: boolean;
@@ -436,8 +458,31 @@ export interface ImageSrcItem {
436
458
  size: string;
437
459
  }
438
460
 
461
+ // prettier-ignore
439
462
  export type ImageFocalPoint =
440
- 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
463
+ | 'top-left'
464
+ | 'top-center'
465
+ | 'top-right'
466
+ | 'center-left'
467
+ | 'center'
468
+ | 'center-right'
469
+ | 'bottom-left'
470
+ | 'bottom-center'
471
+ | 'bottom-right';
472
+
473
+ /**
474
+ * Responsive focal points, keyed by breakpoint (matching the library's
475
+ * breakpoint scale). `base` applies below the `xs` breakpoint; any breakpoint
476
+ * may be omitted — omitted breakpoints inherit the next smallest defined value
477
+ * (base → xs → sm → md → lg), falling back to `center`.
478
+ */
479
+ export interface ImageResponsiveFocalPoint {
480
+ base?: ImageFocalPoint;
481
+ xs?: ImageFocalPoint;
482
+ sm?: ImageFocalPoint;
483
+ md?: ImageFocalPoint;
484
+ lg?: ImageFocalPoint;
485
+ }
441
486
 
442
487
  export interface ImageProps {
443
488
  altText: string;
@@ -445,12 +490,16 @@ export interface ImageProps {
445
490
  srcset?: ImageSrcItem[];
446
491
  ratio?: 'landscape' | 'panoramic' | 'portrait' | 'square' | 'wide';
447
492
  shape?: 'rectangle' | 'rounded';
448
- focalPoint?: ImageFocalPoint;
493
+ /**
494
+ * Focal point for the image. Accepts a single value applied at all breakpoints,
495
+ * or an object with per-breakpoint values for responsive focal points.
496
+ */
497
+ focalPoint?: ImageFocalPoint | ImageResponsiveFocalPoint;
449
498
  }
450
499
 
451
500
  // ─── Info Tag ───────────────────────────────────────────
452
501
  export interface InfoTagProps {
453
- variant?: 'info' | 'neutral' | 'scarcity' | 'local-product';
502
+ variant?: 'info' | 'neutral' | 'scarcity' | 'local-product' | 'platinum';
454
503
  size?: 'small' | 'medium';
455
504
  label?: string;
456
505
  leadingIcon?: boolean;