@i-cell/ids-styles 0.0.36 → 0.0.38

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 (10) hide show
  1. package/dist/components.css +304 -4
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +282 -4
  4. package/dist/datepicker/datepicker.css +299 -0
  5. package/dist/datepicker/datepicker.min.css +1 -0
  6. package/dist/datepicker/datepicker.plugin.js +287 -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/package.json +2 -2
package/dist/components.css CHANGED
@@ -4538,6 +4538,306 @@ 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-today {
4580
+ border-style: solid;
4581
+ }
4582
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4583
+ outline-style: solid;
4584
+ outline-offset: 2px;
4585
+ }
4586
+ .ids-calendar .ids-calendar-cell > .ids-calendar-button:disabled {
4587
+ cursor: default;
4588
+ }
4589
+ .ids-calendar.ids-calendar-compact {
4590
+ gap: var(--ids-comp-date-picker-size-gap-compact);
4591
+ padding: var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact);
4592
+ }
4593
+ .ids-calendar.ids-calendar-compact .ids-calendar-grid {
4594
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-compact);
4595
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-compact);
4596
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact);
4597
+ }
4598
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell {
4599
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact);
4600
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-compact);
4601
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-compact);
4602
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-compact);
4603
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact);
4604
+ }
4605
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell > .ids-calendar-weekday-label {
4606
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-compact);
4607
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-compact);
4608
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact);
4609
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact);
4610
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-compact);
4611
+ }
4612
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell > .ids-calendar-button {
4613
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-compact);
4614
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-compact);
4615
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-compact);
4616
+ height: var(--ids-comp-date-picker-calendar-button-size-height-compact);
4617
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);
4618
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);
4619
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-compact);
4620
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-compact);
4621
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact);
4622
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact);
4623
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-compact);
4624
+ }
4625
+ .ids-calendar.ids-calendar-compact .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4626
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-compact);
4627
+ }
4628
+ .ids-calendar.ids-calendar-comfortable {
4629
+ gap: var(--ids-comp-date-picker-size-gap-comfortable);
4630
+ padding: var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable);
4631
+ }
4632
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-grid {
4633
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);
4634
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-comfortable);
4635
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable);
4636
+ }
4637
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell {
4638
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable);
4639
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable);
4640
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable);
4641
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable);
4642
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable);
4643
+ }
4644
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell > .ids-calendar-weekday-label {
4645
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable);
4646
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable);
4647
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable);
4648
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable);
4649
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable);
4650
+ }
4651
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell > .ids-calendar-button {
4652
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable);
4653
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable);
4654
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable);
4655
+ height: var(--ids-comp-date-picker-calendar-button-size-height-comfortable);
4656
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);
4657
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);
4658
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable);
4659
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable);
4660
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable);
4661
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable);
4662
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable);
4663
+ }
4664
+ .ids-calendar.ids-calendar-comfortable .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4665
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-comfortable);
4666
+ }
4667
+ .ids-calendar.ids-calendar-spacious {
4668
+ gap: var(--ids-comp-date-picker-size-gap-spacious);
4669
+ padding: var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious);
4670
+ }
4671
+ .ids-calendar.ids-calendar-spacious .ids-calendar-grid {
4672
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-spacious);
4673
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-spacious);
4674
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious);
4675
+ }
4676
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell {
4677
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious);
4678
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious);
4679
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious);
4680
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious);
4681
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious);
4682
+ }
4683
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell > .ids-calendar-weekday-label {
4684
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious);
4685
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious);
4686
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious);
4687
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious);
4688
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious);
4689
+ }
4690
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell > .ids-calendar-button {
4691
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-spacious);
4692
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious);
4693
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-spacious);
4694
+ height: var(--ids-comp-date-picker-calendar-button-size-height-spacious);
4695
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);
4696
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);
4697
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious);
4698
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious);
4699
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious);
4700
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious);
4701
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious);
4702
+ }
4703
+ .ids-calendar.ids-calendar-spacious .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4704
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-spacious);
4705
+ }
4706
+ .ids-calendar.ids-calendar-dense {
4707
+ gap: var(--ids-comp-date-picker-size-gap-dense);
4708
+ padding: var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense);
4709
+ }
4710
+ .ids-calendar.ids-calendar-dense .ids-calendar-grid {
4711
+ column-gap: var(--ids-comp-date-picker-calendar-size-column-gap-dense);
4712
+ row-gap: var(--ids-comp-date-picker-calendar-size-row-gap-dense);
4713
+ padding: var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense);
4714
+ }
4715
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell {
4716
+ border-radius: var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense);
4717
+ border-width: var(--ids-comp-date-picker-calendar-cell-size-border-width-dense);
4718
+ min-height: var(--ids-comp-date-picker-calendar-cell-size-min-height-dense);
4719
+ min-width: var(--ids-comp-date-picker-calendar-cell-size-min-width-dense);
4720
+ padding: var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense);
4721
+ }
4722
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-weekday-label {
4723
+ font-family: var(--ids-comp-date-picker-calendar-days-typography-font-family-dense);
4724
+ font-size: var(--ids-comp-date-picker-calendar-days-typography-font-size-dense);
4725
+ font-weight: var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense);
4726
+ letter-spacing: var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense);
4727
+ line-height: var(--ids-comp-date-picker-calendar-days-typography-line-height-dense);
4728
+ }
4729
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-button {
4730
+ border-width: var(--ids-comp-date-picker-calendar-button-size-border-width-dense);
4731
+ border-radius: var(--ids-comp-date-picker-calendar-button-size-border-radius-dense);
4732
+ min-width: var(--ids-comp-date-picker-calendar-button-size-min-width-dense);
4733
+ height: var(--ids-comp-date-picker-calendar-button-size-height-dense);
4734
+ padding-left: var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);
4735
+ padding-right: var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);
4736
+ font-family: var(--ids-comp-date-picker-calendar-button-typography-font-family-dense);
4737
+ font-size: var(--ids-comp-date-picker-calendar-button-typography-font-size-dense);
4738
+ font-weight: var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense);
4739
+ letter-spacing: var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense);
4740
+ line-height: var(--ids-comp-date-picker-calendar-button-typography-line-height-dense);
4741
+ }
4742
+ .ids-calendar.ids-calendar-dense .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4743
+ outline-width: var(--ids-comp-date-picker-focused-outline-size-outline-dense);
4744
+ }
4745
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell {
4746
+ background-color: var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);
4747
+ border-color: var(--ids-comp-date-picker-cell-unselected-color-border-surface-default);
4748
+ }
4749
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected {
4750
+ background-color: var(--ids-comp-date-picker-cell-selected-color-bg-surface-default);
4751
+ border-color: var(--ids-comp-date-picker-cell-selected-color-border-surface-default);
4752
+ }
4753
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-weekday-label {
4754
+ color: var(--ids-comp-date-picker-calendar-days-color-fg-surface-default);
4755
+ background-color: var(--ids-comp-date-picker-calendar-days-color-bg-surface-default);
4756
+ border-color: var(--ids-comp-date-picker-calendar-days-color-border-surface-default);
4757
+ }
4758
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button {
4759
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default);
4760
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default);
4761
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default);
4762
+ }
4763
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:hover {
4764
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered);
4765
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered);
4766
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered);
4767
+ }
4768
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:active {
4769
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed);
4770
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed);
4771
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed);
4772
+ }
4773
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:disabled {
4774
+ color: var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled);
4775
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled);
4776
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled);
4777
+ }
4778
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today {
4779
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default);
4780
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default);
4781
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default);
4782
+ }
4783
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today:hover {
4784
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered);
4785
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered);
4786
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered);
4787
+ }
4788
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today:active {
4789
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed);
4790
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed);
4791
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed);
4792
+ }
4793
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today:disabled {
4794
+ color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled);
4795
+ background-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled);
4796
+ border-color: var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled);
4797
+ }
4798
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected {
4799
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default);
4800
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default);
4801
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default);
4802
+ }
4803
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected:hover {
4804
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered);
4805
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered);
4806
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered);
4807
+ }
4808
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected:active {
4809
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed);
4810
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed);
4811
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed);
4812
+ }
4813
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected:disabled {
4814
+ color: var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled);
4815
+ background-color: var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled);
4816
+ border-color: var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled);
4817
+ }
4818
+ .ids-calendar.ids-calendar-surface .ids-calendar-cell > .ids-calendar-button:is(:focus, :focus-visible) {
4819
+ outline-color: var(--ids-comp-date-picker-focused-outline-color-dark);
4820
+ }
4821
+
4822
+ .ids-year-selector > .ids-year-selector__years-grid {
4823
+ display: grid;
4824
+ grid-template-columns: repeat(4, 1fr);
4825
+ align-items: center;
4826
+ justify-items: center;
4827
+ }
4828
+
4829
+ .ids-month-selector > .ids-month-selector__months-grid {
4830
+ display: grid;
4831
+ grid-template-columns: repeat(4, 1fr);
4832
+ align-items: center;
4833
+ justify-items: center;
4834
+ }
4835
+
4836
+ .ids-day-selector > .ids-day-selector__days-grid {
4837
+ display: grid;
4838
+ grid-template-columns: repeat(7, 1fr);
4839
+ }
4840
+
4541
4841
  .ids-dialog {
4542
4842
  box-sizing: border-box;
4543
4843
  border-width: 0;
@@ -4626,7 +4926,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4626
4926
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-compact);
4627
4927
  }
4628
4928
  .ids-dialog.ids-dialog-compact .ids-dialog-container {
4629
- width: var(--ids-comp-dialog-container-size-width-compact);
4929
+ max-width: var(--ids-comp-dialog-container-size-width-compact);
4630
4930
  min-height: var(--ids-comp-dialog-container-size-min-height-compact);
4631
4931
  padding: var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);
4632
4932
  gap: var(--ids-comp-dialog-container-size-gap-compact);
@@ -4669,7 +4969,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4669
4969
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-comfortable);
4670
4970
  }
4671
4971
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container {
4672
- width: var(--ids-comp-dialog-container-size-width-comfortable);
4972
+ max-width: var(--ids-comp-dialog-container-size-width-comfortable);
4673
4973
  min-height: var(--ids-comp-dialog-container-size-min-height-comfortable);
4674
4974
  padding: var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);
4675
4975
  gap: var(--ids-comp-dialog-container-size-gap-comfortable);
@@ -4712,7 +5012,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4712
5012
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-spacious);
4713
5013
  }
4714
5014
  .ids-dialog.ids-dialog-spacious .ids-dialog-container {
4715
- width: var(--ids-comp-dialog-container-size-width-spacious);
5015
+ max-width: var(--ids-comp-dialog-container-size-width-spacious);
4716
5016
  min-height: var(--ids-comp-dialog-container-size-min-height-spacious);
4717
5017
  padding: var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);
4718
5018
  gap: var(--ids-comp-dialog-container-size-gap-spacious);
@@ -4755,7 +5055,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
4755
5055
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-dense);
4756
5056
  }
4757
5057
  .ids-dialog.ids-dialog-dense .ids-dialog-container {
4758
- width: var(--ids-comp-dialog-container-size-width-dense);
5058
+ max-width: var(--ids-comp-dialog-container-size-width-dense);
4759
5059
  min-height: var(--ids-comp-dialog-container-size-min-height-dense);
4760
5060
  padding: var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);
4761
5061
  gap: var(--ids-comp-dialog-container-size-gap-dense);