@i-cell/ids-styles 0.0.71 → 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 (7) hide show
  1. package/dist/components.css +31 -2
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +32 -2
  4. package/dist/datepicker/datepicker.css +31 -2
  5. package/dist/datepicker/datepicker.min.css +1 -1
  6. package/dist/datepicker/datepicker.plugin.js +32 -2
  7. package/package.json +1 -1
package/dist/components.plugin.js CHANGED
@@ -5336,11 +5336,10 @@ module.exports = function ComponentsPlugin() {
5336
5336
  boxSizing: 'border-box',
5337
5337
  borderWidth: '1px',
5338
5338
  borderStyle: 'solid',
5339
- borderColor: '#d3d3d3',
5339
+ borderColor: 'rgba(0,0,0,0)',
5340
5340
  lineHeight: 1.5,
5341
5341
  display: 'flex',
5342
5342
  flexDirection: 'column',
5343
- backgroundColor: '#fff',
5344
5343
  },
5345
5344
  '.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after': {
5346
5345
  boxSizing: 'border-box',
@@ -5362,6 +5361,7 @@ module.exports = function ComponentsPlugin() {
5362
5361
  '.ids-calendar.ids-calendar-compact': {
5363
5362
  gap: 'var(--ids-comp-date-picker-size-gap-compact)',
5364
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)',
5365
5365
  },
5366
5366
  '.ids-calendar.ids-calendar-compact .ids-calendar-grid': {
5367
5367
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-compact)',
@@ -5402,6 +5402,7 @@ module.exports = function ComponentsPlugin() {
5402
5402
  '.ids-calendar.ids-calendar-comfortable': {
5403
5403
  gap: 'var(--ids-comp-date-picker-size-gap-comfortable)',
5404
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)',
5405
5406
  },
5406
5407
  '.ids-calendar.ids-calendar-comfortable .ids-calendar-grid': {
5407
5408
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-comfortable)',
@@ -5443,6 +5444,7 @@ module.exports = function ComponentsPlugin() {
5443
5444
  '.ids-calendar.ids-calendar-spacious': {
5444
5445
  gap: 'var(--ids-comp-date-picker-size-gap-spacious)',
5445
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)',
5446
5448
  },
5447
5449
  '.ids-calendar.ids-calendar-spacious .ids-calendar-grid': {
5448
5450
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-spacious)',
@@ -5484,6 +5486,7 @@ module.exports = function ComponentsPlugin() {
5484
5486
  '.ids-calendar.ids-calendar-dense': {
5485
5487
  gap: 'var(--ids-comp-date-picker-size-gap-dense)',
5486
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)',
5487
5490
  },
5488
5491
  '.ids-calendar.ids-calendar-dense .ids-calendar-grid': {
5489
5492
  columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-dense)',
@@ -5521,6 +5524,15 @@ module.exports = function ComponentsPlugin() {
5521
5524
  '.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
5522
5525
  outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-dense)',
5523
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
+ },
5524
5536
  '.ids-calendar.ids-calendar-surface .ids-calendar-cell': {
5525
5537
  backgroundColor: 'var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default)',
5526
5538
  borderColor: 'var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)',
@@ -5597,6 +5609,24 @@ module.exports = function ComponentsPlugin() {
5597
5609
  '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
5598
5610
  outlineColor: 'var(--ids-comp-date-picker-focused-outline-color-dark)',
5599
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
+ },
5600
5630
  '.ids-year-selector>.ids-year-selector__years-grid': {
5601
5631
  display: 'grid',
5602
5632
  gridTemplateColumns: 'repeat(4, 1fr)',
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.71",
3
+ "version": "0.0.72",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {