@i-cell/ids-styles 0.0.70 → 0.0.71

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/checkbox/checkbox-group.css +40 -12
  2. package/dist/checkbox/checkbox-group.min.css +1 -1
  3. package/dist/checkbox/checkbox-group.plugin.js +40 -12
  4. package/dist/checkbox/checkbox.css +6 -0
  5. package/dist/checkbox/checkbox.min.css +1 -1
  6. package/dist/checkbox/checkbox.plugin.js +9 -1
  7. package/dist/components.css +73 -24
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +70 -22
  10. package/dist/dialog/dialog.css +8 -6
  11. package/dist/dialog/dialog.min.css +1 -1
  12. package/dist/dialog/dialog.plugin.js +2 -2
  13. package/dist/radio/radio.css +18 -5
  14. package/dist/radio/radio.min.css +1 -1
  15. package/dist/radio/radio.plugin.js +11 -6
  16. package/dist/side-sheet/side-sheet.css +1 -1
  17. package/dist/side-sheet/side-sheet.min.css +1 -1
  18. package/dist/side-sheet/side-sheet.plugin.js +8 -1
  19. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -3535,7 +3535,7 @@ input[autocomplete] {
3535
3535
  justify-content: center;
3536
3536
  align-items: flex-start;
3537
3537
  }
3538
- .ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3538
+ .ids-checkbox-group > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3539
3539
  font-style: normal;
3540
3540
  }
3541
3541
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -3553,10 +3553,17 @@ input[autocomplete] {
3553
3553
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);
3554
3554
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
3555
3555
  }
3556
- .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
3556
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend-wrapper {
3557
+ display: flex;
3558
+ flex-direction: column;
3557
3559
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
3558
3560
  }
3559
- .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3561
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3562
+ display: flex;
3563
+ flex-direction: row;
3564
+ gap: var(--ids-comp-checkbox-label-size-gap-compact);
3565
+ }
3566
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3560
3567
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
3561
3568
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
3562
3569
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
@@ -3583,10 +3590,17 @@ input[autocomplete] {
3583
3590
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);
3584
3591
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
3585
3592
  }
3586
- .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
3593
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend-wrapper {
3594
+ display: flex;
3595
+ flex-direction: column;
3587
3596
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
3588
3597
  }
3589
- .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3598
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3599
+ display: flex;
3600
+ flex-direction: row;
3601
+ gap: var(--ids-comp-checkbox-label-size-gap-comfortable);
3602
+ }
3603
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3590
3604
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
3591
3605
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
3592
3606
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
@@ -3613,10 +3627,17 @@ input[autocomplete] {
3613
3627
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);
3614
3628
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
3615
3629
  }
3616
- .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
3630
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend-wrapper {
3631
+ display: flex;
3632
+ flex-direction: column;
3617
3633
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
3618
3634
  }
3619
- .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3635
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3636
+ display: flex;
3637
+ flex-direction: row;
3638
+ gap: var(--ids-comp-checkbox-label-size-gap-spacious);
3639
+ }
3640
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3620
3641
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
3621
3642
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
3622
3643
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
@@ -3643,10 +3664,17 @@ input[autocomplete] {
3643
3664
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);
3644
3665
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
3645
3666
  }
3646
- .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
3667
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend-wrapper {
3668
+ display: flex;
3669
+ flex-direction: column;
3647
3670
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
3648
3671
  }
3649
- .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3672
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3673
+ display: flex;
3674
+ flex-direction: row;
3675
+ gap: var(--ids-comp-checkbox-label-size-gap-dense);
3676
+ }
3677
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3650
3678
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
3651
3679
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
3652
3680
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
@@ -3669,13 +3697,13 @@ input[autocomplete] {
3669
3697
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);
3670
3698
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3671
3699
  }
3672
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3700
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3673
3701
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
3674
3702
  }
3675
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3703
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3676
3704
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
3677
3705
  }
3678
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3706
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3679
3707
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
3680
3708
  }
3681
3709
 
@@ -3730,6 +3758,8 @@ input[autocomplete] {
3730
3758
  }
3731
3759
  .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container {
3732
3760
  text-align: start;
3761
+ display: flex;
3762
+ flex-direction: row;
3733
3763
  }
3734
3764
  .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
3735
3765
  font-style: normal;
@@ -3778,6 +3808,7 @@ input[autocomplete] {
3778
3808
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-compact);
3779
3809
  font-size: var(--ids-comp-checkbox-label-typography-font-size-compact);
3780
3810
  line-height: var(--ids-comp-checkbox-label-typography-line-height-compact);
3811
+ gap: var(--ids-comp-checkbox-label-size-gap-compact);
3781
3812
  }
3782
3813
  .ids-checkbox.ids-checkbox-comfortable {
3783
3814
  padding: var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable);
@@ -3820,6 +3851,7 @@ input[autocomplete] {
3820
3851
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable);
3821
3852
  font-size: var(--ids-comp-checkbox-label-typography-font-size-comfortable);
3822
3853
  line-height: var(--ids-comp-checkbox-label-typography-line-height-comfortable);
3854
+ gap: var(--ids-comp-checkbox-label-size-gap-comfortable);
3823
3855
  }
3824
3856
  .ids-checkbox.ids-checkbox-spacious {
3825
3857
  padding: var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious);
@@ -3862,6 +3894,7 @@ input[autocomplete] {
3862
3894
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-spacious);
3863
3895
  font-size: var(--ids-comp-checkbox-label-typography-font-size-spacious);
3864
3896
  line-height: var(--ids-comp-checkbox-label-typography-line-height-spacious);
3897
+ gap: var(--ids-comp-checkbox-label-size-gap-spacious);
3865
3898
  }
3866
3899
  .ids-checkbox.ids-checkbox-dense {
3867
3900
  padding: var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense);
@@ -3904,6 +3937,7 @@ input[autocomplete] {
3904
3937
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-dense);
3905
3938
  font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
3906
3939
  line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
3940
+ gap: var(--ids-comp-checkbox-label-size-gap-dense);
3907
3941
  }
3908
3942
  .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
3909
3943
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
@@ -5807,6 +5841,14 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5807
5841
  grid-template-columns: repeat(7, 1fr);
5808
5842
  }
5809
5843
 
5844
+ .ids-dialog-backdrop {
5845
+ background-color: var(--ids-comp-dialog-backdrop-background);
5846
+ }
5847
+
5848
+ .ids-dialog-transparent-backdrop {
5849
+ background-color: transparent;
5850
+ }
5851
+
5810
5852
  .ids-dialog {
5811
5853
  box-sizing: border-box;
5812
5854
  border-width: 0;
@@ -5825,12 +5867,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5825
5867
  border-style: none;
5826
5868
  border-color: transparent;
5827
5869
  }
5828
- .ids-dialog::backdrop {
5829
- background-color: transparent;
5830
- }
5831
- .ids-dialog.ids-dialog-with-backdrop::backdrop {
5832
- background-color: var(--ids-comp-dialog-backdrop-background);
5833
- }
5834
5870
  .ids-dialog .ids-dialog-container {
5835
5871
  display: grid;
5836
5872
  grid-template-rows: auto 1fr auto;
@@ -10702,7 +10738,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10702
10738
  border-color: transparent;
10703
10739
  }
10704
10740
  .ids-radio-group.ids-radio-group-left {
10705
- align-items: flex-end;
10741
+ align-items: flex-start;
10706
10742
  }
10707
10743
  .ids-radio-group.ids-radio-group-right {
10708
10744
  align-items: flex-start;
@@ -10721,8 +10757,20 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10721
10757
  flex-direction: row;
10722
10758
  align-items: center;
10723
10759
  }
10760
+ .ids-radio-group.ids-radio-group-horizontal.ids-radio-group-top > .ids-radio-group__list {
10761
+ align-items: flex-end;
10762
+ }
10763
+ .ids-radio-group.ids-radio-group-horizontal.ids-radio-group-bottom > .ids-radio-group__list {
10764
+ align-items: flex-start;
10765
+ }
10724
10766
  .ids-radio-group.ids-radio-group-vertical > .ids-radio-group__list {
10725
10767
  flex-direction: column;
10768
+ align-items: center;
10769
+ }
10770
+ .ids-radio-group.ids-radio-group-vertical.ids-radio-group-left > .ids-radio-group__list {
10771
+ align-items: flex-end;
10772
+ }
10773
+ .ids-radio-group.ids-radio-group-vertical.ids-radio-group-right > .ids-radio-group__list {
10726
10774
  align-items: flex-start;
10727
10775
  }
10728
10776
  .ids-radio-group .ids-radio {
@@ -10751,6 +10799,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10751
10799
  }
10752
10800
  .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label {
10753
10801
  justify-content: center;
10802
+ text-align: center;
10754
10803
  }
10755
10804
  .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10756
10805
  align-items: flex-start;
@@ -10812,7 +10861,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10812
10861
  cursor: not-allowed;
10813
10862
  }
10814
10863
  .ids-radio-group.ids-radio-group-compact {
10815
- padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-compact);
10864
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-compact);
10816
10865
  gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-compact);
10817
10866
  }
10818
10867
  .ids-radio-group.ids-radio-group-compact > .ids-radio-group__legend {
@@ -10875,7 +10924,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10875
10924
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
10876
10925
  }
10877
10926
  .ids-radio-group.ids-radio-group-comfortable {
10878
- padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-comfortable);
10927
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-comfortable);
10879
10928
  gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-comfortable);
10880
10929
  }
10881
10930
  .ids-radio-group.ids-radio-group-comfortable > .ids-radio-group__legend {
@@ -10938,7 +10987,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10938
10987
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
10939
10988
  }
10940
10989
  .ids-radio-group.ids-radio-group-spacious {
10941
- padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-spacious);
10990
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-spacious);
10942
10991
  gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-spacious);
10943
10992
  }
10944
10993
  .ids-radio-group.ids-radio-group-spacious > .ids-radio-group__legend {
@@ -11001,7 +11050,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11001
11050
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
11002
11051
  }
11003
11052
  .ids-radio-group.ids-radio-group-dense {
11004
- padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-dense);
11053
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-dense);
11005
11054
  gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-dense);
11006
11055
  }
11007
11056
  .ids-radio-group.ids-radio-group-dense > .ids-radio-group__legend {
@@ -13342,7 +13391,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13342
13391
  left: 0;
13343
13392
  width: 100vw;
13344
13393
  height: 100vh;
13345
- z-index: 999;
13394
+ z-index: 1000;
13346
13395
  }
13347
13396
  .ids-side-sheet .ids-side-sheet__container, .ids-side-sheet .ids-side-sheet__container--inline {
13348
13397
  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);