@melodicdev/components 1.5.1 → 1.5.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 (12) hide show
  1. package/assets/melodic-components.js +31 -21
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +31 -21
  4. package/lib/components/forms/autocomplete/autocomplete.styles.js +1 -1
  5. package/lib/components/forms/date-picker/date-picker.styles.js +8 -8
  6. package/lib/components/forms/input/input.styles.js +2 -2
  7. package/lib/components/forms/select/select.styles.js +1 -1
  8. package/lib/components/forms/textarea/textarea.styles.js +2 -2
  9. package/lib/components/forms/time-picker/time-picker.styles.js +8 -8
  10. package/lib/components/navigation/sidebar/sidebar-group.styles.d.ts.map +1 -1
  11. package/lib/components/navigation/sidebar/sidebar-group.styles.js +18 -8
  12. package/package.json +1 -1
package/assets/melodic-components.min.js CHANGED
@@ -4781,9 +4781,9 @@ const pl = () => w`
4781
4781
  /* --- Wrapper --- */
4782
4782
  --ml-input-bg: var(--ml-color-input-bg);
4783
4783
  --ml-input-border-width: var(--ml-border);
4784
- --ml-input-border-color: var(--ml-color-border-strong);
4784
+ --ml-input-border-color: var(--ml-color-border);
4785
4785
  --ml-input-border-radius: var(--ml-radius);
4786
- --ml-input-shadow: var(--ml-shadow-xs);
4786
+ --ml-input-shadow: none;
4787
4787
  --ml-input-hover-border-color: var(--ml-color-border);
4788
4788
  --ml-input-padding: var(--ml-space-2-5) var(--ml-space-3-5);
4789
4789
  --ml-input-gap: var(--ml-space-2);
@@ -5059,9 +5059,9 @@ const ul = () => w`
5059
5059
  /* --- Field --- */
5060
5060
  --ml-textarea-bg: var(--ml-color-input-bg);
5061
5061
  --ml-textarea-border-width: var(--ml-border);
5062
- --ml-textarea-border-color: var(--ml-color-border-strong);
5062
+ --ml-textarea-border-color: var(--ml-color-border);
5063
5063
  --ml-textarea-border-radius: var(--ml-radius);
5064
- --ml-textarea-shadow: var(--ml-shadow-xs);
5064
+ --ml-textarea-shadow: none;
5065
5065
  --ml-textarea-color: var(--ml-color-text);
5066
5066
  --ml-textarea-font-family: var(--ml-font-sans);
5067
5067
  --ml-textarea-font-size: var(--ml-text-sm);
@@ -6565,7 +6565,7 @@ const Dl = () => w`
6565
6565
  --ml-select-required-color: var(--ml-color-danger);
6566
6566
 
6567
6567
  /* --- Trigger --- */
6568
- --ml-select-bg: var(--ml-color-surface);
6568
+ --ml-select-bg: var(--ml-color-input-bg);
6569
6569
  --ml-select-border-width: var(--ml-border);
6570
6570
  --ml-select-border-color: var(--ml-color-border);
6571
6571
  --ml-select-border-radius: var(--ml-radius);
@@ -8325,11 +8325,11 @@ const Bl = () => w`
8325
8325
  --ml-date-picker-bg: var(--ml-color-input-bg);
8326
8326
  --ml-date-picker-border-width: var(--ml-border);
8327
8327
  --ml-date-picker-border-color: var(--ml-color-border);
8328
- --ml-date-picker-border-radius: var(--ml-radius-md);
8328
+ --ml-date-picker-border-radius: var(--ml-radius);
8329
8329
  --ml-date-picker-color: var(--ml-color-text);
8330
8330
  --ml-date-picker-font-family: var(--ml-font-sans);
8331
8331
  --ml-date-picker-font-size: var(--ml-text-sm);
8332
- --ml-date-picker-padding: var(--ml-space-2) var(--ml-space-3);
8332
+ --ml-date-picker-padding: var(--ml-space-2-5) var(--ml-space-3-5);
8333
8333
  --ml-date-picker-gap: var(--ml-space-2);
8334
8334
  --ml-date-picker-hover-border-color: var(--ml-color-border-strong);
8335
8335
 
@@ -8339,12 +8339,12 @@ const Bl = () => w`
8339
8339
 
8340
8340
  /* --- Error --- */
8341
8341
  --ml-date-picker-error-border-color: var(--ml-color-danger);
8342
- --ml-date-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
8342
+ --ml-date-picker-error-focus-shadow: var(--ml-shadow-ring-error);
8343
8343
  --ml-date-picker-error-color: var(--ml-color-danger);
8344
8344
 
8345
8345
  /* --- Disabled --- */
8346
8346
  --ml-date-picker-disabled-opacity: 0.5;
8347
- --ml-date-picker-disabled-bg: var(--ml-color-surface-sunken);
8347
+ --ml-date-picker-disabled-bg: var(--ml-color-input-disabled-bg);
8348
8348
 
8349
8349
  /* --- Icon --- */
8350
8350
  --ml-date-picker-icon-color: var(--ml-color-text-muted);
@@ -8435,17 +8435,17 @@ const Bl = () => w`
8435
8435
 
8436
8436
  /* Sizes */
8437
8437
  .ml-date-picker--sm .ml-date-picker__trigger {
8438
- padding: var(--ml-space-1-5) var(--ml-space-2-5);
8439
- font-size: var(--ml-text-xs);
8438
+ padding: var(--ml-space-2) var(--ml-space-3);
8439
+ font-size: var(--ml-text-sm);
8440
8440
  }
8441
8441
 
8442
8442
  .ml-date-picker--md .ml-date-picker__trigger {
8443
- padding: var(--ml-space-2) var(--ml-space-3);
8443
+ padding: var(--ml-space-2-5) var(--ml-space-3-5);
8444
8444
  font-size: var(--ml-text-sm);
8445
8445
  }
8446
8446
 
8447
8447
  .ml-date-picker--lg .ml-date-picker__trigger {
8448
- padding: var(--ml-space-2-5) var(--ml-space-3-5);
8448
+ padding: var(--ml-space-3) var(--ml-space-3-5);
8449
8449
  font-size: var(--ml-text-base);
8450
8450
  }
8451
8451
 
@@ -16210,30 +16210,40 @@ function ki(e) {
16210
16210
  }
16211
16211
  const $i = () => w`
16212
16212
  :host {
16213
+ --ml-sidebar-group-padding-y: var(--ml-space-1);
16214
+ --ml-sidebar-group-label-padding-y: var(--ml-space-2);
16215
+ --ml-sidebar-group-label-padding-x: var(--ml-space-4);
16216
+ --ml-sidebar-group-label-font-size: var(--ml-text-xs);
16217
+ --ml-sidebar-group-label-font-weight: var(--ml-font-semibold);
16218
+ --ml-sidebar-group-label-color: var(--ml-color-text-muted);
16219
+ --ml-sidebar-group-label-letter-spacing: 0.05em;
16220
+ --ml-sidebar-group-items-gap: var(--ml-space-0-5);
16221
+ --ml-sidebar-group-items-padding-x: var(--ml-space-2);
16222
+
16213
16223
  display: block;
16214
16224
  }
16215
16225
 
16216
16226
  .ml-sidebar-group {
16217
- padding: var(--ml-space-1) 0;
16227
+ padding: var(--ml-sidebar-group-padding-y) 0;
16218
16228
  }
16219
16229
 
16220
16230
  .ml-sidebar-group__label {
16221
16231
  display: block;
16222
- padding: var(--ml-space-2) var(--ml-space-4);
16232
+ padding: var(--ml-sidebar-group-label-padding-y) var(--ml-sidebar-group-label-padding-x);
16223
16233
  font-family: var(--ml-font-sans);
16224
- font-size: var(--ml-text-xs);
16225
- font-weight: var(--ml-font-semibold);
16226
- color: var(--ml-color-text-muted);
16234
+ font-size: var(--ml-sidebar-group-label-font-size);
16235
+ font-weight: var(--ml-sidebar-group-label-font-weight);
16236
+ color: var(--ml-sidebar-group-label-color);
16227
16237
  text-transform: uppercase;
16228
- letter-spacing: 0.05em;
16238
+ letter-spacing: var(--ml-sidebar-group-label-letter-spacing);
16229
16239
  line-height: var(--ml-leading-tight);
16230
16240
  }
16231
16241
 
16232
16242
  .ml-sidebar-group__items {
16233
16243
  display: flex;
16234
16244
  flex-direction: column;
16235
- gap: var(--ml-space-0-5);
16236
- padding: 0 var(--ml-space-2);
16245
+ gap: var(--ml-sidebar-group-items-gap);
16246
+ padding: 0 var(--ml-sidebar-group-items-padding-x);
16237
16247
  }
16238
16248
  `;
16239
16249
  var rr = class {
package/lib/components/forms/autocomplete/autocomplete.styles.js CHANGED
@@ -16,7 +16,7 @@ export const autocompleteStyles = () => css `
16
16
  --ml-autocomplete-required-color: var(--ml-color-danger);
17
17
 
18
18
  /* --- Trigger --- */
19
- --ml-autocomplete-bg: var(--ml-color-surface);
19
+ --ml-autocomplete-bg: var(--ml-color-input-bg);
20
20
  --ml-autocomplete-border-width: var(--ml-border);
21
21
  --ml-autocomplete-border-color: var(--ml-color-border);
22
22
  --ml-autocomplete-border-radius: var(--ml-radius);
package/lib/components/forms/date-picker/date-picker.styles.js CHANGED
@@ -17,11 +17,11 @@ export const datePickerStyles = () => css `
17
17
  --ml-date-picker-bg: var(--ml-color-input-bg);
18
18
  --ml-date-picker-border-width: var(--ml-border);
19
19
  --ml-date-picker-border-color: var(--ml-color-border);
20
- --ml-date-picker-border-radius: var(--ml-radius-md);
20
+ --ml-date-picker-border-radius: var(--ml-radius);
21
21
  --ml-date-picker-color: var(--ml-color-text);
22
22
  --ml-date-picker-font-family: var(--ml-font-sans);
23
23
  --ml-date-picker-font-size: var(--ml-text-sm);
24
- --ml-date-picker-padding: var(--ml-space-2) var(--ml-space-3);
24
+ --ml-date-picker-padding: var(--ml-space-2-5) var(--ml-space-3-5);
25
25
  --ml-date-picker-gap: var(--ml-space-2);
26
26
  --ml-date-picker-hover-border-color: var(--ml-color-border-strong);
27
27
 
@@ -31,12 +31,12 @@ export const datePickerStyles = () => css `
31
31
 
32
32
  /* --- Error --- */
33
33
  --ml-date-picker-error-border-color: var(--ml-color-danger);
34
- --ml-date-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
34
+ --ml-date-picker-error-focus-shadow: var(--ml-shadow-ring-error);
35
35
  --ml-date-picker-error-color: var(--ml-color-danger);
36
36
 
37
37
  /* --- Disabled --- */
38
38
  --ml-date-picker-disabled-opacity: 0.5;
39
- --ml-date-picker-disabled-bg: var(--ml-color-surface-sunken);
39
+ --ml-date-picker-disabled-bg: var(--ml-color-input-disabled-bg);
40
40
 
41
41
  /* --- Icon --- */
42
42
  --ml-date-picker-icon-color: var(--ml-color-text-muted);
@@ -127,17 +127,17 @@ export const datePickerStyles = () => css `
127
127
 
128
128
  /* Sizes */
129
129
  .ml-date-picker--sm .ml-date-picker__trigger {
130
- padding: var(--ml-space-1-5) var(--ml-space-2-5);
131
- font-size: var(--ml-text-xs);
130
+ padding: var(--ml-space-2) var(--ml-space-3);
131
+ font-size: var(--ml-text-sm);
132
132
  }
133
133
 
134
134
  .ml-date-picker--md .ml-date-picker__trigger {
135
- padding: var(--ml-space-2) var(--ml-space-3);
135
+ padding: var(--ml-space-2-5) var(--ml-space-3-5);
136
136
  font-size: var(--ml-text-sm);
137
137
  }
138
138
 
139
139
  .ml-date-picker--lg .ml-date-picker__trigger {
140
- padding: var(--ml-space-2-5) var(--ml-space-3-5);
140
+ padding: var(--ml-space-3) var(--ml-space-3-5);
141
141
  font-size: var(--ml-text-base);
142
142
  }
143
143
 
package/lib/components/forms/input/input.styles.js CHANGED
@@ -17,9 +17,9 @@ export const inputStyles = () => css `
17
17
  /* --- Wrapper --- */
18
18
  --ml-input-bg: var(--ml-color-input-bg);
19
19
  --ml-input-border-width: var(--ml-border);
20
- --ml-input-border-color: var(--ml-color-border-strong);
20
+ --ml-input-border-color: var(--ml-color-border);
21
21
  --ml-input-border-radius: var(--ml-radius);
22
- --ml-input-shadow: var(--ml-shadow-xs);
22
+ --ml-input-shadow: none;
23
23
  --ml-input-hover-border-color: var(--ml-color-border);
24
24
  --ml-input-padding: var(--ml-space-2-5) var(--ml-space-3-5);
25
25
  --ml-input-gap: var(--ml-space-2);
package/lib/components/forms/select/select.styles.js CHANGED
@@ -16,7 +16,7 @@ export const selectStyles = () => css `
16
16
  --ml-select-required-color: var(--ml-color-danger);
17
17
 
18
18
  /* --- Trigger --- */
19
- --ml-select-bg: var(--ml-color-surface);
19
+ --ml-select-bg: var(--ml-color-input-bg);
20
20
  --ml-select-border-width: var(--ml-border);
21
21
  --ml-select-border-color: var(--ml-color-border);
22
22
  --ml-select-border-radius: var(--ml-radius);
package/lib/components/forms/textarea/textarea.styles.js CHANGED
@@ -17,9 +17,9 @@ export const textareaStyles = () => css `
17
17
  /* --- Field --- */
18
18
  --ml-textarea-bg: var(--ml-color-input-bg);
19
19
  --ml-textarea-border-width: var(--ml-border);
20
- --ml-textarea-border-color: var(--ml-color-border-strong);
20
+ --ml-textarea-border-color: var(--ml-color-border);
21
21
  --ml-textarea-border-radius: var(--ml-radius);
22
- --ml-textarea-shadow: var(--ml-shadow-xs);
22
+ --ml-textarea-shadow: none;
23
23
  --ml-textarea-color: var(--ml-color-text);
24
24
  --ml-textarea-font-family: var(--ml-font-sans);
25
25
  --ml-textarea-font-size: var(--ml-text-sm);
package/lib/components/forms/time-picker/time-picker.styles.js CHANGED
@@ -17,11 +17,11 @@ export const timePickerStyles = () => css `
17
17
  --ml-time-picker-bg: var(--ml-color-input-bg);
18
18
  --ml-time-picker-border-width: var(--ml-border);
19
19
  --ml-time-picker-border-color: var(--ml-color-border);
20
- --ml-time-picker-border-radius: var(--ml-radius-md);
20
+ --ml-time-picker-border-radius: var(--ml-radius);
21
21
  --ml-time-picker-color: var(--ml-color-text);
22
22
  --ml-time-picker-font-family: var(--ml-font-sans);
23
23
  --ml-time-picker-font-size: var(--ml-text-sm);
24
- --ml-time-picker-padding: var(--ml-space-2) var(--ml-space-3);
24
+ --ml-time-picker-padding: var(--ml-space-2-5) var(--ml-space-3-5);
25
25
  --ml-time-picker-gap: var(--ml-space-2);
26
26
  --ml-time-picker-hover-border-color: var(--ml-color-border-strong);
27
27
 
@@ -31,12 +31,12 @@ export const timePickerStyles = () => css `
31
31
 
32
32
  /* --- Error --- */
33
33
  --ml-time-picker-error-border-color: var(--ml-color-danger);
34
- --ml-time-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
34
+ --ml-time-picker-error-focus-shadow: var(--ml-shadow-ring-error);
35
35
  --ml-time-picker-error-color: var(--ml-color-danger);
36
36
 
37
37
  /* --- Disabled --- */
38
38
  --ml-time-picker-disabled-opacity: 0.5;
39
- --ml-time-picker-disabled-bg: var(--ml-color-surface-sunken);
39
+ --ml-time-picker-disabled-bg: var(--ml-color-input-disabled-bg);
40
40
 
41
41
  /* --- Icon --- */
42
42
  --ml-time-picker-icon-color: var(--ml-color-text-muted);
@@ -174,17 +174,17 @@ export const timePickerStyles = () => css `
174
174
 
175
175
  /* Sizes */
176
176
  .ml-time-picker--sm .ml-time-picker__trigger {
177
- padding: var(--ml-space-1-5) var(--ml-space-2-5);
178
- font-size: var(--ml-text-xs);
177
+ padding: var(--ml-space-2) var(--ml-space-3);
178
+ font-size: var(--ml-text-sm);
179
179
  }
180
180
 
181
181
  .ml-time-picker--md .ml-time-picker__trigger {
182
- padding: var(--ml-space-2) var(--ml-space-3);
182
+ padding: var(--ml-space-2-5) var(--ml-space-3-5);
183
183
  font-size: var(--ml-text-sm);
184
184
  }
185
185
 
186
186
  .ml-time-picker--lg .ml-time-picker__trigger {
187
- padding: var(--ml-space-2-5) var(--ml-space-3-5);
187
+ padding: var(--ml-space-3) var(--ml-space-3-5);
188
188
  font-size: var(--ml-text-base);
189
189
  }
190
190
 
package/lib/components/navigation/sidebar/sidebar-group.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDA2B9B,CAAC"}
1
+ {"version":3,"file":"sidebar-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAqC9B,CAAC"}
package/lib/components/navigation/sidebar/sidebar-group.styles.js CHANGED
@@ -1,29 +1,39 @@
1
1
  import { css } from '@melodicdev/core';
2
2
  export const sidebarGroupStyles = () => css `
3
3
  :host {
4
+ --ml-sidebar-group-padding-y: var(--ml-space-1);
5
+ --ml-sidebar-group-label-padding-y: var(--ml-space-2);
6
+ --ml-sidebar-group-label-padding-x: var(--ml-space-4);
7
+ --ml-sidebar-group-label-font-size: var(--ml-text-xs);
8
+ --ml-sidebar-group-label-font-weight: var(--ml-font-semibold);
9
+ --ml-sidebar-group-label-color: var(--ml-color-text-muted);
10
+ --ml-sidebar-group-label-letter-spacing: 0.05em;
11
+ --ml-sidebar-group-items-gap: var(--ml-space-0-5);
12
+ --ml-sidebar-group-items-padding-x: var(--ml-space-2);
13
+
4
14
  display: block;
5
15
  }
6
16
 
7
17
  .ml-sidebar-group {
8
- padding: var(--ml-space-1) 0;
18
+ padding: var(--ml-sidebar-group-padding-y) 0;
9
19
  }
10
20
 
11
21
  .ml-sidebar-group__label {
12
22
  display: block;
13
- padding: var(--ml-space-2) var(--ml-space-4);
23
+ padding: var(--ml-sidebar-group-label-padding-y) var(--ml-sidebar-group-label-padding-x);
14
24
  font-family: var(--ml-font-sans);
15
- font-size: var(--ml-text-xs);
16
- font-weight: var(--ml-font-semibold);
17
- color: var(--ml-color-text-muted);
25
+ font-size: var(--ml-sidebar-group-label-font-size);
26
+ font-weight: var(--ml-sidebar-group-label-font-weight);
27
+ color: var(--ml-sidebar-group-label-color);
18
28
  text-transform: uppercase;
19
- letter-spacing: 0.05em;
29
+ letter-spacing: var(--ml-sidebar-group-label-letter-spacing);
20
30
  line-height: var(--ml-leading-tight);
21
31
  }
22
32
 
23
33
  .ml-sidebar-group__items {
24
34
  display: flex;
25
35
  flex-direction: column;
26
- gap: var(--ml-space-0-5);
27
- padding: 0 var(--ml-space-2);
36
+ gap: var(--ml-sidebar-group-items-gap);
37
+ padding: 0 var(--ml-sidebar-group-items-padding-x);
28
38
  }
29
39
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melodicdev/components",
3
- "version": "1.5.1",
3
+ "version": "1.5.3",
4
4
  "description": "Themeable UI component library built on the Melodic Framework",
5
5
  "license": "MIT",
6
6
  "author": "Melodic Development",