@i-cell/ids-styles 0.0.35 → 0.0.37

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 (13) hide show
  1. package/dist/components.css +406 -4
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +360 -4
  4. package/dist/datepicker/datepicker.css +303 -0
  5. package/dist/datepicker/datepicker.min.css +1 -0
  6. package/dist/datepicker/datepicker.plugin.js +288 -0
  7. package/dist/dialog/dialog.css +4 -4
  8. package/dist/dialog/dialog.min.css +1 -1
  9. package/dist/dialog/dialog.plugin.js +4 -4
  10. package/dist/spinner/spinner.css +98 -0
  11. package/dist/spinner/spinner.min.css +1 -0
  12. package/dist/spinner/spinner.plugin.js +86 -0
  13. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -4538,6 +4538,310 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4538
4538
  row-gap: var(--ids-comp-chip-group-size-row-gap-dense);
4539
4539
  }
4540
4540
 
4541
+ .ids-calendar {
4542
+ box-sizing: border-box;
4543
+ border-width: 0;
4544
+ border-style: none;
4545
+ border-color: transparent;
4546
+ line-height: 1.5;
4547
+ }
4548
+ .ids-calendar::before, .ids-calendar::after, .ids-calendar *, .ids-calendar ::before, .ids-calendar ::after {
4549
+ box-sizing: border-box;
4550
+ border-width: 0;
4551
+ border-style: none;
4552
+ border-color: transparent;
4553
+ }
4554
+
4555
+ .ids-calendar {
4556
+ display: flex;
4557
+ flex-direction: column;
4558
+ background-color: white;
4559
+ border-width: 1px;
4560
+ border-style: solid;
4561
+ border-color: lightgrey;
4562
+ }
4563
+ .ids-calendar > .ids-calendar__header {
4564
+ display: flex;
4565
+ flex-direction: row;
4566
+ align-items: center;
4567
+ justify-content: space-between;
4568
+ }
4569
+ .ids-calendar .ids-calendar-cell {
4570
+ display: flex;
4571
+ flex-direction: row;
4572
+ align-items: center;
4573
+ justify-content: center;
4574
+ }
4575
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button {
4576
+ cursor: pointer;
4577
+ outline-style: none;
4578
+ }
4579
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected {
4580
+ cursor: default;
4581
+ pointer-events: none;
4582
+ }
4583
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today {
4584
+ border-style: solid;
4585
+ }
4586
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4587
+ outline-style: solid;
4588
+ outline-offset: 2px;
4589
+ }
4590
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button:disabled {
4591
+ cursor: default;
4592
+ }
4593
+ .ids-calendar.ids-calendar-compact {
4594
+ gap: var(--ids-comp-date-picker-size-gap-compact);
4595
+ padding: var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact);
4596
+ }
4597
+ .ids-calendar.ids-calendar-compact .ids-calendar-grid {
4598
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-compact);
4599
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-compact);
4600
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact);
4601
+ }
4602
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell {
4603
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact);
4604
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-compact);
4605
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-compact);
4606
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-compact);
4607
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact);
4608
+ }
4609
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell > .ids-calendar-weekday-label {
4610
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-compact);
4611
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-compact);
4612
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact);
4613
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact);
4614
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-compact);
4615
+ }
4616
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell > .ids-calendar-button {
4617
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-compact);
4618
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-compact);
4619
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-compact);
4620
+ height: var(--ids-comp-date-picker-calendar-button-size-height-compact);
4621
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);
4622
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);
4623
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-compact);
4624
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-compact);
4625
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact);
4626
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact);
4627
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-compact);
4628
+ }
4629
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4630
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-compact);
4631
+ }
4632
+ .ids-calendar.ids-calendar-comfortable {
4633
+ gap: var(--ids-comp-date-picker-size-gap-comfortable);
4634
+ padding: var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable);
4635
+ }
4636
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-grid {
4637
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);
4638
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-comfortable);
4639
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable);
4640
+ }
4641
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell {
4642
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable);
4643
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable);
4644
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable);
4645
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable);
4646
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable);
4647
+ }
4648
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell > .ids-calendar-weekday-label {
4649
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable);
4650
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable);
4651
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable);
4652
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable);
4653
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable);
4654
+ }
4655
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell > .ids-calendar-button {
4656
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable);
4657
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable);
4658
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable);
4659
+ height: var(--ids-comp-date-picker-calendar-button-size-height-comfortable);
4660
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);
4661
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);
4662
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable);
4663
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable);
4664
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable);
4665
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable);
4666
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable);
4667
+ }
4668
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4669
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-comfortable);
4670
+ }
4671
+ .ids-calendar.ids-calendar-spacious {
4672
+ gap: var(--ids-comp-date-picker-size-gap-spacious);
4673
+ padding: var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious);
4674
+ }
4675
+ .ids-calendar.ids-calendar-spacious .ids-calendar-grid {
4676
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-spacious);
4677
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-spacious);
4678
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious);
4679
+ }
4680
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell {
4681
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious);
4682
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious);
4683
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious);
4684
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious);
4685
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious);
4686
+ }
4687
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell > .ids-calendar-weekday-label {
4688
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious);
4689
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious);
4690
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious);
4691
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious);
4692
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious);
4693
+ }
4694
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell > .ids-calendar-button {
4695
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-spacious);
4696
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious);
4697
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-spacious);
4698
+ height: var(--ids-comp-date-picker-calendar-button-size-height-spacious);
4699
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);
4700
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);
4701
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious);
4702
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious);
4703
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious);
4704
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious);
4705
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious);
4706
+ }
4707
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4708
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-spacious);
4709
+ }
4710
+ .ids-calendar.ids-calendar-dense {
4711
+ gap: var(--ids-comp-date-picker-size-gap-dense);
4712
+ padding: var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense);
4713
+ }
4714
+ .ids-calendar.ids-calendar-dense .ids-calendar-grid {
4715
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-dense);
4716
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-dense);
4717
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense);
4718
+ }
4719
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell {
4720
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense);
4721
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-dense);
4722
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-dense);
4723
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-dense);
4724
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense);
4725
+ }
4726
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-weekday-label {
4727
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-dense);
4728
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-dense);
4729
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense);
4730
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense);
4731
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-dense);
4732
+ }
4733
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-button {
4734
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-dense);
4735
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-dense);
4736
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-dense);
4737
+ height: var(--ids-comp-date-picker-calendar-button-size-height-dense);
4738
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);
4739
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);
4740
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-dense);
4741
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-dense);
4742
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense);
4743
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense);
4744
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-dense);
4745
+ }
4746
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4747
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-dense);
4748
+ }
4749
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell {
4750
+ background-color: var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);
4751
+ border-color: var(--ids-comp-date-picker-cell-unselected-color-border-surface-default);
4752
+ }
4753
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected {
4754
+ background-color: var(--ids-comp-date-picker-cell-selected-color-bg-surface-default);
4755
+ border-color: var(--ids-comp-date-picker-cell-selected-color-border-surface-default);
4756
+ }
4757
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-weekday-label {
4758
+ color: var(--ids-comp-date-picker-calendar-days-color-fg-surface-default);
4759
+ background-color: var(--ids-comp-date-picker-calendar-days-color-bg-surface-default);
4760
+ border-color: var(--ids-comp-date-picker-calendar-days-color-border-surface-default);
4761
+ }
4762
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button {
4763
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default);
4764
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default);
4765
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default);
4766
+ }
4767
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:hover {
4768
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered);
4769
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered);
4770
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered);
4771
+ }
4772
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:active {
4773
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed);
4774
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed);
4775
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed);
4776
+ }
4777
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:disabled {
4778
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled);
4779
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled);
4780
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled);
4781
+ }
4782
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today {
4783
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default);
4784
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default);
4785
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default);
4786
+ }
4787
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today:hover {
4788
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered);
4789
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered);
4790
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered);
4791
+ }
4792
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today:active {
4793
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed);
4794
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed);
4795
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed);
4796
+ }
4797
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today:disabled {
4798
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled);
4799
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled);
4800
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled);
4801
+ }
4802
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected {
4803
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default);
4804
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default);
4805
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default);
4806
+ }
4807
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected:hover {
4808
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered);
4809
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered);
4810
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered);
4811
+ }
4812
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected:active {
4813
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed);
4814
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed);
4815
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed);
4816
+ }
4817
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected:disabled {
4818
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled);
4819
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled);
4820
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled);
4821
+ }
4822
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4823
+ outline-color: var(--ids-comp-date-picker-focused-outline-color-dark);
4824
+ }
4825
+
4826
+ .ids-year-selector > .ids-year-selector__years-grid {
4827
+ display: grid;
4828
+ grid-template-columns: repeat(4, 1fr);
4829
+ align-items: center;
4830
+ justify-items: center;
4831
+ }
4832
+
4833
+ .ids-month-selector > .ids-month-selector__months-grid {
4834
+ display: grid;
4835
+ grid-template-columns: repeat(4, 1fr);
4836
+ align-items: center;
4837
+ justify-items: center;
4838
+ }
4839
+
4840
+ .ids-day-selector > .ids-day-selector__days-grid {
4841
+ display: grid;
4842
+ grid-template-columns: repeat(7, 1fr);
4843
+ }
4844
+
4541
4845
  .ids-dialog {
4542
4846
  box-sizing: border-box;
4543
4847
  border-width: 0;
@@ -4626,7 +4930,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4626
4930
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-compact);
4627
4931
  }
4628
4932
  .ids-dialog.ids-dialog-compact .ids-dialog-container {
4629
- width: var(--ids-comp-dialog-container-size-width-compact);
4933
+ max-width: var(--ids-comp-dialog-container-size-width-compact);
4630
4934
  min-height: var(--ids-comp-dialog-container-size-min-height-compact);
4631
4935
  padding: var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);
4632
4936
  gap: var(--ids-comp-dialog-container-size-gap-compact);
@@ -4669,7 +4973,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4669
4973
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-comfortable);
4670
4974
  }
4671
4975
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container {
4672
- width: var(--ids-comp-dialog-container-size-width-comfortable);
4976
+ max-width: var(--ids-comp-dialog-container-size-width-comfortable);
4673
4977
  min-height: var(--ids-comp-dialog-container-size-min-height-comfortable);
4674
4978
  padding: var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);
4675
4979
  gap: var(--ids-comp-dialog-container-size-gap-comfortable);
@@ -4712,7 +5016,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4712
5016
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-spacious);
4713
5017
  }
4714
5018
  .ids-dialog.ids-dialog-spacious .ids-dialog-container {
4715
- width: var(--ids-comp-dialog-container-size-width-spacious);
5019
+ max-width: var(--ids-comp-dialog-container-size-width-spacious);
4716
5020
  min-height: var(--ids-comp-dialog-container-size-min-height-spacious);
4717
5021
  padding: var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);
4718
5022
  gap: var(--ids-comp-dialog-container-size-gap-spacious);
@@ -4755,7 +5059,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4755
5059
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-dense);
4756
5060
  }
4757
5061
  .ids-dialog.ids-dialog-dense .ids-dialog-container {
4758
- width: var(--ids-comp-dialog-container-size-width-dense);
5062
+ max-width: var(--ids-comp-dialog-container-size-width-dense);
4759
5063
  min-height: var(--ids-comp-dialog-container-size-min-height-dense);
4760
5064
  padding: var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);
4761
5065
  gap: var(--ids-comp-dialog-container-size-gap-dense);
@@ -11047,6 +11351,104 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11047
11351
  padding-right: var(--ids-comp-snackbar-message-action-size-padding-right-dense);
11048
11352
  }
11049
11353
 
11354
+ .ids-spinner {
11355
+ display: flex;
11356
+ justify-content: center;
11357
+ align-items: center;
11358
+ }
11359
+ .ids-spinner.ids-spinner-smallcollection-compact {
11360
+ width: var(--ids-comp-spinner-smallcollection-size-width-compact);
11361
+ height: var(--ids-comp-spinner-smallcollection-size-height-compact);
11362
+ }
11363
+ .ids-spinner.ids-spinner-smallcollection-comfortable {
11364
+ width: var(--ids-comp-spinner-smallcollection-size-width-comfortable);
11365
+ height: var(--ids-comp-spinner-smallcollection-size-height-comfortable);
11366
+ }
11367
+ .ids-spinner.ids-spinner-smallcollection-spacious {
11368
+ width: var(--ids-comp-spinner-smallcollection-size-width-spacious);
11369
+ height: var(--ids-comp-spinner-smallcollection-size-height-spacious);
11370
+ }
11371
+ .ids-spinner.ids-spinner-smallcollection-dense {
11372
+ width: var(--ids-comp-spinner-smallcollection-size-width-dense);
11373
+ height: var(--ids-comp-spinner-smallcollection-size-height-dense);
11374
+ }
11375
+ .ids-spinner.ids-spinner-bigcollection-compact {
11376
+ width: var(--ids-comp-spinner-bigcollection-size-width-compact);
11377
+ height: var(--ids-comp-spinner-bigcollection-size-height-compact);
11378
+ }
11379
+ .ids-spinner.ids-spinner-bigcollection-comfortable {
11380
+ width: var(--ids-comp-spinner-bigcollection-size-width-comfortable);
11381
+ height: var(--ids-comp-spinner-bigcollection-size-height-comfortable);
11382
+ }
11383
+ .ids-spinner.ids-spinner-bigcollection-spacious {
11384
+ width: var(--ids-comp-spinner-bigcollection-size-width-spacious);
11385
+ height: var(--ids-comp-spinner-bigcollection-size-height-spacious);
11386
+ }
11387
+ .ids-spinner.ids-spinner-bigcollection-dense {
11388
+ width: var(--ids-comp-spinner-bigcollection-size-width-dense);
11389
+ height: var(--ids-comp-spinner-bigcollection-size-height-dense);
11390
+ }
11391
+ .ids-spinner.ids-spinner-primary > .ids-spinner__body > .ids-spinner__active-indicator {
11392
+ fill: var(--ids-comp-spinner-active-indicator-bg-primary-default);
11393
+ }
11394
+ .ids-spinner.ids-spinner-primary > .ids-spinner__body > .ids-spinner__track {
11395
+ fill: var(--ids-comp-spinner-track-bg-primary-default);
11396
+ }
11397
+ .ids-spinner.ids-spinner-secondary > .ids-spinner__body > .ids-spinner__active-indicator {
11398
+ fill: var(--ids-comp-spinner-active-indicator-bg-secondary-default);
11399
+ }
11400
+ .ids-spinner.ids-spinner-secondary > .ids-spinner__body > .ids-spinner__track {
11401
+ fill: var(--ids-comp-spinner-track-bg-secondary-default);
11402
+ }
11403
+ .ids-spinner.ids-spinner-surface > .ids-spinner__body > .ids-spinner__active-indicator {
11404
+ fill: var(--ids-comp-spinner-active-indicator-bg-surface-default);
11405
+ }
11406
+ .ids-spinner.ids-spinner-surface > .ids-spinner__body > .ids-spinner__track {
11407
+ fill: var(--ids-comp-spinner-track-bg-surface-default);
11408
+ }
11409
+ .ids-spinner.ids-spinner-light > .ids-spinner__body > .ids-spinner__active-indicator {
11410
+ fill: var(--ids-comp-spinner-active-indicator-bg-light-default);
11411
+ }
11412
+ .ids-spinner.ids-spinner-light > .ids-spinner__body > .ids-spinner__track {
11413
+ fill: var(--ids-comp-spinner-track-bg-light-default);
11414
+ }
11415
+ .ids-spinner.ids-spinner-brand > .ids-spinner__body > .ids-spinner__active-indicator {
11416
+ fill: var(--ids-comp-spinner-active-indicator-bg-brand-default);
11417
+ }
11418
+ .ids-spinner.ids-spinner-brand > .ids-spinner__body > .ids-spinner__track {
11419
+ fill: var(--ids-comp-spinner-track-bg-brand-default);
11420
+ }
11421
+ .ids-spinner.ids-spinner-error > .ids-spinner__body > .ids-spinner__active-indicator {
11422
+ fill: var(--ids-comp-spinner-active-indicator-bg-error-default);
11423
+ }
11424
+ .ids-spinner.ids-spinner-error > .ids-spinner__body > .ids-spinner__track {
11425
+ fill: var(--ids-comp-spinner-track-bg-error-default);
11426
+ }
11427
+ .ids-spinner.ids-spinner-success > .ids-spinner__body > .ids-spinner__active-indicator {
11428
+ fill: var(--ids-comp-spinner-active-indicator-bg-success-default);
11429
+ }
11430
+ .ids-spinner.ids-spinner-success > .ids-spinner__body > .ids-spinner__track {
11431
+ fill: var(--ids-comp-spinner-track-bg-success-default);
11432
+ }
11433
+ .ids-spinner.ids-spinner-warning > .ids-spinner__body > .ids-spinner__active-indicator {
11434
+ fill: var(--ids-comp-spinner-active-indicator-bg-warning-default);
11435
+ }
11436
+ .ids-spinner.ids-spinner-warning > .ids-spinner__body > .ids-spinner__track {
11437
+ fill: var(--ids-comp-spinner-track-bg-warning-default);
11438
+ }
11439
+ .ids-spinner .rotate-center {
11440
+ animation: rotate-center 0.9s ease-in-out infinite both;
11441
+ transform-origin: center;
11442
+ }
11443
+
11444
+ @keyframes rotate-center {
11445
+ 0% {
11446
+ transform: rotate(0deg);
11447
+ }
11448
+ 100% {
11449
+ transform: rotate(360deg);
11450
+ }
11451
+ }
11050
11452
  .ids-switch-group {
11051
11453
  box-sizing: border-box;
11052
11454
  border-width: 0;