@melodicdev/components 1.5.0 → 1.5.2

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 (22) hide show
  1. package/assets/melodic-components.js +90 -14
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +90 -14
  4. package/lib/components/data-display/table/table.styles.d.ts.map +1 -1
  5. package/lib/components/data-display/table/table.styles.js +4 -0
  6. package/lib/components/forms/input/input.styles.d.ts.map +1 -1
  7. package/lib/components/forms/input/input.styles.js +2 -1
  8. package/lib/components/forms/select/select.styles.d.ts.map +1 -1
  9. package/lib/components/forms/select/select.styles.js +2 -1
  10. package/lib/components/forms/textarea/textarea.styles.d.ts.map +1 -1
  11. package/lib/components/forms/textarea/textarea.styles.js +2 -1
  12. package/lib/components/navigation/sidebar/sidebar-group.styles.d.ts.map +1 -1
  13. package/lib/components/navigation/sidebar/sidebar-group.styles.js +18 -8
  14. package/lib/components/navigation/sidebar/sidebar-item.styles.d.ts.map +1 -1
  15. package/lib/components/navigation/sidebar/sidebar-item.styles.js +29 -1
  16. package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
  17. package/lib/components/navigation/sidebar/sidebar.styles.js +29 -1
  18. package/lib/components/overlays/popover/popover.styles.d.ts.map +1 -1
  19. package/lib/components/overlays/popover/popover.styles.js +2 -1
  20. package/lib/components/sections/page-header/page-header.styles.d.ts.map +1 -1
  21. package/lib/components/sections/page-header/page-header.styles.js +2 -0
  22. package/package.json +1 -1
package/assets/melodic-components.js CHANGED
@@ -5805,6 +5805,7 @@ const inputStyles = () => css`
5805
5805
  /* --- Focus --- */
5806
5806
  --ml-input-focus-border-color: var(--ml-color-primary);
5807
5807
  --ml-input-focus-shadow: var(--ml-shadow-focus-ring);
5808
+ --ml-input-focus-inset-shadow: none;
5808
5809
 
5809
5810
  /* --- Error --- */
5810
5811
  --ml-input-error-border-color: var(--ml-color-danger);
@@ -5903,7 +5904,7 @@ const inputStyles = () => css`
5903
5904
 
5904
5905
  .ml-input--focused .ml-input__wrapper {
5905
5906
  border-color: var(--ml-input-focus-border-color);
5906
- box-shadow: var(--ml-input-focus-shadow);
5907
+ box-shadow: var(--ml-input-focus-shadow), var(--ml-input-focus-inset-shadow);
5907
5908
  }
5908
5909
 
5909
5910
  .ml-input--error .ml-input__wrapper {
@@ -6099,6 +6100,7 @@ const textareaStyles = () => css`
6099
6100
  /* --- Focus --- */
6100
6101
  --ml-textarea-focus-border-color: var(--ml-color-primary);
6101
6102
  --ml-textarea-focus-shadow: var(--ml-shadow-focus-ring);
6103
+ --ml-textarea-focus-inset-shadow: none;
6102
6104
 
6103
6105
  /* --- Error --- */
6104
6106
  --ml-textarea-error-border-color: var(--ml-color-danger);
@@ -6164,7 +6166,7 @@ const textareaStyles = () => css`
6164
6166
  .ml-textarea__field:focus {
6165
6167
  outline: none;
6166
6168
  border-color: var(--ml-textarea-focus-border-color);
6167
- box-shadow: var(--ml-textarea-focus-shadow);
6169
+ box-shadow: var(--ml-textarea-focus-shadow), var(--ml-textarea-focus-inset-shadow);
6168
6170
  }
6169
6171
 
6170
6172
  .ml-textarea__field::placeholder {
@@ -7684,6 +7686,7 @@ const selectStyles = () => css`
7684
7686
  /* --- Focus --- */
7685
7687
  --ml-select-focus-border-color: var(--ml-color-primary);
7686
7688
  --ml-select-focus-shadow: var(--ml-shadow-focus-ring);
7689
+ --ml-select-focus-inset-shadow: none;
7687
7690
 
7688
7691
  /* --- Error --- */
7689
7692
  --ml-select-error-border-color: var(--ml-color-danger);
@@ -7801,7 +7804,7 @@ const selectStyles = () => css`
7801
7804
  .ml-select__trigger:focus-within {
7802
7805
  outline: none;
7803
7806
  border-color: var(--ml-select-focus-border-color);
7804
- box-shadow: var(--ml-select-focus-shadow);
7807
+ box-shadow: var(--ml-select-focus-shadow), var(--ml-select-focus-inset-shadow);
7805
7808
  }
7806
7809
 
7807
7810
  .ml-select--disabled .ml-select__trigger {
@@ -12867,6 +12870,8 @@ const tableStyles = () => css`
12867
12870
  --ml-table-row-hover-bg: var(--ml-color-surface-sunken);
12868
12871
  --ml-table-row-hover-border-color: transparent;
12869
12872
  --ml-table-row-hover-border-width: 0;
12873
+ --ml-table-row-hover-border-left-width: 0;
12874
+ --ml-table-row-hover-border-left-color: transparent;
12870
12875
  --ml-table-row-selected-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
12871
12876
  --ml-table-row-selected-hover-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.06));
12872
12877
  --ml-table-row-striped-bg: var(--ml-color-surface-sunken);
@@ -13008,6 +13013,8 @@ const tableStyles = () => css`
13008
13013
  border-color: var(--ml-table-row-hover-border-color);
13009
13014
  border-width: var(--ml-table-row-hover-border-width);
13010
13015
  border-style: solid;
13016
+ border-left-width: var(--ml-table-row-hover-border-left-width);
13017
+ border-left-color: var(--ml-table-row-hover-border-left-color);
13011
13018
  }
13012
13019
 
13013
13020
  .ml-table--row-clickable .ml-table__row {
@@ -17468,10 +17475,19 @@ const sidebarStyles = () => css`
17468
17475
  --ml-sidebar-item-active-color: var(--ml-color-text-inverse);
17469
17476
  --ml-sidebar-item-active-hover-bg: var(--ml-color-primary-hover);
17470
17477
 
17478
+ /* Active indicator (left border accent) */
17479
+ --ml-sidebar-item-active-indicator-width: 0px;
17480
+ --ml-sidebar-item-active-indicator-color: transparent;
17481
+
17471
17482
  /* Item disabled */
17472
17483
  --ml-sidebar-item-disabled-color: var(--ml-color-text-muted);
17473
17484
  --ml-sidebar-item-disabled-opacity: 0.6;
17474
17485
 
17486
+ /* Icon colors (separate from text) */
17487
+ --ml-sidebar-item-icon-color: inherit;
17488
+ --ml-sidebar-item-active-icon-color: inherit;
17489
+ --ml-sidebar-item-hover-icon-color: inherit;
17490
+
17475
17491
  /* Item icon size */
17476
17492
  --ml-sidebar-item-icon-size: 20px;
17477
17493
 
@@ -17487,6 +17503,10 @@ const sidebarStyles = () => css`
17487
17503
  --ml-sidebar-badge-bg: var(--ml-color-surface-tertiary);
17488
17504
  --ml-sidebar-badge-color: var(--ml-color-text-secondary);
17489
17505
 
17506
+ /* Active badge overrides */
17507
+ --ml-sidebar-item-active-badge-bg: var(--ml-sidebar-badge-bg);
17508
+ --ml-sidebar-item-active-badge-color: var(--ml-sidebar-badge-color);
17509
+
17490
17510
  /* Chevron transition */
17491
17511
  --ml-sidebar-chevron-transition: var(--ml-duration-200) var(--ml-ease-in-out);
17492
17512
 
@@ -17637,6 +17657,7 @@ const sidebarStyles = () => css`
17637
17657
  padding: var(--ml-sidebar-item-padding-y) var(--ml-sidebar-item-padding-x);
17638
17658
  padding-left: calc(var(--ml-sidebar-item-padding-x) + (var(--level) * var(--ml-space-5)));
17639
17659
  border: none;
17660
+ border-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
17640
17661
  border-radius: var(--ml-sidebar-item-radius);
17641
17662
  background: transparent;
17642
17663
  color: var(--ml-sidebar-item-color);
@@ -17665,6 +17686,7 @@ const sidebarStyles = () => css`
17665
17686
  .ml-sidebar__item-link--active {
17666
17687
  background-color: var(--ml-sidebar-item-active-bg);
17667
17688
  color: var(--ml-sidebar-item-active-color);
17689
+ border-left-color: var(--ml-sidebar-item-active-indicator-color);
17668
17690
  }
17669
17691
 
17670
17692
  .ml-sidebar__item-link--active:hover {
@@ -17691,7 +17713,15 @@ const sidebarStyles = () => css`
17691
17713
  flex-shrink: 0;
17692
17714
  width: var(--ml-sidebar-item-icon-size);
17693
17715
  height: var(--ml-sidebar-item-icon-size);
17694
- color: inherit;
17716
+ color: var(--ml-sidebar-item-icon-color);
17717
+ }
17718
+
17719
+ .ml-sidebar__item-link--active .ml-sidebar__item-leading {
17720
+ color: var(--ml-sidebar-item-active-icon-color);
17721
+ }
17722
+
17723
+ .ml-sidebar__item-link:hover:not(.ml-sidebar__item-link--disabled):not(.ml-sidebar__item-link--active) .ml-sidebar__item-leading {
17724
+ color: var(--ml-sidebar-item-hover-icon-color);
17695
17725
  }
17696
17726
 
17697
17727
  /* Label */
@@ -17746,6 +17776,11 @@ const sidebarStyles = () => css`
17746
17776
  color: var(--ml-color-error);
17747
17777
  }
17748
17778
 
17779
+ .ml-sidebar__item-link--active .ml-sidebar__item-badge {
17780
+ background-color: var(--ml-sidebar-item-active-badge-bg);
17781
+ color: var(--ml-sidebar-item-active-badge-color);
17782
+ }
17783
+
17749
17784
  /* Chevron for expandable items */
17750
17785
  .ml-sidebar__item-chevron {
17751
17786
  transition: transform var(--ml-sidebar-chevron-transition);
@@ -17921,30 +17956,40 @@ function sidebarGroupTemplate(c) {
17921
17956
  }
17922
17957
  const sidebarGroupStyles = () => css`
17923
17958
  :host {
17959
+ --ml-sidebar-group-padding-y: var(--ml-space-1);
17960
+ --ml-sidebar-group-label-padding-y: var(--ml-space-2);
17961
+ --ml-sidebar-group-label-padding-x: var(--ml-space-4);
17962
+ --ml-sidebar-group-label-font-size: var(--ml-text-xs);
17963
+ --ml-sidebar-group-label-font-weight: var(--ml-font-semibold);
17964
+ --ml-sidebar-group-label-color: var(--ml-color-text-muted);
17965
+ --ml-sidebar-group-label-letter-spacing: 0.05em;
17966
+ --ml-sidebar-group-items-gap: var(--ml-space-0-5);
17967
+ --ml-sidebar-group-items-padding-x: var(--ml-space-2);
17968
+
17924
17969
  display: block;
17925
17970
  }
17926
17971
 
17927
17972
  .ml-sidebar-group {
17928
- padding: var(--ml-space-1) 0;
17973
+ padding: var(--ml-sidebar-group-padding-y) 0;
17929
17974
  }
17930
17975
 
17931
17976
  .ml-sidebar-group__label {
17932
17977
  display: block;
17933
- padding: var(--ml-space-2) var(--ml-space-4);
17978
+ padding: var(--ml-sidebar-group-label-padding-y) var(--ml-sidebar-group-label-padding-x);
17934
17979
  font-family: var(--ml-font-sans);
17935
- font-size: var(--ml-text-xs);
17936
- font-weight: var(--ml-font-semibold);
17937
- color: var(--ml-color-text-muted);
17980
+ font-size: var(--ml-sidebar-group-label-font-size);
17981
+ font-weight: var(--ml-sidebar-group-label-font-weight);
17982
+ color: var(--ml-sidebar-group-label-color);
17938
17983
  text-transform: uppercase;
17939
- letter-spacing: 0.05em;
17984
+ letter-spacing: var(--ml-sidebar-group-label-letter-spacing);
17940
17985
  line-height: var(--ml-leading-tight);
17941
17986
  }
17942
17987
 
17943
17988
  .ml-sidebar-group__items {
17944
17989
  display: flex;
17945
17990
  flex-direction: column;
17946
- gap: var(--ml-space-0-5);
17947
- padding: 0 var(--ml-space-2);
17991
+ gap: var(--ml-sidebar-group-items-gap);
17992
+ padding: 0 var(--ml-sidebar-group-items-padding-x);
17948
17993
  }
17949
17994
  `;
17950
17995
  var SidebarGroupComponent = class SidebarGroupComponent$1 {
@@ -18059,10 +18104,19 @@ const sidebarItemStyles = () => css`
18059
18104
  --ml-sidebar-item-active-color: var(--ml-color-text-inverse);
18060
18105
  --ml-sidebar-item-active-hover-bg: var(--ml-color-primary-hover);
18061
18106
 
18107
+ /* Active indicator (left border accent) */
18108
+ --ml-sidebar-item-active-indicator-width: 0px;
18109
+ --ml-sidebar-item-active-indicator-color: transparent;
18110
+
18062
18111
  /* Item disabled */
18063
18112
  --ml-sidebar-item-disabled-color: var(--ml-color-text-muted);
18064
18113
  --ml-sidebar-item-disabled-opacity: 0.6;
18065
18114
 
18115
+ /* Icon colors (separate from text) */
18116
+ --ml-sidebar-item-icon-color: inherit;
18117
+ --ml-sidebar-item-active-icon-color: inherit;
18118
+ --ml-sidebar-item-hover-icon-color: inherit;
18119
+
18066
18120
  /* Item icon size */
18067
18121
  --ml-sidebar-item-icon-size: 20px;
18068
18122
 
@@ -18078,6 +18132,10 @@ const sidebarItemStyles = () => css`
18078
18132
  --ml-sidebar-item-badge-bg: var(--ml-color-surface-tertiary);
18079
18133
  --ml-sidebar-item-badge-color: var(--ml-color-text-secondary);
18080
18134
 
18135
+ /* Active badge overrides */
18136
+ --ml-sidebar-item-active-badge-bg: var(--ml-sidebar-item-badge-bg);
18137
+ --ml-sidebar-item-active-badge-color: var(--ml-sidebar-item-badge-color);
18138
+
18081
18139
  /* Chevron transition */
18082
18140
  --ml-sidebar-item-chevron-transition: var(--ml-duration-200) var(--ml-ease-in-out);
18083
18141
 
@@ -18097,6 +18155,7 @@ const sidebarItemStyles = () => css`
18097
18155
  padding: var(--ml-sidebar-item-padding-y) var(--ml-sidebar-item-padding-x);
18098
18156
  padding-left: calc(var(--ml-sidebar-item-padding-x) + (var(--level) * var(--ml-space-5)));
18099
18157
  border: none;
18158
+ border-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
18100
18159
  border-radius: var(--ml-sidebar-item-radius);
18101
18160
  background: transparent;
18102
18161
  color: var(--ml-sidebar-item-color);
@@ -18125,6 +18184,7 @@ const sidebarItemStyles = () => css`
18125
18184
  .ml-sidebar-item__link--active {
18126
18185
  background-color: var(--ml-sidebar-item-active-bg);
18127
18186
  color: var(--ml-sidebar-item-active-color);
18187
+ border-left-color: var(--ml-sidebar-item-active-indicator-color);
18128
18188
  }
18129
18189
 
18130
18190
  .ml-sidebar-item__link--active:hover {
@@ -18151,7 +18211,15 @@ const sidebarItemStyles = () => css`
18151
18211
  flex-shrink: 0;
18152
18212
  width: var(--ml-sidebar-item-icon-size);
18153
18213
  height: var(--ml-sidebar-item-icon-size);
18154
- color: inherit;
18214
+ color: var(--ml-sidebar-item-icon-color);
18215
+ }
18216
+
18217
+ .ml-sidebar-item__link--active .ml-sidebar-item__leading {
18218
+ color: var(--ml-sidebar-item-active-icon-color);
18219
+ }
18220
+
18221
+ .ml-sidebar-item__link:hover:not(.ml-sidebar-item__link--disabled):not(.ml-sidebar-item__link--active) .ml-sidebar-item__leading {
18222
+ color: var(--ml-sidebar-item-hover-icon-color);
18155
18223
  }
18156
18224
 
18157
18225
  /* Label */
@@ -18214,6 +18282,11 @@ const sidebarItemStyles = () => css`
18214
18282
  color: var(--ml-color-error);
18215
18283
  }
18216
18284
 
18285
+ .ml-sidebar-item__link--active .ml-sidebar-item__badge {
18286
+ background-color: var(--ml-sidebar-item-active-badge-bg);
18287
+ color: var(--ml-sidebar-item-active-badge-color);
18288
+ }
18289
+
18217
18290
  /* Chevron for expandable items */
18218
18291
  .ml-sidebar-item__chevron {
18219
18292
  transition: transform var(--ml-sidebar-item-chevron-transition);
@@ -21388,6 +21461,7 @@ const popoverStyles = () => css`
21388
21461
  --ml-popover-bg: var(--ml-color-surface);
21389
21462
  --ml-popover-color: var(--ml-color-text);
21390
21463
  --ml-popover-shadow: var(--ml-shadow-lg);
21464
+ --ml-popover-content-overflow: visible;
21391
21465
  --ml-popover-transition: var(--ml-duration-150) var(--ml-ease-out);
21392
21466
 
21393
21467
  /* Arrow */
@@ -21418,7 +21492,7 @@ const popoverStyles = () => css`
21418
21492
  background-color: var(--ml-popover-bg);
21419
21493
  color: var(--ml-popover-color);
21420
21494
  box-shadow: var(--ml-popover-shadow);
21421
- overflow: visible;
21495
+ overflow: var(--ml-popover-content-overflow);
21422
21496
  opacity: 0;
21423
21497
  transform: scale(0.95);
21424
21498
  transition:
@@ -22355,6 +22429,7 @@ const pageHeaderStyles = () => css`
22355
22429
 
22356
22430
  /* Font */
22357
22431
  --ml-page-header-font-family: var(--ml-font-sans);
22432
+ --ml-page-header-color: var(--ml-color-text);
22358
22433
 
22359
22434
  /* Border */
22360
22435
  --ml-page-header-border-width: var(--ml-border);
@@ -22389,6 +22464,7 @@ const pageHeaderStyles = () => css`
22389
22464
  .ml-page-header {
22390
22465
  padding: var(--ml-page-header-padding);
22391
22466
  font-family: var(--ml-page-header-font-family);
22467
+ color: var(--ml-page-header-color);
22392
22468
  }
22393
22469
 
22394
22470
  .ml-page-header--divider {