@muraldevkit/ui-toolkit 2.77.0-dev-z3RD.1 → 2.77.1-dev-kjoR.1

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 (15) hide show
  1. package/dist/components/form/textarea/MrlTextarea/MrlTextarea.d.ts +1 -3
  2. package/dist/components/notification/MrlInlineNotification/MrlInlineNotification.d.ts +37 -0
  3. package/dist/components/notification/MrlInlineNotification/index.d.ts +1 -0
  4. package/dist/components/notification/index.d.ts +1 -0
  5. package/dist/components/panel/MrlPanel/MrlPanel.d.ts +10 -0
  6. package/dist/index.js +1 -1
  7. package/dist/styles/MrlEditableTextInput/module.scss +3 -3
  8. package/dist/styles/MrlEditableTextarea/global.scss +3 -2
  9. package/dist/styles/MrlInlineNotification/module.scss +34 -0
  10. package/dist/styles/MrlPanel/module.scss +29 -5
  11. package/dist/styles/MrlTextInput/module.scss +3 -3
  12. package/dist/styles/MrlTextarea/global.scss +3 -2
  13. package/dist/styles/MrlTextarea/module.scss +0 -6
  14. package/dist/styles/form/global.scss +0 -1
  15. package/package.json +1 -1
package/dist/styles/MrlEditableTextInput/module.scss CHANGED
@@ -5,14 +5,14 @@
5
5
  .MrlEditableTextInput {
6
6
  @include mrl-text-inputs;
7
7
  @include mrl-text-inputs-read-only;
8
- @include mrl-focus($is-inline-element: 'true');
8
+ @include mrl-focus($style: 'outline');
9
9
  &:not(:disabled):read-only {
10
10
  color: var(--mrl-text-input-color-read-only);
11
11
  pointer-events: auto;
12
12
  --mrl-text-input-background: none;
13
13
  }
14
- &.mrl-u-focus-wrapper {
15
- height: 100%;
14
+ &--wrapper {
15
+ position: relative;
16
16
  }
17
17
  &::-ms-clear,
18
18
  &::-ms-reveal {
package/dist/styles/MrlEditableTextarea/global.scss CHANGED
@@ -3,13 +3,14 @@
3
3
  @use '../../forms.global.scss' as *;
4
4
  @use '../../forms.variables.scss';
5
5
  .MrlEditableTextarea {
6
- @include mrl-focus($is-inline-element: 'true');
6
+ @include mrl-focus($style: 'outline');
7
7
  &:not(:disabled):read-only {
8
8
  --mrl-text-input-background: none;
9
9
  color: var(--mrl-text-input-color-read-only);
10
10
  }
11
11
  }
12
- .MrlEditableTextarea-focus-wrapper {
12
+ .MrlEditableTextarea--wrapper {
13
13
  display: flex;
14
14
  flex-direction: column;
15
+ position: relative;
15
16
  }
package/dist/styles/MrlInlineNotification/module.scss ADDED
@@ -0,0 +1,34 @@
1
+ .MrlInlineNotification {
2
+ display: flex;
3
+ font-size: var(--mrl-font-size-03);
4
+ font-weight: var(--mrl-font-weight-02);
5
+ margin-top: var(--mrl-spacing-02);
6
+ &.error {
7
+ color: var(--mrl-color-text-error);
8
+ }
9
+ &.information {
10
+ color: var(--mrl-color-text-highlight-emph);
11
+ :global(.MrlSvgContainer) {
12
+ color: var(--mrl-color-background-info);
13
+ }
14
+ }
15
+ &.warning {
16
+ color: var(--mrl-color-text-highlight-emph);
17
+ :global(.MrlSvgContainer) {
18
+ color: var(--mrl-color-background-warning);
19
+ }
20
+ }
21
+ &.success {
22
+ :global(.MrlSvgContainer) {
23
+ color: var(--mrl-color-text-success);
24
+ }
25
+ }
26
+ &.helper {
27
+ color: var(--mrl-color-text-secondary);
28
+ }
29
+ &-icon {
30
+ height: var(--mrl-spacing-05);
31
+ margin-right: var(--mrl-spacing-02);
32
+ width: var(--mrl-spacing-05);
33
+ }
34
+ }
package/dist/styles/MrlPanel/module.scss CHANGED
@@ -9,13 +9,31 @@ $mrl-panel-width: 16.75rem;
9
9
  height: auto;
10
10
  max-height: 100%;
11
11
  overflow: hidden;
12
- padding: var(--mrl-spacing-06) 0;
12
+ padding: var(--mrl-spacing-06) 0 0 0;
13
13
  pointer-events: auto;
14
14
  position: relative;
15
15
  width: $mrl-panel-width;
16
16
  z-index: $mrl-zIndex-panels;
17
- .MrlPanel--title {
18
- padding-left: var(--mrl-spacing-06);
17
+ .MrlPanel--header-content {
18
+ margin-bottom: calc(var(--mrl-spacing-06) - var(--mrl-spacing-01));
19
+ padding: 0 var(--mrl-spacing-09) 0 var(--mrl-spacing-06);
20
+ &.MrlPanel--header-content-description {
21
+ margin-bottom: calc(var(--mrl-spacing-04) - var(--mrl-spacing-01));
22
+ }
23
+ .MrlPanel--title {
24
+ height: auto;
25
+ }
26
+ .MrlPanel--top-actions {
27
+ align-items: center;
28
+ display: flex;
29
+ justify-content: center;
30
+ position: absolute;
31
+ right: var(--mrl-spacing-10);
32
+ top: var(--mrl-spacing-04);
33
+ }
34
+ .MrlPanel--top-actions-divider {
35
+ align-self: auto;
36
+ }
19
37
  }
20
38
  .MrlPanel--close {
21
39
  position: absolute;
@@ -24,15 +42,21 @@ $mrl-panel-width: 16.75rem;
24
42
  }
25
43
  }
26
44
  .MrlPanel--scrollable {
27
- margin-top: var(--mrl-spacing-04);
28
45
  outline: none;
29
46
  overflow-x: clip;
30
47
  overflow-y: scroll;
31
48
  overflow-y: overlay;
32
49
  padding-left: var(--mrl-spacing-06);
33
50
  padding-right: var(--mrl-spacing-06);
51
+ padding-top: var(--mrl-spacing-01);
52
+ &:focus-visible {
53
+ outline: var(--mrl-spacing-01) var(--mrl-color-focus) solid;
54
+ }
55
+ &.MrlPanel--scrollable-has-sticky-header {
56
+ padding-top: 0;
57
+ }
34
58
  .MrlPanel--description {
35
- margin-bottom: var(--mrl-space-stack-title-related);
59
+ margin-bottom: var(--mrl-spacing-06);
36
60
  padding-right: var(--mrl-space-inset-container-large);
37
61
  }
38
62
  }
package/dist/styles/MrlTextInput/module.scss CHANGED
@@ -5,9 +5,9 @@
5
5
  .MrlTextInput {
6
6
  @include mrl-text-inputs;
7
7
  @include mrl-text-inputs-read-only;
8
- @include mrl-focus($is-inline-element: 'true');
9
- &.mrl-u-focus-wrapper {
10
- height: 100%;
8
+ @include mrl-focus($style: 'outline');
9
+ &--wrapper {
10
+ position: relative;
11
11
  }
12
12
  &::-ms-clear,
13
13
  &::-ms-reveal {
package/dist/styles/MrlTextarea/global.scss CHANGED
@@ -3,9 +3,10 @@
3
3
  @use '../../forms.global.scss' as *;
4
4
  @use '../../forms.variables.scss';
5
5
  .MrlTextarea {
6
- @include mrl-focus($is-inline-element: 'true');
6
+ @include mrl-focus($style: 'outline');
7
7
  }
8
- .MrlTextarea-focus-wrapper {
8
+ .MrlTextarea--wrapper {
9
9
  display: flex;
10
10
  flex-direction: column;
11
+ position: relative;
11
12
  }
package/dist/styles/MrlTextarea/module.scss CHANGED
@@ -5,10 +5,4 @@
5
5
  .MrlTextarea {
6
6
  @include mrl-text-inputs;
7
7
  resize: vertical;
8
- &--autoExpand {
9
- display: block;
10
- max-height: 120px;
11
- overflow: hidden;
12
- resize: none;
13
- }
14
8
  }
package/dist/styles/form/global.scss CHANGED
@@ -16,7 +16,6 @@
16
16
  border-color var(--mrl-duration-03) var(--mrl-timing-m2),
17
17
  color var(--mrl-duration-03) var(--mrl-timing-m2);
18
18
  width: 100%;
19
- z-index: $mrl-zIndex-focus + 1;
20
19
  &::placeholder {
21
20
  color: var(--mrl-text-input-placeholder-color);
22
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.77.0-dev-z3RD.1",
3
+ "version": "2.77.1-dev-kjoR.1",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",