@muraldevkit/ui-toolkit 4.67.0-dev-Vc0V.1 → 4.67.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 (18) hide show
  1. package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts +1 -7
  2. package/dist/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts +9 -3
  3. package/dist/components/tooltip/useTooltipPosition/constants.d.ts +9 -0
  4. package/dist/components/tooltip/useTooltipPosition/index.d.ts +14 -0
  5. package/dist/components/tooltip/useTooltipPosition/utilities.d.ts +19 -0
  6. package/dist/index.js +1 -1
  7. package/dist/styles/MrlContainer/module.scss +2 -2
  8. package/dist/styles/MrlFilterItem/module.scss +1 -1
  9. package/dist/styles/MrlKeystroke/module.scss +1 -1
  10. package/dist/styles/MrlLegacySelectItem/variables.scss +2 -2
  11. package/dist/styles/MrlSidebarNavItem/module.scss +1 -1
  12. package/dist/styles/MrlSwitchStandalone/module.scss +1 -1
  13. package/dist/styles/MrlTabGroup/module.scss +1 -1
  14. package/dist/styles/MrlTooltipContent/global.scss +99 -128
  15. package/dist/styles/form/variables.scss +1 -1
  16. package/dist/styles.css +23 -23
  17. package/package.json +1 -2
  18. package/dist/components/tooltip/anchorPositioningPolyfill.d.ts +0 -19
package/dist/styles/MrlContainer/module.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  background-color: var(--mrl-container-background--helper);
12
12
  }
13
13
  .MrlContainer--nested {
14
- background-color: var(--mrl-color-background-highlight-secondary);
14
+ background-color: var(--mrl-color-background-decorative);
15
15
  border-color: var(--mrl-color-line-highlight-secondary);
16
16
  }
17
17
  .MrlContainer--nested-options {
@@ -23,7 +23,7 @@
23
23
  display: flex;
24
24
  }
25
25
  &-divider {
26
- background-color: var(--mrl-color-background-highlight-selected);
26
+ background-color: var(--mrl-color-background-selected);
27
27
  border-radius: var(--mrl-radii-03);
28
28
  flex-shrink: 0;
29
29
  margin-right: var(--mrl-spacing-06);
package/dist/styles/MrlFilterItem/module.scss CHANGED
@@ -39,7 +39,7 @@
39
39
  color var(--mrl-duration-04) var(--mrl-timing-m2);
40
40
  }
41
41
  &:hover {
42
- background-color: var(--mrl-color-background-highlight-emph-active);
42
+ background-color: var(--mrl-color-background-emph-active);
43
43
  cursor: pointer;
44
44
  }
45
45
  &[aria-checked='true'] {
package/dist/styles/MrlKeystroke/module.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .MrlKeystroke {
2
2
  align-items: center;
3
- background-color: var(--mrl-color-background-secondary);
3
+ background-color: rgba(var(--mrl-gray-80), 1);
4
4
  border: 1px solid var(--mrl-black-opacity-05);
5
5
  border-radius: var(--mrl-border-radius-content);
6
6
  color: rgba(var(--mrl-gray-20), 1);
package/dist/styles/MrlLegacySelectItem/variables.scss CHANGED
@@ -12,11 +12,11 @@
12
12
  --mrl-select-item-icon-spacing: var(--mrl-spacing-03);
13
13
  }
14
14
  .mrl-selectItem:hover {
15
- --mrl-select-item-background: var(--mrl-color-background-highlight-hover);
15
+ --mrl-select-item-background: var(--mrl-color-background-hover);
16
16
  --mrl-select-item-color: var(--mrl-color-text-highlight-hover);
17
17
  }
18
18
  .mrl-is--selected {
19
- --mrl-select-item-background: var(--mrl-color-background-highlight-selected);
19
+ --mrl-select-item-background: var(--mrl-color-background-selected);
20
20
  --mrl-select-item-color: var(--mrl-color-text-highlight-selected);
21
21
  }
22
22
  .mrl-selectItem[aria-disabled='true'],
package/dist/styles/MrlSidebarNavItem/module.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
3
3
  $mrl-sidebar-nav-item-background-color-hover: rgba(var(--mrl-gray-20), 1);
4
4
  $mrl-sidebar-nav-item-background-color-active: rgba(var(--mrl-gray-30), 1);
5
- $mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-highlight-active);
5
+ $mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-selected);
6
6
  $mrl-sidebar-nav-item-text-color-default: var(--mrl-color-text-heading);
7
7
  $mrl-sidebar-nav-item-text-color-selected: var(--mrl-color-text-inverse-active);
8
8
  .MrlSidebarNavItem {
package/dist/styles/MrlSwitchStandalone/module.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  background-color: var(--mrl-color-background);
16
16
  border-radius: 0.375rem;
17
17
  bottom: calc(var(--mrl-spacing-03) - var(--mrl-spacing-02));
18
- color: var(--mrl-color-background-secondary);
18
+ color: rgba(var(--mrl-gray-80), 1);
19
19
  display: flex;
20
20
  height: var(--mrl-spacing-04);
21
21
  left: var(--mrl-spacing-02);
package/dist/styles/MrlTabGroup/module.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  padding: 4px;
5
5
  position: relative;
6
6
  &::before {
7
- background-color: var(--mrl-color-background-decorative);
7
+ background-color: var(--mrl-color-line-divider);
8
8
  bottom: 4px;
9
9
  content: '';
10
10
  height: var(--mrl-line-width-control);
package/dist/styles/MrlTooltipContent/global.scss CHANGED
@@ -6,61 +6,6 @@ $mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2
6
6
  $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
7
7
  @use '../tooltip.mixins.scss' as *;
8
8
  @use './MrlTooltipContent.variables.scss';
9
- .mrl-tooltip-trigger {
10
- anchor-name: var(--mrl-tooltip-anchor-name);
11
- }
12
- .mrl-tooltip-positioner {
13
- --mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
14
- container-type: anchored;
15
- max-width: calc(var(--mrl-spacing-09) * 7);
16
- position: fixed;
17
- position-anchor: var(--mrl-tooltip-anchor-name);
18
- width: max-content;
19
- z-index: $mrl-zIndex-tooltips;
20
- }
21
- .mrl-tooltip-positioner[data-position='top'] {
22
- bottom: anchor(top);
23
- margin-bottom: var(--mrl-tooltip-trigger-offset);
24
- position-try-fallbacks: flip-block;
25
- }
26
- .mrl-tooltip-positioner[data-position='top'][data-anchor='center'] {
27
- justify-self: anchor-center;
28
- }
29
- .mrl-tooltip-positioner[data-position='top'][data-anchor='start'] {
30
- left: anchor(left);
31
- }
32
- .mrl-tooltip-positioner[data-position='top'][data-anchor='end'] {
33
- right: anchor(right);
34
- }
35
- .mrl-tooltip-positioner[data-position='bottom'] {
36
- margin-top: var(--mrl-tooltip-trigger-offset);
37
- position-try-fallbacks: flip-block;
38
- top: anchor(bottom);
39
- }
40
- .mrl-tooltip-positioner[data-position='bottom'][data-anchor='center'] {
41
- justify-self: anchor-center;
42
- }
43
- .mrl-tooltip-positioner[data-position='bottom'][data-anchor='start'] {
44
- left: anchor(left);
45
- }
46
- .mrl-tooltip-positioner[data-position='bottom'][data-anchor='end'] {
47
- right: anchor(right);
48
- }
49
- .mrl-tooltip-positioner[data-position='left'] {
50
- align-self: anchor-center;
51
- margin-right: var(--mrl-tooltip-trigger-offset);
52
- position-try-fallbacks: flip-inline;
53
- right: anchor(left);
54
- }
55
- .mrl-tooltip-positioner[data-position='right'] {
56
- align-self: anchor-center;
57
- left: anchor(right);
58
- margin-left: var(--mrl-tooltip-trigger-offset);
59
- position-try-fallbacks: flip-inline;
60
- }
61
- .mrl-tooltip-fade {
62
- width: max-content;
63
- }
64
9
  .mrl-tooltip-content {
65
10
  background: var(--mrl-tooltip-background-color);
66
11
  border-radius: var(--mrl-tooltip-border-radius);
@@ -75,9 +20,11 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
75
20
  max-width: calc(var(--mrl-spacing-09) * 7);
76
21
  overflow-wrap: break-word;
77
22
  padding: var(--mrl-tooltip-padding);
78
- position: relative;
23
+ position: absolute;
24
+ transition-property: opacity;
79
25
  white-space: normal;
80
26
  width: max-content;
27
+ z-index: $mrl-zIndex-tooltips;
81
28
  &.has-custom-render {
82
29
  padding-right: var(--mrl-spacing-02);
83
30
  }
@@ -96,85 +43,109 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
96
43
  transform: rotate(135deg);
97
44
  width: 0;
98
45
  }
99
- .mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content::after {
100
- border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
101
- bottom: $mrl-tooltip-arrow-vertical-center;
102
- left: $mrl-tooltip-arrow-horizontal-center;
103
- transform: rotate(315deg);
104
- }
105
- .mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content::after {
106
- border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
107
- left: $mrl-tooltip-arrow-horizontal-center;
108
- top: $mrl-tooltip-arrow-vertical-center;
109
- }
110
- .mrl-tooltip-positioner[data-anchor='start'] .mrl-tooltip-content::after {
111
- left: var(--mrl-tooltip-arrow-spacing);
112
- }
113
- .mrl-tooltip-positioner[data-anchor='start']
114
- .mrl-tooltip-content.mrlIconButton--small-wrapper::after {
115
- left: var(--mrl-spacing-04);
116
- }
117
- .mrl-tooltip-positioner[data-anchor='start']
118
- .mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after {
119
- left: var(--mrl-spacing-03);
120
- }
121
- .mrl-tooltip-positioner[data-anchor='end'] .mrl-tooltip-content::after {
122
- left: auto;
123
- right: var(--mrl-tooltip-arrow-spacing);
124
- }
125
- .mrl-tooltip-positioner[data-anchor='end']
126
- .mrl-tooltip-content.mrlIconButton--small-wrapper::after {
127
- left: auto;
128
- right: var(--mrl-spacing-04);
129
- }
130
- .mrl-tooltip-positioner[data-anchor='end']
131
- .mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after {
132
- left: auto;
133
- right: var(--mrl-spacing-03);
134
- }
135
- .mrl-tooltip-positioner[data-position='left'] .mrl-tooltip-content::after,
136
- .mrl-tooltip-positioner[data-position='right'] .mrl-tooltip-content::after {
137
- display: var(--mrl-tooltip-arrow-display-left-right);
46
+ .mrl-tooltip-content[data-position='top'] {
47
+ bottom: 100%;
48
+ margin-bottom: var(--mrl-tooltip-trigger-offset);
49
+ right: 50%;
50
+ transform: translateX(50%);
51
+ &::after {
52
+ border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
53
+ bottom: $mrl-tooltip-arrow-vertical-center;
54
+ left: $mrl-tooltip-arrow-horizontal-center;
55
+ transform: rotate(315deg);
56
+ }
57
+ .mrl-tooltip-content__hover {
58
+ height: 10px;
59
+ left: 0;
60
+ top: 100%;
61
+ width: 100%;
62
+ }
138
63
  }
139
- .mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content {
140
- @container anchored(fallback: flip-block) {
141
- &::after {
142
- bottom: auto;
143
- top: $mrl-tooltip-arrow-vertical-center;
144
- transform: rotate(135deg);
145
- }
64
+ .mrl-tooltip-content[data-anchor='start'] {
65
+ left: 0;
66
+ right: initial;
67
+ transform: none;
68
+ &::after {
69
+ left: var(--mrl-tooltip-arrow-spacing);
70
+ }
71
+ &.mrlIconButton--small-wrapper::after {
72
+ left: var(--mrl-spacing-04);
73
+ }
74
+ &.mrlIconButton--xsmall-wrapper::after {
75
+ left: var(--mrl-spacing-03);
146
76
  }
147
77
  }
148
- .mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content {
149
- @container anchored(fallback: flip-block) {
150
- &::after {
151
- bottom: $mrl-tooltip-arrow-vertical-center;
152
- top: auto;
153
- transform: rotate(315deg);
154
- }
78
+ .mrl-tooltip-content[data-anchor='end'] {
79
+ right: 0;
80
+ transform: none;
81
+ &::after {
82
+ left: auto;
83
+ right: var(--mrl-tooltip-arrow-spacing);
84
+ }
85
+ &.mrlIconButton--small-wrapper::after {
86
+ left: auto;
87
+ right: var(--mrl-spacing-04);
88
+ }
89
+ &.mrlIconButton--xsmall-wrapper::after {
90
+ left: auto;
91
+ right: var(--mrl-spacing-03);
155
92
  }
156
93
  }
157
- .mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content__hover {
158
- height: 10px;
159
- left: 0;
94
+ .mrl-tooltip-content[data-position='bottom'] {
95
+ margin-top: var(--mrl-tooltip-trigger-offset);
160
96
  top: 100%;
161
- width: 100%;
97
+ &::after {
98
+ border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
99
+ top: $mrl-tooltip-arrow-vertical-center;
100
+ }
101
+ .mrl-tooltip-content__hover {
102
+ height: 10px;
103
+ left: 0;
104
+ top: -10px;
105
+ width: 100%;
106
+ }
162
107
  }
163
- .mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content__hover {
164
- height: 10px;
165
- left: 0;
166
- top: -10px;
167
- width: 100%;
108
+ .mrl-tooltip-content[data-position='bottom'][data-anchor='center'] {
109
+ right: 50%;
110
+ transform: translateX(50%);
111
+ &::after {
112
+ left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
113
+ }
168
114
  }
169
- .mrl-tooltip-positioner[data-position='left'] .mrl-tooltip-content__hover {
170
- height: 23px;
171
- right: -10px;
172
- top: 0;
173
- width: 100%;
115
+ .mrl-tooltip-content[data-position='left'] {
116
+ left: initial;
117
+ margin-right: var(--mrl-tooltip-trigger-offset);
118
+ right: 100%;
119
+ top: 50%;
120
+ transform: translateY(-50%);
121
+ &::after {
122
+ border-top-right-radius: var(--mrl-tooltip-arrow-border-radius);
123
+ display: var(--mrl-tooltip-arrow-display-left-right);
124
+ right: $mrl-tooltip-arrow-vertical-center;
125
+ top: $mrl-tooltip-arrow-horizontal-center;
126
+ }
127
+ .mrl-tooltip-content__hover {
128
+ height: 23px;
129
+ right: -10px;
130
+ top: 0;
131
+ width: 100%;
132
+ }
174
133
  }
175
- .mrl-tooltip-positioner[data-position='right'] .mrl-tooltip-content__hover {
176
- height: 23px;
177
- left: -10px;
178
- top: 0;
179
- width: 100%;
134
+ .mrl-tooltip-content[data-position='right'] {
135
+ left: 100%;
136
+ margin-left: var(--mrl-tooltip-trigger-offset);
137
+ top: 50%;
138
+ transform: translateY(-50%);
139
+ &::after {
140
+ border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
141
+ display: var(--mrl-tooltip-arrow-display-left-right);
142
+ left: $mrl-tooltip-arrow-vertical-center;
143
+ top: $mrl-tooltip-arrow-horizontal-center;
144
+ }
145
+ .mrl-tooltip-content__hover {
146
+ height: 23px;
147
+ left: -10px;
148
+ top: 0;
149
+ width: 100%;
150
+ }
180
151
  }
package/dist/styles/form/variables.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  --mrl-radio-button-border-width: var(--mrl-line-width-border);
39
39
  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
40
40
  --mrl-radio-button-background: var(--mrl-color-background);
41
- --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
41
+ --mrl-radio-button-background-selected: var(--mrl-color-background-selected);
42
42
  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
43
43
  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
44
44
  }