@lucca-front/scss 20.3.0-rc.2 → 20.3.0-rc.3

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 (70) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/config.scss +1 -1
  4. package/src/components/_sample/index.scss +1 -1
  5. package/src/components/breadcrumbs/index.scss +1 -1
  6. package/src/components/button/index.scss +1 -1
  7. package/src/components/calendar/index.scss +1 -1
  8. package/src/components/calloutDisclosure/index.scss +1 -1
  9. package/src/components/card/component.scss +1 -0
  10. package/src/components/card/index.scss +4 -2
  11. package/src/components/card/mods.scss +31 -0
  12. package/src/components/checkbox/index.scss +1 -1
  13. package/src/components/checkboxField/index.scss +2 -2
  14. package/src/components/chip/index.scss +1 -1
  15. package/src/components/clear/index.scss +1 -1
  16. package/src/components/collapse/index.scss +1 -1
  17. package/src/components/dataTable/index.scss +2 -2
  18. package/src/components/dataTableSticked/index.scss +1 -1
  19. package/src/components/dropdown/component.scss +43 -17
  20. package/src/components/dropdown/index.scss +5 -4
  21. package/src/components/dropdown/mods.scss +4 -4
  22. package/src/components/dropdown/states.scss +4 -3
  23. package/src/components/dropdown/vars.scss +8 -6
  24. package/src/components/field/index.scss +5 -5
  25. package/src/components/fieldset/index.scss +1 -1
  26. package/src/components/file/index.scss +2 -2
  27. package/src/components/fileEntry/index.scss +1 -1
  28. package/src/components/fileUpload/index.scss +1 -1
  29. package/src/components/filterPill/index.scss +2 -2
  30. package/src/components/form/index.scss +5 -5
  31. package/src/components/form/mods.scss +1 -1
  32. package/src/components/formLabel/index.scss +1 -1
  33. package/src/components/gauge/index.scss +1 -1
  34. package/src/components/header/index.scss +1 -1
  35. package/src/components/horizontalNavigation/index.scss +1 -1
  36. package/src/components/indexTable/index.scss +1 -1
  37. package/src/components/inlineMessage/index.scss +1 -1
  38. package/src/components/inputFramed/index.scss +1 -1
  39. package/src/components/layout/index.scss +1 -1
  40. package/src/components/link/index.scss +1 -1
  41. package/src/components/listboxOption/index.scss +3 -3
  42. package/src/components/main/index.scss +1 -1
  43. package/src/components/multiSelect/index.scss +18 -4
  44. package/src/components/multiSelect/mods.scss +0 -8
  45. package/src/components/multiSelect/states.scss +8 -0
  46. package/src/components/navside/index.scss +4 -4
  47. package/src/components/numericBadge/index.scss +1 -1
  48. package/src/components/pagination/index.scss +1 -1
  49. package/src/components/popover/component.scss +0 -17
  50. package/src/components/progress/index.scss +1 -1
  51. package/src/components/radio/index.scss +1 -1
  52. package/src/components/radioButtons/index.scss +1 -1
  53. package/src/components/radioField/index.scss +1 -1
  54. package/src/components/readMore/index.scss +1 -1
  55. package/src/components/richText/index.scss +1 -1
  56. package/src/components/scrollBox/index.scss +1 -1
  57. package/src/components/segmentedControl/index.scss +3 -3
  58. package/src/components/simpleSelect/index.scss +2 -2
  59. package/src/components/skeleton/index.scss +1 -1
  60. package/src/components/switch/index.scss +1 -1
  61. package/src/components/switchField/index.scss +1 -1
  62. package/src/components/tableOfContent/index.scss +1 -1
  63. package/src/components/tableSortable/index.scss +1 -1
  64. package/src/components/tag/index.scss +1 -1
  65. package/src/components/textField/index.scss +1 -1
  66. package/src/components/textfields/index.scss +4 -4
  67. package/src/components/timeline/index.scss +1 -1
  68. package/src/components/timepicker/index.scss +1 -1
  69. package/src/components/tooltip/index.scss +1 -1
  70. package/src/components/verticalNavigation/index.scss +2 -2
package/src/components/listboxOption/index.scss CHANGED
@@ -53,7 +53,7 @@
53
53
  }
54
54
  }
55
55
 
56
- @layer states {
56
+ @layer mods {
57
57
  &[aria-selected="true"],
58
58
  &[aria-checked="true"] {
59
59
  > .listboxOption-content {
@@ -94,7 +94,7 @@
94
94
  @include varsContent;
95
95
  }
96
96
 
97
- @layer states {
97
+ @layer mods {
98
98
  &.is-hovered,
99
99
  &:hover {
100
100
  @include hover;
@@ -120,7 +120,7 @@
120
120
  }
121
121
  }
122
122
 
123
- @layer states {
123
+ @layer mods {
124
124
  &[aria-busy="true"] {
125
125
  @include busy;
126
126
  }
package/src/components/main/index.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .main {
4
- @layer states {
4
+ @layer mods {
5
5
  &:is(.is-notScrollable, .notScrollable) {
6
6
  @include notScrollable;
7
7
  }
package/src/components/multiSelect/index.scss CHANGED
@@ -6,17 +6,31 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer mods {
10
- &.mod-S {
9
+ &.mod-S {
10
+ @layer mods {
11
11
  @include S;
12
12
  }
13
+ }
13
14
 
14
- &.mod-filterPill {
15
+ &.mod-filterPill {
16
+ @layer mods {
15
17
  @include filterPill;
16
18
  }
19
+
20
+ @layer mods {
21
+ &:has(.multipleSelect-displayer-search:focus-visible) {
22
+ @include filterPillFocused;
23
+ }
24
+
25
+ .multipleSelect-displayer {
26
+ &:has(.multipleSelect-displayer-search:focus-visible) {
27
+ @include filterPillDisplayerFocused;
28
+ }
29
+ }
30
+ }
17
31
  }
18
32
 
19
- @layer states {
33
+ @layer mods {
20
34
  &.is-selected {
21
35
  @include selected;
22
36
  }
package/src/components/multiSelect/mods.scss CHANGED
@@ -73,20 +73,12 @@
73
73
  inline-size: 21rem;
74
74
  max-inline-size: calc(100vw - 2.5rem);
75
75
 
76
- &:has(.multipleSelect-displayer-search:focus-visible) {
77
- outline: none;
78
- }
79
-
80
76
  .multipleSelect-displayer {
81
77
  box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
82
78
  border-radius: var(--pr-t-border-radius-input);
83
79
  padding: var(--components-multiSelect-padding);
84
80
  z-index: 1;
85
81
  position: relative;
86
-
87
- &:has(.multipleSelect-displayer-search:focus-visible) {
88
- @include a11y.focusVisible($offset: 3px);
89
- }
90
82
  }
91
83
 
92
84
  .lu-picker-content {
package/src/components/multiSelect/states.scss CHANGED
@@ -59,3 +59,11 @@
59
59
  }
60
60
  }
61
61
  }
62
+
63
+ @mixin filterPillFocused {
64
+ outline: none;
65
+ }
66
+
67
+ @mixin filterPillDisplayerFocused {
68
+ @include a11y.focusVisible($offset: 3px);
69
+ }
package/src/components/navside/index.scss CHANGED
@@ -46,7 +46,7 @@
46
46
  }
47
47
  }
48
48
 
49
- @layer states {
49
+ @layer mods {
50
50
  @include media.max('S') {
51
51
  &:not(.is-open, .open) {
52
52
  .navSide-item {
@@ -86,7 +86,7 @@
86
86
  }
87
87
  }
88
88
 
89
- @layer states {
89
+ @layer mods {
90
90
  &:not(.is-open) {
91
91
  @include notOpen;
92
92
  }
@@ -109,7 +109,7 @@
109
109
 
110
110
  .navSide-item-subMenu-link,
111
111
  .navSide-item-link {
112
- @layer states {
112
+ @layer mods {
113
113
  &:is(.is-active, .active) {
114
114
  @include active;
115
115
  }
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  html {
124
- @layer states {
124
+ @layer mods {
125
125
  &:is(.hasMenu, .withMenu) {
126
126
  @include media.max('S') {
127
127
  @include overlay;
package/src/components/numericBadge/index.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  }
17
17
  }
18
18
 
19
- @layer states {
19
+ @layer mods {
20
20
  &.is-loading {
21
21
  @include loading;
22
22
 
package/src/components/pagination/index.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  .pagination-navigation-item {
17
- @layer states {
17
+ @layer mods {
18
18
  &:is(.is-ellipsis, .ellipsis) {
19
19
  @include ellipsis;
20
20
  }
package/src/components/popover/component.scss CHANGED
@@ -36,23 +36,6 @@
36
36
  .popover-contentOptional {
37
37
  padding: var(--components-popover-padding);
38
38
  }
39
-
40
- .popover-close {
41
- @include button.outlined;
42
- @include button.XS;
43
- @include button.onlyIconXS;
44
-
45
- padding: 0;
46
- border-radius: 50%;
47
- position: absolute;
48
- inset-inline-start: calc(var(--pr-t-spacings-100) * -1);
49
- inset-block-start: calc(var(--pr-t-spacings-100) * -1);
50
- z-index: 2;
51
-
52
- &:not(:focus-visible) {
53
- @include a11y.mask;
54
- }
55
- }
56
39
  }
57
40
 
58
41
  @keyframes popup {
package/src/components/progress/index.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
  }
14
14
 
15
- @layer states {
15
+ @layer mods {
16
16
  &:is(.is-success, .success, .palette-success) {
17
17
  @include success;
18
18
  }
package/src/components/radio/index.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  .radio-input {
21
- @layer states {
21
+ @layer mods {
22
22
  &[disabled],
23
23
  &[read-only] {
24
24
  @include disabled;
package/src/components/radioButtons/index.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  .radioButtons-item-input {
21
- @layer states {
21
+ @layer mods {
22
22
  &:is(:disabled, .is-disabled, .disabled) {
23
23
  @include disabled;
24
24
  }
package/src/components/radioField/index.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  .radioField-input {
17
- @layer states {
17
+ @layer mods {
18
18
  &:focus-visible {
19
19
  @include focusVisible;
20
20
  }
package/src/components/readMore/index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer states {
9
+ @layer mods {
10
10
  &:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
11
11
  @include expanded;
12
12
  }
package/src/components/richText/index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer states {
9
+ @layer mods {
10
10
  &:hover {
11
11
  @include hover;
12
12
  }
package/src/components/scrollBox/index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer states {
9
+ @layer mods {
10
10
  &.is-firstVisible {
11
11
  @include firstVisible;
12
12
  }
package/src/components/segmentedControl/index.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  // .viewTabs-item-tab is deprecated
28
28
  .segmentedControl-item-action,
29
29
  .viewTabs-item-tab {
30
- @layer states {
30
+ @layer mods {
31
31
  .segmentedControl-item-input:checked + &,
32
32
  &[aria-selected='true'] {
33
33
  @include selected;
@@ -37,7 +37,7 @@
37
37
 
38
38
  .segmentedControl-item-action:disabled,
39
39
  .segmentedControl-item-input:disabled ~ .segmentedControl-item-action {
40
- @layer states {
40
+ @layer mods {
41
41
  @include disabled;
42
42
  }
43
43
  }
@@ -45,7 +45,7 @@
45
45
  // .viewTabs_panel is deprecated
46
46
  .segmentedControl_panel,
47
47
  .viewTabs_panel {
48
- @layer states {
48
+ @layer mods {
49
49
  &:not(.is-active, .active) {
50
50
  @include panelInactive;
51
51
  }
package/src/components/simpleSelect/index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer states {
9
+ @layer mods {
10
10
  &:has(.simpleSelect-field-input:focus-visible) {
11
11
  @include focused;
12
12
 
@@ -47,7 +47,7 @@
47
47
  }
48
48
  }
49
49
 
50
- @layer states {
50
+ @layer mods {
51
51
  &.is-searchFilled {
52
52
  @include searchFilled;
53
53
  }
package/src/components/skeleton/index.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  }
14
14
  }
15
15
 
16
- @layer states {
16
+ @layer mods {
17
17
  &.is-loading {
18
18
  @include loading;
19
19
 
package/src/components/switch/index.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
 
20
- @layer states {
20
+ @layer mods {
21
21
  .switch-input {
22
22
  &:is(:checked) {
23
23
  @include checked;
package/src/components/switchField/index.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  .switchField-input {
17
- @layer states {
17
+ @layer mods {
18
18
  &:checked {
19
19
  @include checked;
20
20
  }
package/src/components/tableOfContent/index.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .tableOfContent-list-item-action {
11
- @layer states {
11
+ @layer mods {
12
12
  &:not(.disabled, .is-disabled, [disabled]) {
13
13
  &:is(:hover) {
14
14
  @include hover;
package/src/components/tableSortable/index.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  }
25
25
  }
26
26
 
27
- @layer states {
27
+ @layer mods {
28
28
  &[aria-sort='ascending'] {
29
29
  .tableSortable{
30
30
  @include sortAscending;
package/src/components/tag/index.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
  }
32
32
 
33
- @layer states {
33
+ @layer mods {
34
34
  &.mod-disabled {
35
35
  @include disabled;
36
36
  }
package/src/components/textField/index.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  }
21
21
  }
22
22
 
23
- @layer states {
23
+ @layer mods {
24
24
  &.is-invalid,
25
25
  &:has(.textField-input-value[aria-invalid='true']) {
26
26
  @include invalid;
package/src/components/textfields/index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer states {
9
+ @layer mods {
10
10
  .textfield-input {
11
11
  &:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
12
12
  @include inputDisabled;
@@ -227,7 +227,7 @@
227
227
  }
228
228
  }
229
229
 
230
- @layer states {
230
+ @layer mods {
231
231
  &.mod-material {
232
232
  .textfield-input {
233
233
  &:is(:focus, .is-focused, .focused) {
@@ -266,7 +266,7 @@
266
266
  }
267
267
  }
268
268
 
269
- @layer states {
269
+ @layer mods {
270
270
  .textfield-input {
271
271
  &:is(:hover) {
272
272
  @include inputHover;
@@ -311,7 +311,7 @@
311
311
  }
312
312
  }
313
313
 
314
- @layer states {
314
+ @layer mods {
315
315
  .textfield.mod-framed,
316
316
  .form.mod-framed .textfield {
317
317
  &:is(.is-error, .error) {
package/src/components/timeline/index.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .timeline-step {
4
- @layer states {
4
+ @layer mods {
5
5
  &:is([aria-current='step']) {
6
6
  @include current;
7
7
  }
package/src/components/timepicker/index.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
  }
23
23
 
24
- @layer states {
24
+ @layer mods {
25
25
  &:has([aria-invalid='true']) {
26
26
  @include invalid;
27
27
  }
package/src/components/tooltip/index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include component;
7
7
  }
8
8
 
9
- @layer states {
9
+ @layer mods {
10
10
  &.is-above {
11
11
  @include above;
12
12
  }
package/src/components/verticalNavigation/index.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .verticalNavigation-list-item-link {
25
- @layer states {
25
+ @layer mods {
26
26
  &[aria-expanded='true'] {
27
27
  @include expanded;
28
28
  }
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  span.verticalNavigation-list-item-link {
42
- @layer states {
42
+ @layer mods {
43
43
  @include disabled;
44
44
  }
45
45
  }