@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/datepicker/datepicker.min.css ADDED
@@ -0,0 +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)}
package/dist/datepicker/datepicker.plugin.js ADDED
@@ -0,0 +1,287 @@
1
+ // Tailwind CSS plugin for the datepicker component in the i-Cell Design System
2
+ module.exports = function DatepickerPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-calendar': {
6
+ boxSizing: 'border-box',
7
+ borderWidth: '1px',
8
+ borderStyle: 'solid',
9
+ borderColor: '#d3d3d3',
10
+ lineHeight: 1.5,
11
+ display: 'flex',
12
+ flexDirection: 'column',
13
+ backgroundColor: '#fff',
14
+ },
15
+ '.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after': {
16
+ boxSizing: 'border-box',
17
+ borderWidth: '0',
18
+ borderStyle: 'none',
19
+ borderColor: 'rgba(0,0,0,0)',
20
+ },
21
+ '.ids-calendar>.ids-calendar__header': {
22
+ display: 'flex',
23
+ flexDirection: 'row',
24
+ alignItems: 'center',
25
+ justifyContent: 'space-between',
26
+ },
27
+ '.ids-calendar .ids-calendar-cell': { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
28
+ '.ids-calendar .ids-calendar-cell>.ids-calendar-button': { cursor: 'pointer', outlineStyle: 'none' },
29
+ '.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today': { borderStyle: 'solid' },
30
+ '.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': { outlineStyle: 'solid', outlineOffset: '2px' },
31
+ '.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled': { cursor: 'default' },
32
+ '.ids-calendar.ids-calendar-compact': {
33
+ gap: 'var(--ids-comp-date-picker-size-gap-compact)',
34
+ padding: 'var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact)',
35
+ },
36
+ '.ids-calendar.ids-calendar-compact .ids-calendar-grid': {
37
+ columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-compact)',
38
+ rowGap: 'var(--ids-comp-date-picker-calendar-size-row-gap-compact)',
39
+ padding: 'var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact)',
40
+ },
41
+ '.ids-calendar.ids-calendar-compact .ids-calendar-cell': {
42
+ borderRadius: 'var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact)',
43
+ borderWidth: 'var(--ids-comp-date-picker-calendar-cell-size-border-width-compact)',
44
+ minHeight: 'var(--ids-comp-date-picker-calendar-cell-size-min-height-compact)',
45
+ minWidth: 'var(--ids-comp-date-picker-calendar-cell-size-min-width-compact)',
46
+ padding:
47
+ 'var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact)',
48
+ },
49
+ '.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-weekday-label': {
50
+ fontFamily: 'var(--ids-comp-date-picker-calendar-days-typography-font-family-compact)',
51
+ fontSize: 'var(--ids-comp-date-picker-calendar-days-typography-font-size-compact)',
52
+ fontWeight: 'var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact)',
53
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact)',
54
+ lineHeight: 'var(--ids-comp-date-picker-calendar-days-typography-line-height-compact)',
55
+ },
56
+ '.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button': {
57
+ borderWidth: 'var(--ids-comp-date-picker-calendar-button-size-border-width-compact)',
58
+ borderRadius: 'var(--ids-comp-date-picker-calendar-button-size-border-radius-compact)',
59
+ minWidth: 'var(--ids-comp-date-picker-calendar-button-size-min-width-compact)',
60
+ height: 'var(--ids-comp-date-picker-calendar-button-size-height-compact)',
61
+ paddingLeft: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-compact)',
62
+ paddingRight: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-compact)',
63
+ fontFamily: 'var(--ids-comp-date-picker-calendar-button-typography-font-family-compact)',
64
+ fontSize: 'var(--ids-comp-date-picker-calendar-button-typography-font-size-compact)',
65
+ fontWeight: 'var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact)',
66
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact)',
67
+ lineHeight: 'var(--ids-comp-date-picker-calendar-button-typography-line-height-compact)',
68
+ },
69
+ '.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
70
+ outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-compact)',
71
+ },
72
+ '.ids-calendar.ids-calendar-comfortable': {
73
+ gap: 'var(--ids-comp-date-picker-size-gap-comfortable)',
74
+ padding: 'var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable)',
75
+ },
76
+ '.ids-calendar.ids-calendar-comfortable .ids-calendar-grid': {
77
+ columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-comfortable)',
78
+ rowGap: 'var(--ids-comp-date-picker-calendar-size-row-gap-comfortable)',
79
+ padding:
80
+ 'var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable)',
81
+ },
82
+ '.ids-calendar.ids-calendar-comfortable .ids-calendar-cell': {
83
+ borderRadius: 'var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable)',
84
+ borderWidth: 'var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable)',
85
+ minHeight: 'var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable)',
86
+ minWidth: 'var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable)',
87
+ padding:
88
+ 'var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable)',
89
+ },
90
+ '.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-weekday-label': {
91
+ fontFamily: 'var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable)',
92
+ fontSize: 'var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable)',
93
+ fontWeight: 'var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable)',
94
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable)',
95
+ lineHeight: 'var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable)',
96
+ },
97
+ '.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button': {
98
+ borderWidth: 'var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable)',
99
+ borderRadius: 'var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable)',
100
+ minWidth: 'var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable)',
101
+ height: 'var(--ids-comp-date-picker-calendar-button-size-height-comfortable)',
102
+ paddingLeft: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable)',
103
+ paddingRight: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable)',
104
+ fontFamily: 'var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable)',
105
+ fontSize: 'var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable)',
106
+ fontWeight: 'var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable)',
107
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable)',
108
+ lineHeight: 'var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable)',
109
+ },
110
+ '.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
111
+ outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-comfortable)',
112
+ },
113
+ '.ids-calendar.ids-calendar-spacious': {
114
+ gap: 'var(--ids-comp-date-picker-size-gap-spacious)',
115
+ padding: 'var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious)',
116
+ },
117
+ '.ids-calendar.ids-calendar-spacious .ids-calendar-grid': {
118
+ columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-spacious)',
119
+ rowGap: 'var(--ids-comp-date-picker-calendar-size-row-gap-spacious)',
120
+ padding:
121
+ 'var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious)',
122
+ },
123
+ '.ids-calendar.ids-calendar-spacious .ids-calendar-cell': {
124
+ borderRadius: 'var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious)',
125
+ borderWidth: 'var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious)',
126
+ minHeight: 'var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious)',
127
+ minWidth: 'var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious)',
128
+ padding:
129
+ 'var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious)',
130
+ },
131
+ '.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-weekday-label': {
132
+ fontFamily: 'var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious)',
133
+ fontSize: 'var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious)',
134
+ fontWeight: 'var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious)',
135
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious)',
136
+ lineHeight: 'var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious)',
137
+ },
138
+ '.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button': {
139
+ borderWidth: 'var(--ids-comp-date-picker-calendar-button-size-border-width-spacious)',
140
+ borderRadius: 'var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious)',
141
+ minWidth: 'var(--ids-comp-date-picker-calendar-button-size-min-width-spacious)',
142
+ height: 'var(--ids-comp-date-picker-calendar-button-size-height-spacious)',
143
+ paddingLeft: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious)',
144
+ paddingRight: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious)',
145
+ fontFamily: 'var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious)',
146
+ fontSize: 'var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious)',
147
+ fontWeight: 'var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious)',
148
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious)',
149
+ lineHeight: 'var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious)',
150
+ },
151
+ '.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
152
+ outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-spacious)',
153
+ },
154
+ '.ids-calendar.ids-calendar-dense': {
155
+ gap: 'var(--ids-comp-date-picker-size-gap-dense)',
156
+ padding: 'var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense)',
157
+ },
158
+ '.ids-calendar.ids-calendar-dense .ids-calendar-grid': {
159
+ columnGap: 'var(--ids-comp-date-picker-calendar-size-column-gap-dense)',
160
+ rowGap: 'var(--ids-comp-date-picker-calendar-size-row-gap-dense)',
161
+ padding: 'var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense)',
162
+ },
163
+ '.ids-calendar.ids-calendar-dense .ids-calendar-cell': {
164
+ borderRadius: 'var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense)',
165
+ borderWidth: 'var(--ids-comp-date-picker-calendar-cell-size-border-width-dense)',
166
+ minHeight: 'var(--ids-comp-date-picker-calendar-cell-size-min-height-dense)',
167
+ minWidth: 'var(--ids-comp-date-picker-calendar-cell-size-min-width-dense)',
168
+ padding:
169
+ 'var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense)',
170
+ },
171
+ '.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-weekday-label': {
172
+ fontFamily: 'var(--ids-comp-date-picker-calendar-days-typography-font-family-dense)',
173
+ fontSize: 'var(--ids-comp-date-picker-calendar-days-typography-font-size-dense)',
174
+ fontWeight: 'var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense)',
175
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense)',
176
+ lineHeight: 'var(--ids-comp-date-picker-calendar-days-typography-line-height-dense)',
177
+ },
178
+ '.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button': {
179
+ borderWidth: 'var(--ids-comp-date-picker-calendar-button-size-border-width-dense)',
180
+ borderRadius: 'var(--ids-comp-date-picker-calendar-button-size-border-radius-dense)',
181
+ minWidth: 'var(--ids-comp-date-picker-calendar-button-size-min-width-dense)',
182
+ height: 'var(--ids-comp-date-picker-calendar-button-size-height-dense)',
183
+ paddingLeft: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-dense)',
184
+ paddingRight: 'var(--ids-comp-date-picker-calendar-button-size-padding-x-dense)',
185
+ fontFamily: 'var(--ids-comp-date-picker-calendar-button-typography-font-family-dense)',
186
+ fontSize: 'var(--ids-comp-date-picker-calendar-button-typography-font-size-dense)',
187
+ fontWeight: 'var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense)',
188
+ letterSpacing: 'var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense)',
189
+ lineHeight: 'var(--ids-comp-date-picker-calendar-button-typography-line-height-dense)',
190
+ },
191
+ '.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
192
+ outlineWidth: 'var(--ids-comp-date-picker-focused-outline-size-outline-dense)',
193
+ },
194
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell': {
195
+ backgroundColor: 'var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default)',
196
+ borderColor: 'var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)',
197
+ },
198
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected': {
199
+ backgroundColor: 'var(--ids-comp-date-picker-cell-selected-color-bg-surface-default)',
200
+ borderColor: 'var(--ids-comp-date-picker-cell-selected-color-border-surface-default)',
201
+ },
202
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-weekday-label': {
203
+ color: 'var(--ids-comp-date-picker-calendar-days-color-fg-surface-default)',
204
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-days-color-bg-surface-default)',
205
+ borderColor: 'var(--ids-comp-date-picker-calendar-days-color-border-surface-default)',
206
+ },
207
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button': {
208
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default)',
209
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default)',
210
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default)',
211
+ },
212
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:hover': {
213
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered)',
214
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered)',
215
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered)',
216
+ },
217
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:active': {
218
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed)',
219
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed)',
220
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed)',
221
+ },
222
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:disabled': {
223
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled)',
224
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled)',
225
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled)',
226
+ },
227
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today': {
228
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default)',
229
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default)',
230
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default)',
231
+ },
232
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:hover': {
233
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered)',
234
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered)',
235
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered)',
236
+ },
237
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:active': {
238
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed)',
239
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed)',
240
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed)',
241
+ },
242
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:disabled': {
243
+ color: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled)',
244
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled)',
245
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled)',
246
+ },
247
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected': {
248
+ color: 'var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default)',
249
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default)',
250
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default)',
251
+ },
252
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:hover': {
253
+ color: 'var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered)',
254
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered)',
255
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered)',
256
+ },
257
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:active': {
258
+ color: 'var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed)',
259
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed)',
260
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed)',
261
+ },
262
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:disabled': {
263
+ color: 'var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled)',
264
+ backgroundColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled)',
265
+ borderColor: 'var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled)',
266
+ },
267
+ '.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': {
268
+ outlineColor: 'var(--ids-comp-date-picker-focused-outline-color-dark)',
269
+ },
270
+ '.ids-year-selector>.ids-year-selector__years-grid': {
271
+ display: 'grid',
272
+ gridTemplateColumns: 'repeat(4, 1fr)',
273
+ alignItems: 'center',
274
+ justifyItems: 'center',
275
+ },
276
+ '.ids-month-selector>.ids-month-selector__months-grid': {
277
+ display: 'grid',
278
+ gridTemplateColumns: 'repeat(4, 1fr)',
279
+ alignItems: 'center',
280
+ justifyItems: 'center',
281
+ },
282
+ '.ids-day-selector>.ids-day-selector__days-grid': { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' },
283
+ };
284
+
285
+ addComponents(cssObj);
286
+ };
287
+ };
package/dist/dialog/dialog.css CHANGED
@@ -86,7 +86,7 @@
86
86
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-compact);
87
87
  }
88
88
  .ids-dialog.ids-dialog-compact .ids-dialog-container {
89
- width: var(--ids-comp-dialog-container-size-width-compact);
89
+ max-width: var(--ids-comp-dialog-container-size-width-compact);
90
90
  min-height: var(--ids-comp-dialog-container-size-min-height-compact);
91
91
  padding: var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);
92
92
  gap: var(--ids-comp-dialog-container-size-gap-compact);
@@ -129,7 +129,7 @@
129
129
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-comfortable);
130
130
  }
131
131
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container {
132
- width: var(--ids-comp-dialog-container-size-width-comfortable);
132
+ max-width: var(--ids-comp-dialog-container-size-width-comfortable);
133
133
  min-height: var(--ids-comp-dialog-container-size-min-height-comfortable);
134
134
  padding: var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);
135
135
  gap: var(--ids-comp-dialog-container-size-gap-comfortable);
@@ -172,7 +172,7 @@
172
172
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-spacious);
173
173
  }
174
174
  .ids-dialog.ids-dialog-spacious .ids-dialog-container {
175
- width: var(--ids-comp-dialog-container-size-width-spacious);
175
+ max-width: var(--ids-comp-dialog-container-size-width-spacious);
176
176
  min-height: var(--ids-comp-dialog-container-size-min-height-spacious);
177
177
  padding: var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);
178
178
  gap: var(--ids-comp-dialog-container-size-gap-spacious);
@@ -215,7 +215,7 @@
215
215
  opacity: var(--ids-comp-dialog-backdrop-size-opacity-dense);
216
216
  }
217
217
  .ids-dialog.ids-dialog-dense .ids-dialog-container {
218
- width: var(--ids-comp-dialog-container-size-width-dense);
218
+ max-width: var(--ids-comp-dialog-container-size-width-dense);
219
219
  min-height: var(--ids-comp-dialog-container-size-min-height-dense);
220
220
  padding: var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);
221
221
  gap: var(--ids-comp-dialog-container-size-gap-dense);
package/dist/dialog/dialog.min.css CHANGED
@@ -1 +1 @@
1
- .ids-dialog{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;padding:0;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-default);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-dialog::before,.ids-dialog::after,.ids-dialog *,.ids-dialog ::before,.ids-dialog ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:flex;align-items:stretch}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden{display:none}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-default)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-default);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-compact);min-height:var(--ids-comp-dialog-container-size-min-height-compact);padding:var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);gap:var(--ids-comp-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-compact);padding:var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);gap:var(--ids-comp-dialog-footer-gap-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-comfortable);min-height:var(--ids-comp-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-comfortable);padding:var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);gap:var(--ids-comp-dialog-footer-gap-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-spacious);min-height:var(--ids-comp-dialog-container-size-min-height-spacious);padding:var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-spacious);padding:var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);gap:var(--ids-comp-dialog-footer-gap-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-dense);min-height:var(--ids-comp-dialog-container-size-min-height-dense);padding:var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);gap:var(--ids-comp-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-dense);padding:var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);gap:var(--ids-comp-dialog-footer-gap-dense)}
1
+ .ids-dialog{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;padding:0;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-default);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-dialog::before,.ids-dialog::after,.ids-dialog *,.ids-dialog ::before,.ids-dialog ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:flex;align-items:stretch}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden{display:none}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-default)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-default);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-compact);min-height:var(--ids-comp-dialog-container-size-min-height-compact);padding:var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);gap:var(--ids-comp-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-compact);padding:var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);gap:var(--ids-comp-dialog-footer-gap-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-comfortable);min-height:var(--ids-comp-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-comfortable);padding:var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);gap:var(--ids-comp-dialog-footer-gap-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-spacious);min-height:var(--ids-comp-dialog-container-size-min-height-spacious);padding:var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-spacious);padding:var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);gap:var(--ids-comp-dialog-footer-gap-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-dense);min-height:var(--ids-comp-dialog-container-size-min-height-dense);padding:var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);gap:var(--ids-comp-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-dense);padding:var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);gap:var(--ids-comp-dialog-footer-gap-dense)}
package/dist/dialog/dialog.plugin.js CHANGED
@@ -64,7 +64,7 @@ module.exports = function DialogPlugin() {
64
64
  opacity: 'var(--ids-comp-dialog-backdrop-size-opacity-compact)',
65
65
  },
66
66
  '.ids-dialog.ids-dialog-compact .ids-dialog-container': {
67
- width: 'var(--ids-comp-dialog-container-size-width-compact)',
67
+ maxWidth: 'var(--ids-comp-dialog-container-size-width-compact)',
68
68
  minHeight: 'var(--ids-comp-dialog-container-size-min-height-compact)',
69
69
  padding: 'var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact)',
70
70
  gap: 'var(--ids-comp-dialog-container-size-gap-compact)',
@@ -108,7 +108,7 @@ module.exports = function DialogPlugin() {
108
108
  opacity: 'var(--ids-comp-dialog-backdrop-size-opacity-comfortable)',
109
109
  },
110
110
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container': {
111
- width: 'var(--ids-comp-dialog-container-size-width-comfortable)',
111
+ maxWidth: 'var(--ids-comp-dialog-container-size-width-comfortable)',
112
112
  minHeight: 'var(--ids-comp-dialog-container-size-min-height-comfortable)',
113
113
  padding: 'var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable)',
114
114
  gap: 'var(--ids-comp-dialog-container-size-gap-comfortable)',
@@ -153,7 +153,7 @@ module.exports = function DialogPlugin() {
153
153
  opacity: 'var(--ids-comp-dialog-backdrop-size-opacity-spacious)',
154
154
  },
155
155
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container': {
156
- width: 'var(--ids-comp-dialog-container-size-width-spacious)',
156
+ maxWidth: 'var(--ids-comp-dialog-container-size-width-spacious)',
157
157
  minHeight: 'var(--ids-comp-dialog-container-size-min-height-spacious)',
158
158
  padding: 'var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious)',
159
159
  gap: 'var(--ids-comp-dialog-container-size-gap-spacious)',
@@ -196,7 +196,7 @@ module.exports = function DialogPlugin() {
196
196
  },
197
197
  '.ids-dialog.ids-dialog-dense.ids-dialog-with-backdrop::backdrop': { opacity: 'var(--ids-comp-dialog-backdrop-size-opacity-dense)' },
198
198
  '.ids-dialog.ids-dialog-dense .ids-dialog-container': {
199
- width: 'var(--ids-comp-dialog-container-size-width-dense)',
199
+ maxWidth: 'var(--ids-comp-dialog-container-size-width-dense)',
200
200
  minHeight: 'var(--ids-comp-dialog-container-size-min-height-dense)',
201
201
  padding: 'var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense)',
202
202
  gap: 'var(--ids-comp-dialog-container-size-gap-dense)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.36",
3
+ "version": "0.0.38",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "homepage": "https://github.com/i-Cell-Mobilsoft-Open-Source/ids-styles#readme",
37
37
  "devDependencies": {
38
- "@i-cell/ids-tokens": "0.0.29",
38
+ "@i-cell/ids-tokens": "0.0.31",
39
39
  "commander": "^12.1.0",
40
40
  "gulp": "^5.0.0",
41
41
  "gulp-prettier": "^6.0.0",