@tui/design-system 1.11.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 +75 -2
  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 +357 -196
package/CHANGELOG.md CHANGED
@@ -1,5 +1,78 @@
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
+
67
+ ## v1.12.0
68
+
69
+ ### Updated
70
+
71
+ #### [Date picker](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-picker--docs) and [Date range](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-range--docs)
72
+
73
+ - Added `allowed-dates` attribute. Accepts a comma-separated list of ISO dates (e.g. `"2026-08-06,2026-08-10,2026-08-20"`). When set, only the listed
74
+ dates are selectable — all other dates are disabled. If the attribute is absent or empty, all dates within the min/max range remain selectable.
75
+
3
76
  ## v1.11.0
4
77
 
5
78
  ### Added
@@ -52,8 +125,8 @@
52
125
 
53
126
  #### [Search card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-search-card--docs)
54
127
 
55
- - Search card has been deprecated and replaced by Product card, a more flexible component that gives consuming teams greater control over the card's
56
- content structure and layout.
128
+ - Search card has been deprecated and replaced by [Product card](?path=/docs/components-cards-product-card--docs), a more flexible component that
129
+ gives consuming teams greater control over the card's content structure and layout.
57
130
 
58
131
  #### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
59
132
 
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.11.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.0.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;