@i-cell/ids-styles 0.0.70 → 0.0.72

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/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 +104 -26
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +102 -24
  10. package/dist/datepicker/datepicker.css +31 -2
  11. package/dist/datepicker/datepicker.min.css +1 -1
  12. package/dist/datepicker/datepicker.plugin.js +32 -2
  13. package/dist/dialog/dialog.css +8 -6
  14. package/dist/dialog/dialog.min.css +1 -1
  15. package/dist/dialog/dialog.plugin.js +2 -2
  16. package/dist/radio/radio.css +18 -5
  17. package/dist/radio/radio.min.css +1 -1
  18. package/dist/radio/radio.plugin.js +11 -6
  19. package/dist/side-sheet/side-sheet.css +1 -1
  20. package/dist/side-sheet/side-sheet.min.css +1 -1
  21. package/dist/side-sheet/side-sheet.plugin.js +8 -1
  22. package/package.json +1 -1
package/dist/components.plugin.js CHANGED
@@ -3357,7 +3357,7 @@ module.exports = function ComponentsPlugin() {
3357
3357
  borderColor: 'var(--ids-comp-card-elevated-color-border-surface-disabled)',
3358
3358
  },
3359
3359
  '.ids-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
3360
- '.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': { fontStyle: 'normal' },
3360
+ '.ids-checkbox-group>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': { fontStyle: 'normal' },
3361
3361
  '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
3362
3362
  '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
3363
3363
  '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
@@ -3366,10 +3366,17 @@ module.exports = function ComponentsPlugin() {
3366
3366
  'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact)',
3367
3367
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)',
3368
3368
  },
3369
- '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend': {
3369
+ '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend-wrapper': {
3370
+ display: 'flex',
3371
+ flexDirection: 'column',
3370
3372
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)',
3371
3373
  },
3372
- '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3374
+ '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-container': {
3375
+ display: 'flex',
3376
+ flexDirection: 'row',
3377
+ gap: 'var(--ids-comp-checkbox-label-size-gap-compact)',
3378
+ },
3379
+ '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3373
3380
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
3374
3381
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
3375
3382
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
@@ -3405,10 +3412,17 @@ module.exports = function ComponentsPlugin() {
3405
3412
  'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable)',
3406
3413
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)',
3407
3414
  },
3408
- '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend': {
3415
+ '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend-wrapper': {
3416
+ display: 'flex',
3417
+ flexDirection: 'column',
3409
3418
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)',
3410
3419
  },
3411
- '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3420
+ '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-container': {
3421
+ display: 'flex',
3422
+ flexDirection: 'row',
3423
+ gap: 'var(--ids-comp-checkbox-label-size-gap-comfortable)',
3424
+ },
3425
+ '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3412
3426
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
3413
3427
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
3414
3428
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
@@ -3444,10 +3458,17 @@ module.exports = function ComponentsPlugin() {
3444
3458
  'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious)',
3445
3459
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)',
3446
3460
  },
3447
- '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend': {
3461
+ '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend-wrapper': {
3462
+ display: 'flex',
3463
+ flexDirection: 'column',
3448
3464
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)',
3449
3465
  },
3450
- '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3466
+ '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-container': {
3467
+ display: 'flex',
3468
+ flexDirection: 'row',
3469
+ gap: 'var(--ids-comp-checkbox-label-size-gap-spacious)',
3470
+ },
3471
+ '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3451
3472
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
3452
3473
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
3453
3474
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
@@ -3483,10 +3504,17 @@ module.exports = function ComponentsPlugin() {
3483
3504
  'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense)',
3484
3505
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)',
3485
3506
  },
3486
- '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend': {
3507
+ '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend-wrapper': {
3508
+ display: 'flex',
3509
+ flexDirection: 'column',
3487
3510
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)',
3488
3511
  },
3489
- '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3512
+ '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-container': {
3513
+ display: 'flex',
3514
+ flexDirection: 'row',
3515
+ gap: 'var(--ids-comp-checkbox-label-size-gap-dense)',
3516
+ },
3517
+ '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3490
3518
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
3491
3519
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
3492
3520
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
@@ -3517,13 +3545,13 @@ module.exports = function ComponentsPlugin() {
3517
3545
  'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense)',
3518
3546
  gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
3519
3547
  },
3520
- '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3548
+ '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3521
3549
  color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
3522
3550
  },
3523
- '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3551
+ '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3524
3552
  color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
3525
3553
  },
3526
- '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
3554
+ '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend-wrapper>.ids-checkbox-group__legend-label': {
3527
3555
  color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
3528
3556
  },
3529
3557
  '.ids-checkbox': {
@@ -3561,7 +3589,11 @@ module.exports = function ComponentsPlugin() {
3561
3589
  '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
3562
3590
  '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon>.ids-icon': { color: 'inherit' },
3563
3591
  '.ids-checkbox .ids-checkbox__label-wrapper': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: '1 0 0' },
3564
- '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': { textAlign: 'start' },
3592
+ '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
3593
+ textAlign: 'start',
3594
+ display: 'flex',
3595
+ flexDirection: 'row',
3596
+ },
3565
3597
  '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': { fontStyle: 'normal' },
3566
3598
  '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container': { width: '100%' },
3567
3599
  '.ids-checkbox.ids-checkbox-compact': {
@@ -3604,6 +3636,7 @@ module.exports = function ComponentsPlugin() {
3604
3636
  letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-compact)',
3605
3637
  fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-compact)',
3606
3638
  lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-compact)',
3639
+ gap: 'var(--ids-comp-checkbox-label-size-gap-compact)',
3607
3640
  },
3608
3641
  '.ids-checkbox.ids-checkbox-comfortable': {
3609
3642
  padding:
@@ -3647,6 +3680,7 @@ module.exports = function ComponentsPlugin() {
3647
3680
  letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable)',
3648
3681
  fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-comfortable)',
3649
3682
  lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-comfortable)',
3683
+ gap: 'var(--ids-comp-checkbox-label-size-gap-comfortable)',
3650
3684
  },
3651
3685
  '.ids-checkbox.ids-checkbox-spacious': {
3652
3686
  padding: 'var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious)',
@@ -3689,6 +3723,7 @@ module.exports = function ComponentsPlugin() {
3689
3723
  letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-spacious)',
3690
3724
  fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-spacious)',
3691
3725
  lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-spacious)',
3726
+ gap: 'var(--ids-comp-checkbox-label-size-gap-spacious)',
3692
3727
  },
3693
3728
  '.ids-checkbox.ids-checkbox-dense': {
3694
3729
  padding: 'var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense)',
@@ -3730,6 +3765,7 @@ module.exports = function ComponentsPlugin() {
3730
3765
  letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-dense)',
3731
3766
  fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-dense)',
3732
3767
  lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-dense)',
3768
+ gap: 'var(--ids-comp-checkbox-label-size-gap-dense)',
3733
3769
  },
3734
3770
  '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true])':
3735
3771
  {
@@ -5300,11 +5336,10 @@ module.exports = function ComponentsPlugin() {
5300
5336
  boxSizing: 'border-box',
5301
5337
  borderWidth: '1px',
5302
5338
  borderStyle: 'solid',
5303
- borderColor: '#d3d3d3',
5339
+ borderColor: 'rgba(0,0,0,0)',
5304
5340
  lineHeight: 1.5,
5305
5341
  display: 'flex',
5306
5342
  flexDirection: 'column',
5307
- backgroundColor: '#fff',
5308
5343
  },
5309
5344
  '.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after': {
5310
5345
  boxSizing: 'border-box',
@@ -5326,6 +5361,7 @@ module.exports = function ComponentsPlugin() {
5326
5361
  '.ids-calendar.ids-calendar-compact': {
5327
5362
  gap: 'var(--ids-comp-date-picker-size-gap-compact)',
5328
5363
  padding: 'var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact)',
5364
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-compact)',
5329
5365
  },
5330
5366
  '.ids-calendar.ids-calendar-compact .ids-calendar-grid': {
5331
5367
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-compact)',
@@ -5366,6 +5402,7 @@ module.exports = function ComponentsPlugin() {
5366
5402
  '.ids-calendar.ids-calendar-comfortable': {
5367
5403
  gap: 'var(--ids-comp-date-picker-size-gap-comfortable)',
5368
5404
  padding: 'var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable)',
5405
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-comfortable)',
5369
5406
  },
5370
5407
  '.ids-calendar.ids-calendar-comfortable .ids-calendar-grid': {
5371
5408
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-comfortable)',
@@ -5407,6 +5444,7 @@ module.exports = function ComponentsPlugin() {
5407
5444
  '.ids-calendar.ids-calendar-spacious': {
5408
5445
  gap: 'var(--ids-comp-date-picker-size-gap-spacious)',
5409
5446
  padding: 'var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious)',
5447
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-spacious)',
5410
5448
  },
5411
5449
  '.ids-calendar.ids-calendar-spacious .ids-calendar-grid': {
5412
5450
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-spacious)',
@@ -5448,6 +5486,7 @@ module.exports = function ComponentsPlugin() {
5448
5486
  '.ids-calendar.ids-calendar-dense': {
5449
5487
  gap: 'var(--ids-comp-date-picker-size-gap-dense)',
5450
5488
  padding: 'var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense)',
5489
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-dense)',
5451
5490
  },
5452
5491
  '.ids-calendar.ids-calendar-dense .ids-calendar-grid': {
5453
5492
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-dense)',
@@ -5485,6 +5524,15 @@ module.exports = function ComponentsPlugin() {
5485
5524
  '.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
5486
5525
  outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-dense)',
5487
5526
  },
5527
+ '.ids-calendar.ids-calendar-filled': { boxShadow: 'none' },
5528
+ '.ids-calendar.ids-calendar-outlined': {
5529
+ boxShadow:
5530
+ '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)',
5531
+ },
5532
+ '.ids-calendar.ids-calendar-elevated': {
5533
+ boxShadow:
5534
+ '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)',
5535
+ },
5488
5536
  '.ids-calendar.ids-calendar-surface .ids-calendar-cell': {
5489
5537
  backgroundColor: 'var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default)',
5490
5538
  borderColor: 'var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)',
@@ -5561,6 +5609,24 @@ module.exports = function ComponentsPlugin() {
5561
5609
  '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
5562
5610
  outlineColor: 'var(--ids-comp-date-picker-focused-outline-color-dark)',
5563
5611
  },
5612
+ '.ids-calendar.ids-calendar-filled.ids-calendar-surface': {
5613
+ background: 'var(--ids-comp-overlay-panel-filled-color-bg-surface-default)',
5614
+ },
5615
+ '.ids-calendar.ids-calendar-filled.ids-calendar-surface.ids-calendar-outlined': {
5616
+ borderColor: 'var(--ids-comp-overlay-panel-filled-color-border-surface-default)',
5617
+ },
5618
+ '.ids-calendar.ids-calendar-outlined.ids-calendar-surface': {
5619
+ background: 'var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)',
5620
+ },
5621
+ '.ids-calendar.ids-calendar-outlined.ids-calendar-surface.ids-calendar-outlined': {
5622
+ borderColor: 'var(--ids-comp-overlay-panel-outlined-color-border-surface-default)',
5623
+ },
5624
+ '.ids-calendar.ids-calendar-elevated.ids-calendar-surface': {
5625
+ background: 'var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)',
5626
+ },
5627
+ '.ids-calendar.ids-calendar-elevated.ids-calendar-surface.ids-calendar-outlined': {
5628
+ borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-surface-default)',
5629
+ },
5564
5630
  '.ids-year-selector>.ids-year-selector__years-grid': {
5565
5631
  display: 'grid',
5566
5632
  gridTemplateColumns: 'repeat(4, 1fr)',
@@ -5574,6 +5640,8 @@ module.exports = function ComponentsPlugin() {
5574
5640
  justifyItems: 'center',
5575
5641
  },
5576
5642
  '.ids-day-selector>.ids-day-selector__days-grid': { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' },
5643
+ '.ids-dialog-backdrop': { backgroundColor: 'var(--ids-comp-dialog-backdrop-background)' },
5644
+ '.ids-dialog-transparent-backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
5577
5645
  '.ids-dialog': {
5578
5646
  boxSizing: 'border-box',
5579
5647
  borderWidth: '0',
@@ -5591,8 +5659,6 @@ module.exports = function ComponentsPlugin() {
5591
5659
  borderStyle: 'none',
5592
5660
  borderColor: 'rgba(0,0,0,0)',
5593
5661
  },
5594
- '.ids-dialog::backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
5595
- '.ids-dialog.ids-dialog-with-backdrop::backdrop': { backgroundColor: 'var(--ids-comp-dialog-backdrop-background)' },
5596
5662
  '.ids-dialog .ids-dialog-container': { display: 'grid', gridTemplateRows: 'auto 1fr auto', position: 'relative', maxHeight: '80vh' },
5597
5663
  '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'grid', gridTemplateColumns: '1fr auto' },
5598
5664
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
@@ -9746,7 +9812,7 @@ module.exports = function ComponentsPlugin() {
9746
9812
  borderStyle: 'none',
9747
9813
  borderColor: 'rgba(0,0,0,0)',
9748
9814
  },
9749
- '.ids-radio-group.ids-radio-group-left': { alignItems: 'flex-end' },
9815
+ '.ids-radio-group.ids-radio-group-left': { alignItems: 'flex-start' },
9750
9816
  '.ids-radio-group.ids-radio-group-right': { alignItems: 'flex-start' },
9751
9817
  '.ids-radio-group>.ids-radio-group__legend': { display: 'flex', flexDirection: 'column' },
9752
9818
  '.ids-radio-group>.ids-radio-group__legend>.ids-radio-group__legend-container>.ids-radio-group__legend-label': {
@@ -9754,7 +9820,11 @@ module.exports = function ComponentsPlugin() {
9754
9820
  },
9755
9821
  '.ids-radio-group>.ids-radio-group__list': { display: 'flex' },
9756
9822
  '.ids-radio-group.ids-radio-group-horizontal>.ids-radio-group__list': { flexDirection: 'row', alignItems: 'center' },
9757
- '.ids-radio-group.ids-radio-group-vertical>.ids-radio-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
9823
+ '.ids-radio-group.ids-radio-group-horizontal.ids-radio-group-top>.ids-radio-group__list': { alignItems: 'flex-end' },
9824
+ '.ids-radio-group.ids-radio-group-horizontal.ids-radio-group-bottom>.ids-radio-group__list': { alignItems: 'flex-start' },
9825
+ '.ids-radio-group.ids-radio-group-vertical>.ids-radio-group__list': { flexDirection: 'column', alignItems: 'center' },
9826
+ '.ids-radio-group.ids-radio-group-vertical.ids-radio-group-left>.ids-radio-group__list': { alignItems: 'flex-end' },
9827
+ '.ids-radio-group.ids-radio-group-vertical.ids-radio-group-right>.ids-radio-group__list': { alignItems: 'flex-start' },
9758
9828
  '.ids-radio-group .ids-radio': { display: 'flex', alignItems: 'center' },
9759
9829
  '.ids-radio-group .ids-radio.ids-radio-left': { flexDirection: 'row-reverse', justifyContent: 'start' },
9760
9830
  '.ids-radio-group .ids-radio.ids-radio-right': { flexDirection: 'row', justifyContent: 'start' },
@@ -9764,6 +9834,7 @@ module.exports = function ComponentsPlugin() {
9764
9834
  { alignItems: 'center' },
9765
9835
  '.ids-radio-group .ids-radio.ids-radio-top .ids-radio__label,.ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label': {
9766
9836
  justifyContent: 'center',
9837
+ textAlign: 'center',
9767
9838
  },
9768
9839
  '.ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper,.ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper':
9769
9840
  { alignItems: 'flex-start' },
@@ -9813,7 +9884,7 @@ module.exports = function ComponentsPlugin() {
9813
9884
  { cursor: 'not-allowed' },
9814
9885
  '.ids-radio-group.ids-radio-group-compact': {
9815
9886
  padding:
9816
- 'var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-compact)',
9887
+ 'var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-compact)',
9817
9888
  gap: 'var(--ids-comp-radio-group-vertical-fieldset-size-gap-compact)',
9818
9889
  },
9819
9890
  '.ids-radio-group.ids-radio-group-compact>.ids-radio-group__legend': {
@@ -9879,7 +9950,7 @@ module.exports = function ComponentsPlugin() {
9879
9950
  },
9880
9951
  '.ids-radio-group.ids-radio-group-comfortable': {
9881
9952
  padding:
9882
- 'var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-comfortable)',
9953
+ 'var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-comfortable)',
9883
9954
  gap: 'var(--ids-comp-radio-group-vertical-fieldset-size-gap-comfortable)',
9884
9955
  },
9885
9956
  '.ids-radio-group.ids-radio-group-comfortable>.ids-radio-group__legend': {
@@ -9946,7 +10017,7 @@ module.exports = function ComponentsPlugin() {
9946
10017
  },
9947
10018
  '.ids-radio-group.ids-radio-group-spacious': {
9948
10019
  padding:
9949
- 'var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-spacious)',
10020
+ 'var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-spacious)',
9950
10021
  gap: 'var(--ids-comp-radio-group-vertical-fieldset-size-gap-spacious)',
9951
10022
  },
9952
10023
  '.ids-radio-group.ids-radio-group-spacious>.ids-radio-group__legend': {
@@ -10012,7 +10083,7 @@ module.exports = function ComponentsPlugin() {
10012
10083
  },
10013
10084
  '.ids-radio-group.ids-radio-group-dense': {
10014
10085
  padding:
10015
- 'var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-dense)',
10086
+ 'var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-dense)',
10016
10087
  gap: 'var(--ids-comp-radio-group-vertical-fieldset-size-gap-dense)',
10017
10088
  },
10018
10089
  '.ids-radio-group.ids-radio-group-dense>.ids-radio-group__legend': {
@@ -12198,7 +12269,14 @@ module.exports = function ComponentsPlugin() {
12198
12269
  borderStyle: 'none',
12199
12270
  borderColor: 'rgba(0,0,0,0)',
12200
12271
  },
12201
- '.ids-side-sheet .ids-side-sheet__backdrop': { position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', zIndex: 999 },
12272
+ '.ids-side-sheet .ids-side-sheet__backdrop': {
12273
+ position: 'fixed',
12274
+ top: '0',
12275
+ left: '0',
12276
+ width: '100vw',
12277
+ height: '100vh',
12278
+ zIndex: 1000,
12279
+ },
12202
12280
  '.ids-side-sheet .ids-side-sheet__container,.ids-side-sheet .ids-side-sheet__container--inline': {
12203
12281
  boxShadow:
12204
12282
  '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)',
package/dist/datepicker/datepicker.css CHANGED
@@ -15,10 +15,8 @@
15
15
  .ids-calendar {
16
16
  display: flex;
17
17
  flex-direction: column;
18
- background-color: white;
19
18
  border-width: 1px;
20
19
  border-style: solid;
21
- border-color: lightgrey;
22
20
  }
23
21
  .ids-calendar > .ids-calendar__header {
24
22
  display: flex;
@@ -49,6 +47,7 @@
49
47
  .ids-calendar.ids-calendar-compact {
50
48
  gap: var(--ids-comp-date-picker-size-gap-compact);
51
49
  padding: var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact);
50
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-compact);
52
51
  }
53
52
  .ids-calendar.ids-calendar-compact .ids-calendar-grid {
54
53
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-compact);
@@ -88,6 +87,7 @@
88
87
  .ids-calendar.ids-calendar-comfortable {
89
88
  gap: var(--ids-comp-date-picker-size-gap-comfortable);
90
89
  padding: var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable);
90
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-comfortable);
91
91
  }
92
92
  .ids-calendar.ids-calendar-comfortable .ids-calendar-grid {
93
93
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);
@@ -127,6 +127,7 @@
127
127
  .ids-calendar.ids-calendar-spacious {
128
128
  gap: var(--ids-comp-date-picker-size-gap-spacious);
129
129
  padding: var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious);
130
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-spacious);
130
131
  }
131
132
  .ids-calendar.ids-calendar-spacious .ids-calendar-grid {
132
133
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-spacious);
@@ -166,6 +167,7 @@
166
167
  .ids-calendar.ids-calendar-dense {
167
168
  gap: var(--ids-comp-date-picker-size-gap-dense);
168
169
  padding: var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense);
170
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-dense);
169
171
  }
170
172
  .ids-calendar.ids-calendar-dense .ids-calendar-grid {
171
173
  column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-dense);
@@ -202,6 +204,15 @@
202
204
  .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
203
205
  outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-dense);
204
206
  }
207
+ .ids-calendar.ids-calendar-filled {
208
+ box-shadow: none;
209
+ }
210
+ .ids-calendar.ids-calendar-outlined {
211
+ 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);
212
+ }
213
+ .ids-calendar.ids-calendar-elevated {
214
+ 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);
215
+ }
205
216
  .ids-calendar.ids-calendar-surface .ids-calendar-cell {
206
217
  background-color: var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);
207
218
  border-color: var(--ids-comp-date-picker-cell-unselected-color-border-surface-default);
@@ -278,6 +289,24 @@
278
289
  .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
279
290
  outline-color: var(--ids-comp-date-picker-focused-outline-color-dark);
280
291
  }
292
+ .ids-calendar.ids-calendar-filled.ids-calendar-surface {
293
+ background: var(--ids-comp-overlay-panel-filled-color-bg-surface-default);
294
+ }
295
+ .ids-calendar.ids-calendar-filled.ids-calendar-surface.ids-calendar-outlined {
296
+ border-color: var(--ids-comp-overlay-panel-filled-color-border-surface-default);
297
+ }
298
+ .ids-calendar.ids-calendar-outlined.ids-calendar-surface {
299
+ background: var(--ids-comp-overlay-panel-outlined-color-bg-surface-default);
300
+ }
301
+ .ids-calendar.ids-calendar-outlined.ids-calendar-surface.ids-calendar-outlined {
302
+ border-color: var(--ids-comp-overlay-panel-outlined-color-border-surface-default);
303
+ }
304
+ .ids-calendar.ids-calendar-elevated.ids-calendar-surface {
305
+ background: var(--ids-comp-overlay-panel-elevated-color-bg-surface-default);
306
+ }
307
+ .ids-calendar.ids-calendar-elevated.ids-calendar-surface.ids-calendar-outlined {
308
+ border-color: var(--ids-comp-overlay-panel-elevated-color-border-surface-default);
309
+ }
281
310
 
282
311
  .ids-year-selector > .ids-year-selector__years-grid {
283
312
  display: grid;
package/dist/datepicker/datepicker.min.css CHANGED
@@ -1 +1 @@
1
- .ids-calendar{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-calendar{display:flex;flex-direction:column;background-color:#fff;border-width:1px;border-style:solid;border-color:#d3d3d3}.ids-calendar>.ids-calendar__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.ids-calendar .ids-calendar-cell{display:flex;flex-direction:row;align-items:center;justify-content:center}.ids-calendar .ids-calendar-cell>.ids-calendar-button{cursor:pointer;outline-style:none}.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{border-style:solid}.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-style:solid;outline-offset:2px}.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled{cursor:default}.ids-calendar.ids-calendar-compact{gap:var(--ids-comp-date-picker-size-gap-compact);padding:var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-compact);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-compact);padding:var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-compact);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-compact);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-compact);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-compact);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-compact);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-compact);height:var(--ids-comp-date-picker-calendar-button-size-height-compact);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-compact)}.ids-calendar.ids-calendar-comfortable{gap:var(--ids-comp-date-picker-size-gap-comfortable);padding:var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-comfortable);padding:var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable);height:var(--ids-comp-date-picker-calendar-button-size-height-comfortable);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-comfortable)}.ids-calendar.ids-calendar-spacious{gap:var(--ids-comp-date-picker-size-gap-spacious);padding:var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-spacious);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-spacious);padding:var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-spacious);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-spacious);height:var(--ids-comp-date-picker-calendar-button-size-height-spacious);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-spacious)}.ids-calendar.ids-calendar-dense{gap:var(--ids-comp-date-picker-size-gap-dense);padding:var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-dense);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-dense);padding:var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-dense);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-dense);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-dense);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-dense);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-dense);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-dense);height:var(--ids-comp-date-picker-calendar-button-size-height-dense);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-dense)}.ids-calendar.ids-calendar-surface .ids-calendar-cell{background-color:var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected{background-color:var(--ids-comp-date-picker-cell-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-weekday-label{color:var(--ids-comp-date-picker-calendar-days-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-days-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-days-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:active{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:active{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:hover{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:active{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:disabled{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-color:var(--ids-comp-date-picker-focused-outline-color-dark)}.ids-year-selector>.ids-year-selector__years-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-month-selector>.ids-month-selector__months-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-day-selector>.ids-day-selector__days-grid{display:grid;grid-template-columns:repeat(7, 1fr)}
1
+ .ids-calendar{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-calendar{display:flex;flex-direction:column;border-width:1px;border-style:solid}.ids-calendar>.ids-calendar__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.ids-calendar .ids-calendar-cell{display:flex;flex-direction:row;align-items:center;justify-content:center}.ids-calendar .ids-calendar-cell>.ids-calendar-button{cursor:pointer;outline-style:none}.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{border-style:solid}.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-style:solid;outline-offset:2px}.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled{cursor:default}.ids-calendar.ids-calendar-compact{gap:var(--ids-comp-date-picker-size-gap-compact);padding:var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-compact);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-compact);padding:var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-compact);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-compact);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-compact);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-compact);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-compact);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-compact);height:var(--ids-comp-date-picker-calendar-button-size-height-compact);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-compact)}.ids-calendar.ids-calendar-comfortable{gap:var(--ids-comp-date-picker-size-gap-comfortable);padding:var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-comfortable);padding:var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable);height:var(--ids-comp-date-picker-calendar-button-size-height-comfortable);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-comfortable)}.ids-calendar.ids-calendar-spacious{gap:var(--ids-comp-date-picker-size-gap-spacious);padding:var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-spacious);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-spacious);padding:var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-spacious);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-spacious);height:var(--ids-comp-date-picker-calendar-button-size-height-spacious);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-spacious)}.ids-calendar.ids-calendar-dense{gap:var(--ids-comp-date-picker-size-gap-dense);padding:var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-dense);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-dense);padding:var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-dense);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-dense);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-dense);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-dense);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-dense);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-dense);height:var(--ids-comp-date-picker-calendar-button-size-height-dense);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-dense)}.ids-calendar.ids-calendar-filled{box-shadow:none}.ids-calendar.ids-calendar-outlined{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)}.ids-calendar.ids-calendar-elevated{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)}.ids-calendar.ids-calendar-surface .ids-calendar-cell{background-color:var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected{background-color:var(--ids-comp-date-picker-cell-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-weekday-label{color:var(--ids-comp-date-picker-calendar-days-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-days-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-days-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:active{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:active{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:hover{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:active{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:disabled{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-color:var(--ids-comp-date-picker-focused-outline-color-dark)}.ids-calendar.ids-calendar-filled.ids-calendar-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-calendar.ids-calendar-filled.ids-calendar-surface.ids-calendar-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-calendar.ids-calendar-outlined.ids-calendar-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-calendar.ids-calendar-outlined.ids-calendar-surface.ids-calendar-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-calendar.ids-calendar-elevated.ids-calendar-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-calendar.ids-calendar-elevated.ids-calendar-surface.ids-calendar-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-year-selector>.ids-year-selector__years-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-month-selector>.ids-month-selector__months-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-day-selector>.ids-day-selector__days-grid{display:grid;grid-template-columns:repeat(7, 1fr)}
package/dist/datepicker/datepicker.plugin.js CHANGED
@@ -6,11 +6,10 @@ module.exports = function DatepickerPlugin() {
6
6
  boxSizing: 'border-box',
7
7
  borderWidth: '1px',
8
8
  borderStyle: 'solid',
9
- borderColor: '#d3d3d3',
9
+ borderColor: 'rgba(0,0,0,0)',
10
10
  lineHeight: 1.5,
11
11
  display: 'flex',
12
12
  flexDirection: 'column',
13
- backgroundColor: '#fff',
14
13
  },
15
14
  '.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after': {
16
15
  boxSizing: 'border-box',
@@ -32,6 +31,7 @@ module.exports = function DatepickerPlugin() {
32
31
  '.ids-calendar.ids-calendar-compact': {
33
32
  gap: 'var(--ids-comp-date-picker-size-gap-compact)',
34
33
  padding: 'var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact)',
34
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-compact)',
35
35
  },
36
36
  '.ids-calendar.ids-calendar-compact .ids-calendar-grid': {
37
37
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-compact)',
@@ -72,6 +72,7 @@ module.exports = function DatepickerPlugin() {
72
72
  '.ids-calendar.ids-calendar-comfortable': {
73
73
  gap: 'var(--ids-comp-date-picker-size-gap-comfortable)',
74
74
  padding: 'var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable)',
75
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-comfortable)',
75
76
  },
76
77
  '.ids-calendar.ids-calendar-comfortable .ids-calendar-grid': {
77
78
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-comfortable)',
@@ -113,6 +114,7 @@ module.exports = function DatepickerPlugin() {
113
114
  '.ids-calendar.ids-calendar-spacious': {
114
115
  gap: 'var(--ids-comp-date-picker-size-gap-spacious)',
115
116
  padding: 'var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious)',
117
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-spacious)',
116
118
  },
117
119
  '.ids-calendar.ids-calendar-spacious .ids-calendar-grid': {
118
120
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-spacious)',
@@ -154,6 +156,7 @@ module.exports = function DatepickerPlugin() {
154
156
  '.ids-calendar.ids-calendar-dense': {
155
157
  gap: 'var(--ids-comp-date-picker-size-gap-dense)',
156
158
  padding: 'var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense)',
159
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-dense)',
157
160
  },
158
161
  '.ids-calendar.ids-calendar-dense .ids-calendar-grid': {
159
162
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-dense)',
@@ -191,6 +194,15 @@ module.exports = function DatepickerPlugin() {
191
194
  '.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
192
195
  outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-dense)',
193
196
  },
197
+ '.ids-calendar.ids-calendar-filled': { boxShadow: 'none' },
198
+ '.ids-calendar.ids-calendar-outlined': {
199
+ boxShadow:
200
+ '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)',
201
+ },
202
+ '.ids-calendar.ids-calendar-elevated': {
203
+ boxShadow:
204
+ '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)',
205
+ },
194
206
  '.ids-calendar.ids-calendar-surface .ids-calendar-cell': {
195
207
  backgroundColor: 'var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default)',
196
208
  borderColor: 'var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)',
@@ -267,6 +279,24 @@ module.exports = function DatepickerPlugin() {
267
279
  '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
268
280
  outlineColor: 'var(--ids-comp-date-picker-focused-outline-color-dark)',
269
281
  },
282
+ '.ids-calendar.ids-calendar-filled.ids-calendar-surface': {
283
+ background: 'var(--ids-comp-overlay-panel-filled-color-bg-surface-default)',
284
+ },
285
+ '.ids-calendar.ids-calendar-filled.ids-calendar-surface.ids-calendar-outlined': {
286
+ borderColor: 'var(--ids-comp-overlay-panel-filled-color-border-surface-default)',
287
+ },
288
+ '.ids-calendar.ids-calendar-outlined.ids-calendar-surface': {
289
+ background: 'var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)',
290
+ },
291
+ '.ids-calendar.ids-calendar-outlined.ids-calendar-surface.ids-calendar-outlined': {
292
+ borderColor: 'var(--ids-comp-overlay-panel-outlined-color-border-surface-default)',
293
+ },
294
+ '.ids-calendar.ids-calendar-elevated.ids-calendar-surface': {
295
+ background: 'var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)',
296
+ },
297
+ '.ids-calendar.ids-calendar-elevated.ids-calendar-surface.ids-calendar-outlined': {
298
+ borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-surface-default)',
299
+ },
270
300
  '.ids-year-selector>.ids-year-selector__years-grid': {
271
301
  display: 'grid',
272
302
  gridTemplateColumns: 'repeat(4, 1fr)',
package/dist/dialog/dialog.css CHANGED
@@ -1,3 +1,11 @@
1
+ .ids-dialog-backdrop {
2
+ background-color: var(--ids-comp-dialog-backdrop-background);
3
+ }
4
+
5
+ .ids-dialog-transparent-backdrop {
6
+ background-color: transparent;
7
+ }
8
+
1
9
  .ids-dialog {
2
10
  box-sizing: border-box;
3
11
  border-width: 0;
@@ -16,12 +24,6 @@
16
24
  border-style: none;
17
25
  border-color: transparent;
18
26
  }
19
- .ids-dialog::backdrop {
20
- background-color: transparent;
21
- }
22
- .ids-dialog.ids-dialog-with-backdrop::backdrop {
23
- background-color: var(--ids-comp-dialog-backdrop-background);
24
- }
25
27
  .ids-dialog .ids-dialog-container {
26
28
  display: grid;
27
29
  grid-template-rows: auto 1fr auto;