@muraldevkit/ui-toolkit 4.2.3 → 4.4.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 (24) hide show
  1. package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
  2. package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
  3. package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
  4. package/dist/components/error-page-template/MrlBrandColors/MrlBrandColors.d.ts +6 -0
  5. package/dist/components/error-page-template/MrlBrandColors/index.d.ts +1 -0
  6. package/dist/components/error-page-template/index.d.ts +1 -0
  7. package/dist/components/form/text-input/MrlEditableTextInput/MrlEditableTextInputRightIcon.d.ts +1 -1
  8. package/dist/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.d.ts +1 -1
  9. package/dist/components/index.d.ts +1 -0
  10. package/dist/components/link/MrlLinkButton/MrlLinkButton.d.ts +1 -1
  11. package/dist/components/table/MrlSmartTable/MrlSmartTable.d.ts +4 -0
  12. package/dist/components/table/MrlTable/MrlTable.d.ts +1 -1
  13. package/dist/components/table/MrlTableCell/MrlTableCell.d.ts +3 -1
  14. package/dist/components/table/MrlTableColumn/MrlTableColumn.d.ts +3 -1
  15. package/dist/index.js +1 -1
  16. package/dist/src/components/error-page-template/MrlBrandColors/MrlBrandColors.functions.scss +12 -0
  17. package/dist/styles/MrlBrandColors/mixins.scss +9 -0
  18. package/dist/styles/MrlBrandColors/module.scss +24 -0
  19. package/dist/styles/MrlBrandColors/variables.scss +89 -0
  20. package/dist/styles/table/global.scss +2 -2
  21. package/dist/styles.css +3 -2
  22. package/dist/utils/getScrollableContainer/getScrollableContainer.d.ts +7 -0
  23. package/dist/utils/hasHorizontalScroll/hasHorizontalScroll.d.ts +11 -0
  24. package/package.json +1 -1
package/dist/src/components/error-page-template/MrlBrandColors/MrlBrandColors.functions.scss ADDED
@@ -0,0 +1,12 @@
1
+ @use 'sass:list';
2
+ @function color-grid($color-counts) {
3
+ $template-areas: '';
4
+ @each $color-count in $color-counts {
5
+ $color: list.nth($color-count, 1);
6
+ $count: list.nth($color-count, 2);
7
+ @for $i from 1 through $count {
8
+ $template-areas: '#{$template-areas} #{$color}';
9
+ }
10
+ }
11
+ @return $template-areas;
12
+ }
package/dist/styles/MrlBrandColors/mixins.scss ADDED
@@ -0,0 +1,9 @@
1
+ @use './MrlBrandColors.functions.scss' as functions;
2
+ @mixin pattern-classes($patterns) {
3
+ @each $pattern-name, $color-counts in $patterns {
4
+ $grid-template-areas: functions.color-grid($color-counts);
5
+ .#{$pattern-name} {
6
+ grid-template-areas: $grid-template-areas;
7
+ }
8
+ }
9
+ }
package/dist/styles/MrlBrandColors/module.scss ADDED
@@ -0,0 +1,24 @@
1
+ @use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
2
+ @use './MrlBrandColors.functions.scss' as *;
3
+ @use './MrlBrandColors.variables.scss' as *;
4
+ @use './MrlBrandColors.mixins.scss' as *;
5
+ @each $name, $color in $colors {
6
+ .MrlBrandColor-#{$name} {
7
+ background-color: #{$color};
8
+ grid-area: #{$name};
9
+ }
10
+ }
11
+ .MrlBrandColors {
12
+ display: grid;
13
+ grid-template-columns: repeat(8, 1fr);
14
+ grid-template-rows: 1fr;
15
+ height: 15rem;
16
+ width: 100%;
17
+ }
18
+ @include pattern-classes($patterns-xs);
19
+ @media (min-width: $mrl-breakpoint-01) {
20
+ .MrlBrandColors {
21
+ grid-template-columns: repeat(32, 1fr);
22
+ }
23
+ @include pattern-classes($patterns);
24
+ }
package/dist/styles/MrlBrandColors/variables.scss ADDED
@@ -0,0 +1,89 @@
1
+
2
+ $colors: (
3
+ black: rgba(var(--mrl-black), 1),
4
+ jade: #00c27a,
5
+ blue: #5887ff,
6
+ pink: #fc83ff,
7
+ red: rgba(var(--mrl-red-60), 1),
8
+ yellow: #fa0,
9
+ grape: #be53ff,
10
+ sky: #79c1ff,
11
+ lemon: #ffe146,
12
+ lavander: #e6bfff
13
+ );
14
+ $patterns: (
15
+ MrlPattern-01: (
16
+ (blue, 2),
17
+ (pink, 12),
18
+ (jade, 1),
19
+ (yellow, 8),
20
+ (red, 6),
21
+ (black, 3)
22
+ ),
23
+ MrlPattern-02: (
24
+ (blue, 3),
25
+ (black, 3),
26
+ (yellow, 1),
27
+ (red, 9),
28
+ (grape, 10),
29
+ (jade, 6)
30
+ ),
31
+ MrlPattern-03: (
32
+ (black, 3),
33
+ (lemon, 2),
34
+ (red, 6),
35
+ (pink, 12),
36
+ (jade, 6),
37
+ (sky, 4)
38
+ ),
39
+ MrlPattern-04: (
40
+ (jade, 2),
41
+ (sky, 6),
42
+ (black, 3),
43
+ (pink, 12),
44
+ (lemon, 7),
45
+ (red, 2)
46
+ ),
47
+ MrlPattern-05: (
48
+ (lavander, 3),
49
+ (jade, 6),
50
+ (black, 2),
51
+ (yellow, 12),
52
+ (blue, 7),
53
+ (red, 2)
54
+ ),
55
+ MrlPattern-06: (
56
+ (yellow, 5),
57
+ (lavander, 3),
58
+ (jade, 12),
59
+ (black, 3),
60
+ (red, 1),
61
+ (sky, 8)
62
+ )
63
+ );
64
+ $patterns-xs: (
65
+ MrlPattern-01: (
66
+ (blue, 2),
67
+ (pink, 6)
68
+ ),
69
+ MrlPattern-02: (
70
+ (red, 5),
71
+ (grape, 3)
72
+ ),
73
+ MrlPattern-03: (
74
+ (pink, 6),
75
+ (jade, 2)
76
+ ),
77
+ MrlPattern-04: (
78
+ (pink, 5),
79
+ (lemon, 3)
80
+ ),
81
+ MrlPattern-05: (
82
+ (lavander, 2),
83
+ (jade, 6)
84
+ ),
85
+ MrlPattern-06: (
86
+ (jade, 6),
87
+ (black, 2)
88
+ )
89
+ );
package/dist/styles/table/global.scss CHANGED
@@ -39,7 +39,7 @@
39
39
  }
40
40
  &.left {
41
41
  left: var(--mrl-table-selection-width);
42
- &::after {
42
+ &-shadow::after {
43
43
  border-image-outset: 0 var(--mrl-spacing-02) 0 0;
44
44
  border-image-slice: 0 100% 0 0;
45
45
  border-image-source: linear-gradient(
@@ -59,7 +59,7 @@
59
59
  }
60
60
  &.right {
61
61
  right: 0;
62
- &::before {
62
+ &-shadow::before {
63
63
  border-image-outset: 0 0 0 var(--mrl-spacing-02);
64
64
  border-image-slice: 0 0 0 100%;
65
65
  border-image-source: linear-gradient(
package/dist/styles.css CHANGED
@@ -70,8 +70,8 @@
70
70
  .mrl-u-focus-wrapper--k6Q_0{position:relative}.primary--Vz5Xk{--mrl-popover-background-color: var(--mrl-color-background);--mrl-popover-text-color: var(--mrl-color-text);--mrl-popover-text-emph-color: var(--mrl-color-text-emph)}.inverse--tA1Uc{--mrl-popover-background-color: var(--mrl-color-background-inverse);--mrl-popover-text-color: var(--mrl-color-text-inverse);--mrl-popover-text-emph-color: var(--mrl-color-text-emph)}.default--kJtD1{--mrl-popover-padding: var(--mrl-spacing-05)}.compact--IsSC7{--mrl-popover-padding: var(--mrl-spacing-04)}.MrlPopover--NHYhK{background:var(--mrl-popover-background-color);border-radius:var(--mrl-border-radius-functional-large);box-shadow:var(--mrl-shadows-raised);color:var(--mrl-popover-text-color);flex-direction:column;max-width:600px;opacity:0;overflow:hidden;padding:var(--mrl-popover-padding);pointer-events:auto;position:fixed;z-index:500;z-index:600;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.24)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.06))}.MrlPopover--NHYhK a{color:var(--mrl-popover-text-color)}.MrlPopover--submenu--NcjJf{left:97%;position:absolute}.MrlPopover--close--KxF7l{position:absolute;right:4px;top:6px;transition:none}.MrlPopover--close--KxF7l svg{color:var(--mrl-popover-text-color)}.MrlPopover--NHYhK.compact--IsSC7{padding:var(--mrl-space-stack-related)}.MrlPopover--NHYhK.open--X5O6m{display:flex}.MrlPopover--scrolling--Okepx{padding-right:0}.MrlPopover--scrolling--content--xZZhQ{overflow:hidden auto;padding-right:calc(var(--mrl-popover-padding) - 4px)}.MrlPopover--scrolling--content--xZZhQ .MrlPopover--close--KxF7l{right:8px}.MrlPopover--point--RMoNb{background:var(--mrl-popover-background-color);border-radius:0 2px;height:10px;position:absolute;width:10px;z-index:2}.MrlPopover--point--RMoNb[data-point*=bottom-]{top:-4px;transform:rotate(315deg)}.MrlPopover--point--RMoNb[data-point*=top-]{bottom:-4px;transform:rotate(315deg)}.MrlPopover--point--RMoNb[data-point=bottom-left],.MrlPopover--point--RMoNb[data-point=top-left]{left:14px}.MrlPopover--point--RMoNb[data-point=bottom-right],.MrlPopover--point--RMoNb[data-point=top-right]{right:14px}.MrlPopover--point--RMoNb[data-point=bottom-center],.MrlPopover--point--RMoNb[data-point=top-center]{left:calc(50% - 8px)}.MrlPopover--point--RMoNb[data-point*=left-]{right:-5px;transform:rotate(225deg)}.MrlPopover--point--RMoNb[data-point*=right-]{left:-5px;transform:rotate(45deg)}.MrlPopover--point--RMoNb[data-point=left-center],.MrlPopover--point--RMoNb[data-point=right-center]{top:calc(50% - 8px)}.MrlPopover--point--RMoNb[data-point=left-top],.MrlPopover--point--RMoNb[data-point=right-top]{top:16px}.MrlPopover--point--RMoNb[data-point=left-bottom],.MrlPopover--point--RMoNb[data-point=right-bottom]{bottom:16px}.inverse--tA1Uc .MrlPopover--scrolling--content--xZZhQ::-webkit-scrollbar{background-color:var(--mrl-popover-background-color);border-radius:10px;width:12px}.inverse--tA1Uc .MrlPopover--scrolling--content--xZZhQ::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--mrl-popover-text-color);border:3px solid rgba(0,0,0,0);border-radius:10px;position:relative}
71
71
  .MrlTable--WqkKm{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--vFuO8{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTable--WqkKm{width:100%}
72
72
  .MrlTable--hBgdv{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--DmN3s{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}
73
- .MrlTable--Pjlpf{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--L7e2t{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableCell--cErPC{height:var(--mrl-table-column-height);padding:var(--mrl-table-default-padding-inline);text-align:left;vertical-align:middle}.MrlTableCell--cErPC.selection{height:var(--mrl-spacing-10);min-width:2.75rem;padding:var(--mrl-spacing-02) var(--mrl-spacing-03);width:2.75rem}.MrlTableCell--cErPC.selection:has(+.MrlTableColumn--Zz9NN:hover){background-color:var(--mrl-table-row-background-hover)}.MrlTableCell--cErPC.selection .MrlCheckboxStandalone{align-items:center;display:flex;height:auto;justify-content:center;min-height:auto;padding:0;width:auto}.MrlTableCell--cErPC.sticky--undTq{background-color:var(--mrl-table-row-background);position:sticky;z-index:200}.MrlTableCell--cErPC.sticky--undTq::before,.MrlTableCell--cErPC.sticky--undTq::after{content:"";height:100%;position:absolute;top:0;width:var(--mrl-spacing-02)}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz{left:var(--mrl-table-selection-width)}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz::after{border-image-outset:0 var(--mrl-spacing-02) 0 0;border-image-slice:0 100% 0 0;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 10%) 0%, rgba(var(--mrl-black), 0%) 100%);border-image-width:0 var(--mrl-spacing-02) 0 0;right:0}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz.selection{left:0}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz.selection::after{background-image:none}.MrlTableCell--cErPC.sticky--undTq.right--lLyjv{right:0}.MrlTableCell--cErPC.sticky--undTq.right--lLyjv::before{border-image-outset:0 0 0 var(--mrl-spacing-02);border-image-slice:0 0 0 100%;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 0%) 0%, rgba(var(--mrl-black), 10%) 100%);border-image-width:0 0 0 var(--mrl-spacing-02);left:0}.MrlTableCell--cErPC.sticky--undTq.clickable--znqsE:hover{background-color:var(--mrl-table-column-background-hover)}
74
- .MrlTable--IO57x{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--Mzd7Z{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableColumn--iwJqz{height:var(--mrl-table-column-height);padding:var(--mrl-table-default-padding-inline);text-align:left;vertical-align:middle;color:var(--mrl-color-text);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-title);position:relative}.MrlTableColumn--iwJqz.selection{height:var(--mrl-spacing-10);min-width:2.75rem;padding:var(--mrl-spacing-02) var(--mrl-spacing-03);width:2.75rem}.MrlTableColumn--iwJqz.selection:has(+.MrlTableColumn--iwJqz:hover){background-color:var(--mrl-table-row-background-hover)}.MrlTableColumn--iwJqz.selection .MrlCheckboxStandalone{align-items:center;display:flex;height:auto;justify-content:center;min-height:auto;padding:0;width:auto}.MrlTableColumn--iwJqz.sticky--tVbHx{background-color:var(--mrl-table-row-background);position:sticky;z-index:200}.MrlTableColumn--iwJqz.sticky--tVbHx::before,.MrlTableColumn--iwJqz.sticky--tVbHx::after{content:"";height:100%;position:absolute;top:0;width:var(--mrl-spacing-02)}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv{left:var(--mrl-table-selection-width)}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv::after{border-image-outset:0 var(--mrl-spacing-02) 0 0;border-image-slice:0 100% 0 0;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 10%) 0%, rgba(var(--mrl-black), 0%) 100%);border-image-width:0 var(--mrl-spacing-02) 0 0;right:0}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv.selection{left:0}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv.selection::after{background-image:none}.MrlTableColumn--iwJqz.sticky--tVbHx.right--bm_ZL{right:0}.MrlTableColumn--iwJqz.sticky--tVbHx.right--bm_ZL::before{border-image-outset:0 0 0 var(--mrl-spacing-02);border-image-slice:0 0 0 100%;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 0%) 0%, rgba(var(--mrl-black), 10%) 100%);border-image-width:0 0 0 var(--mrl-spacing-02);left:0}.MrlTableColumn--iwJqz.sticky--tVbHx.clickable--Hm2c4:hover{background-color:var(--mrl-table-column-background-hover)}.MrlTableColumn--iwJqz.clickable--Hm2c4:hover{background-color:var(--mrl-table-column-background-hover);cursor:pointer;user-select:none}.MrlTableColumn--iwJqz .MrlTableColumn--tooltip{margin-left:var(--mrl-spacing-02)}.MrlTableColumn--iwJqz .MrlTableColumn--sort-indicator,.MrlTableColumn--iwJqz .MrlTableColumn--tooltip{color:var(--mrl-table-column-svg-color);vertical-align:text-top}
73
+ .MrlTable--Pjlpf{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--L7e2t{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableCell--cErPC{height:var(--mrl-table-column-height);padding:var(--mrl-table-default-padding-inline);text-align:left;vertical-align:middle}.MrlTableCell--cErPC.selection{height:var(--mrl-spacing-10);min-width:2.75rem;padding:var(--mrl-spacing-02) var(--mrl-spacing-03);width:2.75rem}.MrlTableCell--cErPC.selection:has(+.MrlTableColumn--Zz9NN:hover){background-color:var(--mrl-table-row-background-hover)}.MrlTableCell--cErPC.selection .MrlCheckboxStandalone{align-items:center;display:flex;height:auto;justify-content:center;min-height:auto;padding:0;width:auto}.MrlTableCell--cErPC.sticky--undTq{background-color:var(--mrl-table-row-background);position:sticky;z-index:200}.MrlTableCell--cErPC.sticky--undTq::before,.MrlTableCell--cErPC.sticky--undTq::after{content:"";height:100%;position:absolute;top:0;width:var(--mrl-spacing-02)}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz{left:var(--mrl-table-selection-width)}.MrlTableCell--cErPC.sticky--undTq.left-shadow--bCkNZ::after{border-image-outset:0 var(--mrl-spacing-02) 0 0;border-image-slice:0 100% 0 0;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 10%) 0%, rgba(var(--mrl-black), 0%) 100%);border-image-width:0 var(--mrl-spacing-02) 0 0;right:0}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz.selection{left:0}.MrlTableCell--cErPC.sticky--undTq.left--_e5Sz.selection::after{background-image:none}.MrlTableCell--cErPC.sticky--undTq.right--lLyjv{right:0}.MrlTableCell--cErPC.sticky--undTq.right-shadow--D7N0j::before{border-image-outset:0 0 0 var(--mrl-spacing-02);border-image-slice:0 0 0 100%;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 0%) 0%, rgba(var(--mrl-black), 10%) 100%);border-image-width:0 0 0 var(--mrl-spacing-02);left:0}.MrlTableCell--cErPC.sticky--undTq.clickable--znqsE:hover{background-color:var(--mrl-table-column-background-hover)}
74
+ .MrlTable--IO57x{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--Mzd7Z{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableColumn--iwJqz{height:var(--mrl-table-column-height);padding:var(--mrl-table-default-padding-inline);text-align:left;vertical-align:middle;color:var(--mrl-color-text);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-title);position:relative}.MrlTableColumn--iwJqz.selection{height:var(--mrl-spacing-10);min-width:2.75rem;padding:var(--mrl-spacing-02) var(--mrl-spacing-03);width:2.75rem}.MrlTableColumn--iwJqz.selection:has(+.MrlTableColumn--iwJqz:hover){background-color:var(--mrl-table-row-background-hover)}.MrlTableColumn--iwJqz.selection .MrlCheckboxStandalone{align-items:center;display:flex;height:auto;justify-content:center;min-height:auto;padding:0;width:auto}.MrlTableColumn--iwJqz.sticky--tVbHx{background-color:var(--mrl-table-row-background);position:sticky;z-index:200}.MrlTableColumn--iwJqz.sticky--tVbHx::before,.MrlTableColumn--iwJqz.sticky--tVbHx::after{content:"";height:100%;position:absolute;top:0;width:var(--mrl-spacing-02)}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv{left:var(--mrl-table-selection-width)}.MrlTableColumn--iwJqz.sticky--tVbHx.left-shadow--bVt2A::after{border-image-outset:0 var(--mrl-spacing-02) 0 0;border-image-slice:0 100% 0 0;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 10%) 0%, rgba(var(--mrl-black), 0%) 100%);border-image-width:0 var(--mrl-spacing-02) 0 0;right:0}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv.selection{left:0}.MrlTableColumn--iwJqz.sticky--tVbHx.left--OUfZv.selection::after{background-image:none}.MrlTableColumn--iwJqz.sticky--tVbHx.right--bm_ZL{right:0}.MrlTableColumn--iwJqz.sticky--tVbHx.right-shadow--ENyOa::before{border-image-outset:0 0 0 var(--mrl-spacing-02);border-image-slice:0 0 0 100%;border-image-source:linear-gradient(90deg, rgba(var(--mrl-black), 0%) 0%, rgba(var(--mrl-black), 10%) 100%);border-image-width:0 0 0 var(--mrl-spacing-02);left:0}.MrlTableColumn--iwJqz.sticky--tVbHx.clickable--Hm2c4:hover{background-color:var(--mrl-table-column-background-hover)}.MrlTableColumn--iwJqz.clickable--Hm2c4:hover{background-color:var(--mrl-table-column-background-hover);cursor:pointer;user-select:none}.MrlTableColumn--iwJqz .MrlTableColumn--tooltip{margin-left:var(--mrl-spacing-02)}.MrlTableColumn--iwJqz .MrlTableColumn--sort-indicator,.MrlTableColumn--iwJqz .MrlTableColumn--tooltip{color:var(--mrl-table-column-svg-color);vertical-align:text-top}
75
75
  .MrlTable--rQtCh{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--n28A8{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableHeader--XRtgB{background-color:var(--mrl-color-background);border-bottom:var(--mrl-table-header-row-border-bottom)}
76
76
  .MrlTable--Menop{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--EMdMH{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.mrl-u-focus-wrapper--a4h9J{position:relative}.MrlTableRow--vJGYJ{background-color:var(--mrl-table-row-background);border-bottom:var(--mrl-table-row-border-bottom);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-text);height:var(--mrl-table-row-height);outline:none}.MrlTableRow--vJGYJ:hover:not(.MrlTableRow--selected)>td{background-color:var(--mrl-table-row-background-hover)}.MrlTableRow--vJGYJ:focus-visible{position:relative}.MrlTableRow--vJGYJ:focus-visible:focus-visible{outline:none}.MrlTableRow--vJGYJ:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--vE0v9;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--vE0v9{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--fLkd9{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}
77
77
  .MrlTable--SmJkA{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--Ub9_k{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableEmptyState--Ub9_k{align-items:center;background-color:var(--mrl-black-opacity-00);color:var(--mrl-color-text-secondary);display:flex;font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-text);justify-content:center;min-height:var(--mrl-table-empty-state-min-height);padding-block:var(--mrl-table-empty-state-padding-block);padding-inline:var(--mrl-table-empty-state-padding-block)}
@@ -90,3 +90,4 @@
90
90
  .MrlPanelStickyHeader--I1FiZ{background-color:var(--mrl-color-background);position:sticky;top:0}.MrlPanelStickyHeader--I1FiZ::after{background:var(--mrl-color-background);content:"";display:block;inset:0 calc(-1*var(--mrl-spacing-03));pointer-events:all;position:absolute;z-index:-1}
91
91
  .MrlToolbar--Lrhb6{align-items:center;background:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);cursor:default;display:flex;gap:var(--mrl-spacing-02);min-height:3rem;padding:var(--mrl-spacing-03);pointer-events:all;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m3)}.MrlToolbar-inverse--OwdSd{background:var(--mrl-color-background-inverse);box-shadow:none;color:var(--mrl-color-text-inverse)}.MrlToolbar-skeleton--eWZQv.MrlToolbar-vertical--hO8hj{background-color:rgba(var(--mrl-gray-30), 1)}.MrlToolbar-medium--FKg7Y{gap:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));min-height:3.5rem;padding:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01))}.MrlToolbar-xsmall--St9Ez{gap:var(--mrl-spacing-01);min-height:2rem;padding:var(--mrl-spacing-02)}.MrlToolbar-vertical--hO8hj{flex-direction:column;min-height:0;min-width:3rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-medium--FKg7Y{min-width:3.5rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-xsmall--St9Ez{min-width:2rem}.MrlToolbar-spaced--gmE0X{gap:var(--mrl-spacing-05);padding-left:var(--mrl-spacing-05)}.MrlToolbar-spaced--gmE0X .mrlButton--Oymf3+.mrlButton--Oymf3{margin-left:calc(var(--mrl-spacing-03)/2*-1)}
92
92
  .MrlToolbarButtonIcon--Oetsi{margin-right:var(--mrl-spacing-03)}
93
+ .MrlBrandColor-black--Tkumf{background-color:rgba(var(--mrl-black), 1);grid-area:black}.MrlBrandColor-jade--g4zLB{background-color:#00c27a;grid-area:jade}.MrlBrandColor-blue--NZ8Mv{background-color:#5887ff;grid-area:blue}.MrlBrandColor-pink--zk3Hh{background-color:#fc83ff;grid-area:pink}.MrlBrandColor-red--EAkFV{background-color:rgba(var(--mrl-red-60), 1);grid-area:red}.MrlBrandColor-yellow--eLxiI{background-color:#fa0;grid-area:yellow}.MrlBrandColor-grape--jIQbg{background-color:#be53ff;grid-area:grape}.MrlBrandColor-sky--Pxh7U{background-color:#79c1ff;grid-area:sky}.MrlBrandColor-lemon--mLsko{background-color:#ffe146;grid-area:lemon}.MrlBrandColor-lavander--de18C{background-color:#e6bfff;grid-area:lavander}.MrlBrandColors--kwFlI{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:1fr;height:15rem;width:100%}.MrlPattern-01--FIK5B{grid-template-areas:" blue blue pink pink pink pink pink pink"}.MrlPattern-02--xxmfG{grid-template-areas:" red red red red red grape grape grape"}.MrlPattern-03--fbJXJ{grid-template-areas:" pink pink pink pink pink pink jade jade"}.MrlPattern-04--vm9Du{grid-template-areas:" pink pink pink pink pink lemon lemon lemon"}.MrlPattern-05--S6ARq{grid-template-areas:" lavander lavander jade jade jade jade jade jade"}.MrlPattern-06--pXY2r{grid-template-areas:" jade jade jade jade jade jade black black"}@media(min-width: 37.5rem){.MrlBrandColors--kwFlI{grid-template-columns:repeat(32, 1fr)}.MrlPattern-01--FIK5B{grid-template-areas:" blue blue pink pink pink pink pink pink pink pink pink pink pink pink jade yellow yellow yellow yellow yellow yellow yellow yellow red red red red red red black black black"}.MrlPattern-02--xxmfG{grid-template-areas:" blue blue blue black black black yellow red red red red red red red red red grape grape grape grape grape grape grape grape grape grape jade jade jade jade jade jade"}.MrlPattern-03--fbJXJ{grid-template-areas:" black black black lemon lemon red red red red red red pink pink pink pink pink pink pink pink pink pink pink pink jade jade jade jade jade jade sky sky sky sky"}.MrlPattern-04--vm9Du{grid-template-areas:" jade jade sky sky sky sky sky sky black black black pink pink pink pink pink pink pink pink pink pink pink pink lemon lemon lemon lemon lemon lemon lemon red red"}.MrlPattern-05--S6ARq{grid-template-areas:" lavander lavander lavander jade jade jade jade jade jade black black yellow yellow yellow yellow yellow yellow yellow yellow yellow yellow yellow yellow blue blue blue blue blue blue blue red red"}.MrlPattern-06--pXY2r{grid-template-areas:" yellow yellow yellow yellow yellow lavander lavander lavander jade jade jade jade jade jade jade jade jade jade jade jade black black black red sky sky sky sky sky sky sky sky"}}
package/dist/utils/getScrollableContainer/getScrollableContainer.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Get the scrollable container of an element
3
+ *
4
+ * @param element - the element you want to get the scrollable container of
5
+ * @returns - the scrollable container
6
+ */
7
+ export declare const getScrollableContainer: (element: HTMLElement) => HTMLElement;
package/dist/utils/hasHorizontalScroll/hasHorizontalScroll.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ export type HasHorizontalScrollReturn = {
2
+ hasScrollLeft: boolean;
3
+ hasScrollRight: boolean;
4
+ };
5
+ /**
6
+ * Test if an element has scrollable content in the horizontal axis
7
+ *
8
+ * @param element - the element that is scrollable
9
+ * @returns - object with hasScrollLeft and hasScrollRight properties
10
+ */
11
+ export declare const hasHorizontalScroll: (element: HTMLElement) => HasHorizontalScrollReturn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "4.2.3",
3
+ "version": "4.4.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",