@melodicdev/components 1.5.0 → 1.5.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 (20) hide show
  1. package/assets/melodic-components.js +72 -6
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +72 -6
  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-item.styles.d.ts.map +1 -1
  13. package/lib/components/navigation/sidebar/sidebar-item.styles.js +29 -1
  14. package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
  15. package/lib/components/navigation/sidebar/sidebar.styles.js +29 -1
  16. package/lib/components/overlays/popover/popover.styles.d.ts.map +1 -1
  17. package/lib/components/overlays/popover/popover.styles.js +2 -1
  18. package/lib/components/sections/page-header/page-header.styles.d.ts.map +1 -1
  19. package/lib/components/sections/page-header/page-header.styles.js +2 -0
  20. 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);
@@ -18059,10 +18094,19 @@ const sidebarItemStyles = () => css`
18059
18094
  --ml-sidebar-item-active-color: var(--ml-color-text-inverse);
18060
18095
  --ml-sidebar-item-active-hover-bg: var(--ml-color-primary-hover);
18061
18096
 
18097
+ /* Active indicator (left border accent) */
18098
+ --ml-sidebar-item-active-indicator-width: 0px;
18099
+ --ml-sidebar-item-active-indicator-color: transparent;
18100
+
18062
18101
  /* Item disabled */
18063
18102
  --ml-sidebar-item-disabled-color: var(--ml-color-text-muted);
18064
18103
  --ml-sidebar-item-disabled-opacity: 0.6;
18065
18104
 
18105
+ /* Icon colors (separate from text) */
18106
+ --ml-sidebar-item-icon-color: inherit;
18107
+ --ml-sidebar-item-active-icon-color: inherit;
18108
+ --ml-sidebar-item-hover-icon-color: inherit;
18109
+
18066
18110
  /* Item icon size */
18067
18111
  --ml-sidebar-item-icon-size: 20px;
18068
18112
 
@@ -18078,6 +18122,10 @@ const sidebarItemStyles = () => css`
18078
18122
  --ml-sidebar-item-badge-bg: var(--ml-color-surface-tertiary);
18079
18123
  --ml-sidebar-item-badge-color: var(--ml-color-text-secondary);
18080
18124
 
18125
+ /* Active badge overrides */
18126
+ --ml-sidebar-item-active-badge-bg: var(--ml-sidebar-item-badge-bg);
18127
+ --ml-sidebar-item-active-badge-color: var(--ml-sidebar-item-badge-color);
18128
+
18081
18129
  /* Chevron transition */
18082
18130
  --ml-sidebar-item-chevron-transition: var(--ml-duration-200) var(--ml-ease-in-out);
18083
18131
 
@@ -18097,6 +18145,7 @@ const sidebarItemStyles = () => css`
18097
18145
  padding: var(--ml-sidebar-item-padding-y) var(--ml-sidebar-item-padding-x);
18098
18146
  padding-left: calc(var(--ml-sidebar-item-padding-x) + (var(--level) * var(--ml-space-5)));
18099
18147
  border: none;
18148
+ border-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
18100
18149
  border-radius: var(--ml-sidebar-item-radius);
18101
18150
  background: transparent;
18102
18151
  color: var(--ml-sidebar-item-color);
@@ -18125,6 +18174,7 @@ const sidebarItemStyles = () => css`
18125
18174
  .ml-sidebar-item__link--active {
18126
18175
  background-color: var(--ml-sidebar-item-active-bg);
18127
18176
  color: var(--ml-sidebar-item-active-color);
18177
+ border-left-color: var(--ml-sidebar-item-active-indicator-color);
18128
18178
  }
18129
18179
 
18130
18180
  .ml-sidebar-item__link--active:hover {
@@ -18151,7 +18201,15 @@ const sidebarItemStyles = () => css`
18151
18201
  flex-shrink: 0;
18152
18202
  width: var(--ml-sidebar-item-icon-size);
18153
18203
  height: var(--ml-sidebar-item-icon-size);
18154
- color: inherit;
18204
+ color: var(--ml-sidebar-item-icon-color);
18205
+ }
18206
+
18207
+ .ml-sidebar-item__link--active .ml-sidebar-item__leading {
18208
+ color: var(--ml-sidebar-item-active-icon-color);
18209
+ }
18210
+
18211
+ .ml-sidebar-item__link:hover:not(.ml-sidebar-item__link--disabled):not(.ml-sidebar-item__link--active) .ml-sidebar-item__leading {
18212
+ color: var(--ml-sidebar-item-hover-icon-color);
18155
18213
  }
18156
18214
 
18157
18215
  /* Label */
@@ -18214,6 +18272,11 @@ const sidebarItemStyles = () => css`
18214
18272
  color: var(--ml-color-error);
18215
18273
  }
18216
18274
 
18275
+ .ml-sidebar-item__link--active .ml-sidebar-item__badge {
18276
+ background-color: var(--ml-sidebar-item-active-badge-bg);
18277
+ color: var(--ml-sidebar-item-active-badge-color);
18278
+ }
18279
+
18217
18280
  /* Chevron for expandable items */
18218
18281
  .ml-sidebar-item__chevron {
18219
18282
  transition: transform var(--ml-sidebar-item-chevron-transition);
@@ -21388,6 +21451,7 @@ const popoverStyles = () => css`
21388
21451
  --ml-popover-bg: var(--ml-color-surface);
21389
21452
  --ml-popover-color: var(--ml-color-text);
21390
21453
  --ml-popover-shadow: var(--ml-shadow-lg);
21454
+ --ml-popover-content-overflow: visible;
21391
21455
  --ml-popover-transition: var(--ml-duration-150) var(--ml-ease-out);
21392
21456
 
21393
21457
  /* Arrow */
@@ -21418,7 +21482,7 @@ const popoverStyles = () => css`
21418
21482
  background-color: var(--ml-popover-bg);
21419
21483
  color: var(--ml-popover-color);
21420
21484
  box-shadow: var(--ml-popover-shadow);
21421
- overflow: visible;
21485
+ overflow: var(--ml-popover-content-overflow);
21422
21486
  opacity: 0;
21423
21487
  transform: scale(0.95);
21424
21488
  transition:
@@ -22355,6 +22419,7 @@ const pageHeaderStyles = () => css`
22355
22419
 
22356
22420
  /* Font */
22357
22421
  --ml-page-header-font-family: var(--ml-font-sans);
22422
+ --ml-page-header-color: var(--ml-color-text);
22358
22423
 
22359
22424
  /* Border */
22360
22425
  --ml-page-header-border-width: var(--ml-border);
@@ -22389,6 +22454,7 @@ const pageHeaderStyles = () => css`
22389
22454
  .ml-page-header {
22390
22455
  padding: var(--ml-page-header-padding);
22391
22456
  font-family: var(--ml-page-header-font-family);
22457
+ color: var(--ml-page-header-color);
22392
22458
  }
22393
22459
 
22394
22460
  .ml-page-header--divider {