@ethlete/components 1.0.0-next.73 → 1.0.0-next.75

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 (47) hide show
  1. package/CHANGELOG.md +76 -0
  2. package/design/form-field.ts +1 -0
  3. package/design/select.ts +1 -1
  4. package/fesm2022/ethlete-components.mjs +1283 -711
  5. package/fesm2022/ethlete-components.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/lib/accordion/accordion.component.css +40 -24
  8. package/src/lib/carousel/carousel-transition-styles.component.css +1 -1
  9. package/src/lib/carousel/carousel.component.css +16 -0
  10. package/src/lib/command-palette/command-palette-item.component.css +4 -0
  11. package/src/lib/command-palette/command-palette.component.css +48 -0
  12. package/src/lib/divider/divider.component.css +7 -3
  13. package/src/lib/forms/cascader/cascader-panel.component.css +4 -6
  14. package/src/lib/forms/color-input/color-picker-panel.component.css +1 -1
  15. package/src/lib/forms/date-time/date-picker-panel.component.css +3 -41
  16. package/src/lib/forms/form-field/form-field-control-suffix-styles.component.css +49 -0
  17. package/src/lib/forms/form-field/form-field-suffix-overlap-styles.component.css +27 -0
  18. package/src/lib/forms/form-field/form-field-text-shell-styles.component.css +9 -12
  19. package/src/lib/forms/rich-text-editor/rich-text-editor-token-popup.component.css +4 -0
  20. package/src/lib/forms/select/select-option-group.component.css +4 -3
  21. package/src/lib/forms/select/select-option-styles.component.css +5 -0
  22. package/src/lib/forms/select/select-panel.component.css +14 -6
  23. package/src/lib/forms/select/select.component.css +77 -10
  24. package/src/lib/loader/progress-bar/progress-bar.component.css +1 -0
  25. package/src/lib/menu/menu-search-styles.component.css +27 -0
  26. package/src/lib/menu/menu.component.css +3 -7
  27. package/src/lib/notification/notification.component.css +4 -0
  28. package/src/lib/overlay/floating-panel-styles.component.css +2 -57
  29. package/src/lib/overlay/floating-tip-styles.component.css +0 -3
  30. package/src/lib/overlay/routing/overlay-router-outlet.component.css +8 -0
  31. package/src/lib/overlay/sidebar/overlay-sidebar.component.css +8 -1
  32. package/src/lib/overlay/strategies/anchored-dialog-styles.component.css +27 -0
  33. package/src/lib/overlay/strategies/dialog-styles.component.css +27 -0
  34. package/src/lib/overlay/strategies/full-screen-dialog-styles.component.css +58 -0
  35. package/src/lib/overlay/strategies/overlay-origin-clone.component.css +29 -0
  36. package/src/lib/overlay/strategies/sheet-styles.component.css +8 -0
  37. package/src/lib/pagination/page-size-select.component.css +0 -96
  38. package/src/lib/pagination/pagination.component.css +1 -22
  39. package/src/lib/progress-steps/progress-step.component.css +6 -0
  40. package/src/lib/scheduler/scheduler-agenda-view.component.css +9 -0
  41. package/src/lib/scheduler/scheduler-time-grid-view.component.css +5 -0
  42. package/src/lib/scrollable/headless/scrollable-buttons.component.css +8 -1
  43. package/src/lib/scrollable/headless/scrollable-footer.css +12 -0
  44. package/src/lib/scrollable/headless/scrollable-masks.component.css +37 -0
  45. package/src/lib/scrollbar/scrollbar.component.css +8 -2
  46. package/types/ethlete-components.d.ts +92 -28
  47. /package/src/lib/loader/spinner/{spinner.component.css → spinner-styles.component.css} +0 -0
package/src/lib/scheduler/scheduler-agenda-view.component.css CHANGED
@@ -2,7 +2,16 @@
2
2
  .et-scheduler-agenda-view {
3
3
  display: flex;
4
4
  flex-direction: column;
5
+ position: relative;
6
+ min-block-size: 0;
7
+ }
8
+
9
+ .et-scheduler-agenda-view-scroller {
10
+ display: flex;
11
+ flex: 1;
12
+ flex-direction: column;
5
13
  gap: 12px;
14
+ min-block-size: 0;
6
15
  overflow-y: auto;
7
16
  }
8
17
 
package/src/lib/scheduler/scheduler-time-grid-view.component.css CHANGED
@@ -36,6 +36,11 @@
36
36
  display: contents;
37
37
  }
38
38
 
39
+ .et-scheduler-time-grid-body-wrap {
40
+ position: relative;
41
+ min-block-size: 0;
42
+ }
43
+
39
44
  .et-scheduler-time-grid-body {
40
45
  overflow-y: auto;
41
46
  max-block-size: var(--et-scheduler-time-grid-body-max-height);
package/src/lib/scrollable/headless/scrollable-buttons.component.css CHANGED
@@ -92,7 +92,14 @@
92
92
  }
93
93
 
94
94
  &[direction='horizontal'] .et-scrollable-buttons {
95
- margin-block: var(--_sticky-margin);
95
+ position: sticky;
96
+ inset-block-start: 0;
97
+ align-self: start;
98
+ block-size: min(100%, 100dvh);
99
+
100
+ & .et-scrollable-button {
101
+ position: absolute;
102
+ }
96
103
  }
97
104
 
98
105
  &[direction='vertical'] .et-scrollable-buttons {
package/src/lib/scrollable/headless/scrollable-footer.css CHANGED
@@ -20,6 +20,18 @@
20
20
  align-items: center;
21
21
  gap: 10px;
22
22
  margin-block-start: 10px;
23
+
24
+ & .et-scrollable-button--start {
25
+ order: 0;
26
+ }
27
+
28
+ & .et-scrollable-navigation {
29
+ order: 1;
30
+ }
31
+
32
+ & .et-scrollable-button--end {
33
+ order: 2;
34
+ }
23
35
  }
24
36
  }
25
37
  }
package/src/lib/scrollable/headless/scrollable-masks.component.css CHANGED
@@ -71,8 +71,15 @@
71
71
  }
72
72
 
73
73
  &[mask-variant='border'] {
74
+ --mask-size: 32px;
75
+
74
76
  & .et-scrollable-mask {
75
77
  background: none;
78
+
79
+ &::after {
80
+ content: '';
81
+ position: absolute;
82
+ }
76
83
  }
77
84
 
78
85
  &[direction='horizontal'],
@@ -83,12 +90,27 @@
83
90
  border-inline-start: 1px solid var(--et-surface-border-solid, #404040);
84
91
  }
85
92
 
93
+ & .et-scrollable-mask::after {
94
+ inset-block: 0;
95
+ inline-size: var(--mask-size);
96
+ }
97
+
86
98
  & .et-scrollable-mask--start {
87
99
  inset-inline: 0;
100
+
101
+ &::after {
102
+ inset-inline-start: 0;
103
+ background: linear-gradient(to right, var(--_mask-color) 0, transparent 100%);
104
+ }
88
105
  }
89
106
 
90
107
  & .et-scrollable-mask--end {
91
108
  inset-inline: auto 0;
109
+
110
+ &::after {
111
+ inset-inline-end: 1px;
112
+ background: linear-gradient(to left, var(--_mask-color) 0, transparent 100%);
113
+ }
92
114
  }
93
115
  }
94
116
 
@@ -99,12 +121,27 @@
99
121
  border-block-start: 1px solid var(--et-surface-border-solid, #404040);
100
122
  }
101
123
 
124
+ & .et-scrollable-mask::after {
125
+ inset-inline: 0;
126
+ block-size: var(--mask-size);
127
+ }
128
+
102
129
  & .et-scrollable-mask--start {
103
130
  inset-block-start: 0;
131
+
132
+ &::after {
133
+ inset-block-start: 0;
134
+ background: linear-gradient(to bottom, var(--_mask-color) 0, transparent 100%);
135
+ }
104
136
  }
105
137
 
106
138
  & .et-scrollable-mask--end {
107
139
  inset-block: auto 0;
140
+
141
+ &::after {
142
+ inset-block-end: 1px;
143
+ background: linear-gradient(to top, var(--_mask-color) 0, transparent 100%);
144
+ }
108
145
  }
109
146
  }
110
147
  }
package/src/lib/scrollbar/scrollbar.component.css CHANGED
@@ -17,6 +17,12 @@
17
17
  initial-value: 999px;
18
18
  }
19
19
 
20
+ @property --et-scrollbar-inset {
21
+ syntax: '<length>';
22
+ inherits: true;
23
+ initial-value: 4px;
24
+ }
25
+
20
26
  @property --et-scrollbar-fade-duration {
21
27
  syntax: '<time>';
22
28
  inherits: true;
@@ -50,13 +56,13 @@
50
56
  }
51
57
 
52
58
  &:where([data-orientation='vertical']) {
53
- inset-block: 0;
59
+ inset-block: var(--et-scrollbar-inset);
54
60
  inset-inline-end: 0;
55
61
  inline-size: var(--et-scrollbar-thickness);
56
62
  }
57
63
 
58
64
  &:where([data-orientation='horizontal']) {
59
- inset-inline: 0;
65
+ inset-inline: var(--et-scrollbar-inset);
60
66
  inset-block-end: 0;
61
67
  block-size: var(--et-scrollbar-thickness);
62
68
  }