@i-cell/ids-styles 0.0.71 → 0.0.73

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 (19) hide show
  1. package/dist/components.css +53 -39
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +50 -12
  4. package/dist/datepicker/datepicker.css +31 -2
  5. package/dist/datepicker/datepicker.min.css +1 -1
  6. package/dist/datepicker/datepicker.plugin.js +32 -2
  7. package/dist/dialog/dialog.css +0 -1
  8. package/dist/dialog/dialog.min.css +1 -1
  9. package/dist/dialog/dialog.plugin.js +0 -1
  10. package/dist/divider/divider.css +1 -0
  11. package/dist/divider/divider.min.css +1 -1
  12. package/dist/divider/divider.plugin.js +1 -0
  13. package/dist/radio/radio.css +1 -0
  14. package/dist/radio/radio.min.css +1 -1
  15. package/dist/radio/radio.plugin.js +1 -1
  16. package/dist/side-nav/side-nav.css +20 -36
  17. package/dist/side-nav/side-nav.min.css +1 -1
  18. package/dist/side-nav/side-nav.plugin.js +16 -8
  19. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -5558,10 +5558,8 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5558
5558
  .ids-calendar {
5559
5559
  display: flex;
5560
5560
  flex-direction: column;
5561
- background-color: white;
5562
5561
  border-width: 1px;
5563
5562
  border-style: solid;
5564
- border-color: lightgrey;
5565
5563
  }
5566
5564
  .ids-calendar > .ids-calendar__header {
5567
5565
  display: flex;
@@ -5592,6 +5590,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5592
5590
  .ids-calendar.ids-calendar-compact {
5593
5591
  gap: var(--ids-comp-date-picker-size-gap-compact);
5594
5592
  padding: var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact);
5593
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-compact);
5595
5594
  }
5596
5595
  .ids-calendar.ids-calendar-compact .ids-calendar-grid {
5597
5596
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-compact);
@@ -5631,6 +5630,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5631
5630
  .ids-calendar.ids-calendar-comfortable {
5632
5631
  gap: var(--ids-comp-date-picker-size-gap-comfortable);
5633
5632
  padding: var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable);
5633
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-comfortable);
5634
5634
  }
5635
5635
  .ids-calendar.ids-calendar-comfortable .ids-calendar-grid {
5636
5636
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);
@@ -5670,6 +5670,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5670
5670
  .ids-calendar.ids-calendar-spacious {
5671
5671
  gap: var(--ids-comp-date-picker-size-gap-spacious);
5672
5672
  padding: var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious);
5673
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-spacious);
5673
5674
  }
5674
5675
  .ids-calendar.ids-calendar-spacious .ids-calendar-grid {
5675
5676
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-spacious);
@@ -5709,6 +5710,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5709
5710
  .ids-calendar.ids-calendar-dense {
5710
5711
  gap: var(--ids-comp-date-picker-size-gap-dense);
5711
5712
  padding: var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense);
5713
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-dense);
5712
5714
  }
5713
5715
  .ids-calendar.ids-calendar-dense .ids-calendar-grid {
5714
5716
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-dense);
@@ -5745,6 +5747,15 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5745
5747
  .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
5746
5748
  outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-dense);
5747
5749
  }
5750
+ .ids-calendar.ids-calendar-filled {
5751
+ box-shadow: none;
5752
+ }
5753
+ .ids-calendar.ids-calendar-outlined {
5754
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter);
5755
+ }
5756
+ .ids-calendar.ids-calendar-elevated {
5757
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
5758
+ }
5748
5759
  .ids-calendar.ids-calendar-surface .ids-calendar-cell {
5749
5760
  background-color: var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);
5750
5761
  border-color: var(--ids-comp-date-picker-cell-unselected-color-border-surface-default);
@@ -5821,6 +5832,24 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5821
5832
  .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
5822
5833
  outline-color: var(--ids-comp-date-picker-focused-outline-color-dark);
5823
5834
  }
5835
+ .ids-calendar.ids-calendar-filled.ids-calendar-surface {
5836
+ background: var(--ids-comp-overlay-panel-filled-color-bg-surface-default);
5837
+ }
5838
+ .ids-calendar.ids-calendar-filled.ids-calendar-surface.ids-calendar-outlined {
5839
+ border-color: var(--ids-comp-overlay-panel-filled-color-border-surface-default);
5840
+ }
5841
+ .ids-calendar.ids-calendar-outlined.ids-calendar-surface {
5842
+ background: var(--ids-comp-overlay-panel-outlined-color-bg-surface-default);
5843
+ }
5844
+ .ids-calendar.ids-calendar-outlined.ids-calendar-surface.ids-calendar-outlined {
5845
+ border-color: var(--ids-comp-overlay-panel-outlined-color-border-surface-default);
5846
+ }
5847
+ .ids-calendar.ids-calendar-elevated.ids-calendar-surface {
5848
+ background: var(--ids-comp-overlay-panel-elevated-color-bg-surface-default);
5849
+ }
5850
+ .ids-calendar.ids-calendar-elevated.ids-calendar-surface.ids-calendar-outlined {
5851
+ border-color: var(--ids-comp-overlay-panel-elevated-color-border-surface-default);
5852
+ }
5824
5853
 
5825
5854
  .ids-year-selector > .ids-year-selector__years-grid {
5826
5855
  display: grid;
@@ -5892,7 +5921,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5892
5921
  display: grid;
5893
5922
  }
5894
5923
  .ids-dialog .ids-dialog-container .ids-dialog-content {
5895
- display: flex;
5896
5924
  overflow-y: auto;
5897
5925
  background: var(--ids-comp-dialog-content-color-bg-default);
5898
5926
  }
@@ -6095,6 +6123,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
6095
6123
  border-color: transparent;
6096
6124
  line-height: 1.5;
6097
6125
  display: flex;
6126
+ flex-shrink: 0;
6098
6127
  align-items: center;
6099
6128
  justify-content: center;
6100
6129
  }
@@ -10752,6 +10781,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10752
10781
  }
10753
10782
  .ids-radio-group > .ids-radio-group__list {
10754
10783
  display: flex;
10784
+ width: inherit;
10755
10785
  }
10756
10786
  .ids-radio-group.ids-radio-group-horizontal > .ids-radio-group__list {
10757
10787
  flex-direction: row;
@@ -12790,16 +12820,12 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12790
12820
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact) * -1);
12791
12821
  }
12792
12822
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
12793
- --submenu-item-height: calc(
12794
- max(
12795
- var(--ids-comp-sidenav-navitem-single-size-height-compact),
12796
- var(--ids-comp-sidenav-navitem-expandable-summary-size-height-compact)
12797
- ) +
12798
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) +
12799
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) +
12800
- calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact) * var(--submenu-items-count))
12823
+ --submenu-items-gap-count: max(calc(var(--submenu-items-count) - 1), 0);
12824
+ --submenu-item-height: max(
12825
+ var(--ids-comp-sidenav-navitem-single-size-height-compact),
12826
+ var(--ids-comp-sidenav-navitem-expandable-summary-size-height-compact)
12801
12827
  );
12802
- max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
12828
+ max-height: calc(var(--submenu-items-count) * var(--submenu-item-height) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) + var(--submenu-items-gap-count) * (var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact) + var(--ids-comp-sidenav-section-list-size-gap-compact)));
12803
12829
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact);
12804
12830
  padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact);
12805
12831
  }
@@ -12905,16 +12931,12 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12905
12931
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable) * -1);
12906
12932
  }
12907
12933
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
12908
- --submenu-item-height: calc(
12909
- max(
12910
- var(--ids-comp-sidenav-navitem-single-size-height-comfortable),
12911
- var(--ids-comp-sidenav-navitem-expandable-summary-size-height-comfortable)
12912
- ) +
12913
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) +
12914
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) +
12915
- calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable) * var(--submenu-items-count))
12934
+ --submenu-items-gap-count: max(calc(var(--submenu-items-count) - 1), 0);
12935
+ --submenu-item-height: max(
12936
+ var(--ids-comp-sidenav-navitem-single-size-height-comfortable),
12937
+ var(--ids-comp-sidenav-navitem-expandable-summary-size-height-comfortable)
12916
12938
  );
12917
- max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
12939
+ max-height: calc(var(--submenu-items-count) * var(--submenu-item-height) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) + var(--submenu-items-gap-count) * (var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable) + var(--ids-comp-sidenav-section-list-size-gap-comfortable)));
12918
12940
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable);
12919
12941
  padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable);
12920
12942
  }
@@ -13020,16 +13042,12 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13020
13042
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious) * -1);
13021
13043
  }
13022
13044
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
13023
- --submenu-item-height: calc(
13024
- max(
13025
- var(--ids-comp-sidenav-navitem-single-size-height-spacious),
13026
- var(--ids-comp-sidenav-navitem-expandable-summary-size-height-spacious)
13027
- ) +
13028
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) +
13029
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) +
13030
- calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious) * var(--submenu-items-count))
13045
+ --submenu-items-gap-count: max(calc(var(--submenu-items-count) - 1), 0);
13046
+ --submenu-item-height: max(
13047
+ var(--ids-comp-sidenav-navitem-single-size-height-spacious),
13048
+ var(--ids-comp-sidenav-navitem-expandable-summary-size-height-spacious)
13031
13049
  );
13032
- max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
13050
+ max-height: calc(var(--submenu-items-count) * var(--submenu-item-height) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) + var(--submenu-items-gap-count) * (var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious) + var(--ids-comp-sidenav-section-list-size-gap-spacious)));
13033
13051
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious);
13034
13052
  padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious);
13035
13053
  }
@@ -13135,16 +13153,12 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13135
13153
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense) * -1);
13136
13154
  }
13137
13155
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
13138
- --submenu-item-height: calc(
13139
- max(
13140
- var(--ids-comp-sidenav-navitem-single-size-height-dense),
13141
- var(--ids-comp-sidenav-navitem-expandable-summary-size-height-dense)
13142
- ) +
13143
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) +
13144
- var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) +
13145
- calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense) * var(--submenu-items-count))
13156
+ --submenu-items-gap-count: max(calc(var(--submenu-items-count) - 1), 0);
13157
+ --submenu-item-height: max(
13158
+ var(--ids-comp-sidenav-navitem-single-size-height-dense),
13159
+ var(--ids-comp-sidenav-navitem-expandable-summary-size-height-dense)
13146
13160
  );
13147
- max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
13161
+ max-height: calc(var(--submenu-items-count) * var(--submenu-item-height) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) + var(--submenu-items-gap-count) * (var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense) + var(--ids-comp-sidenav-section-list-size-gap-dense)));
13148
13162
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense);
13149
13163
  padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense);
13150
13164
  }