@i-cell/ids-styles 0.0.34 → 0.0.36

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 (16) hide show
  1. package/dist/components.css +112 -1
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +90 -1
  4. package/dist/segmented-control/segmented-control.css +4 -0
  5. package/dist/segmented-control/segmented-control.min.css +1 -1
  6. package/dist/segmented-control/segmented-control.plugin.js +4 -0
  7. package/dist/segmented-control-toggle/segmented-control-toggle.css +4 -0
  8. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  9. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +4 -0
  10. package/dist/select/select.css +6 -1
  11. package/dist/select/select.min.css +1 -1
  12. package/dist/select/select.plugin.js +5 -1
  13. package/dist/spinner/spinner.css +98 -0
  14. package/dist/spinner/spinner.min.css +1 -0
  15. package/dist/spinner/spinner.plugin.js +86 -0
  16. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -9783,6 +9783,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9783
9783
  font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-compact);
9784
9784
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-compact);
9785
9785
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-compact);
9786
+ min-height: var(--ids-comp-segmented-control-button-size-min-height-compact);
9786
9787
  }
9787
9788
  .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button:focus-visible {
9788
9789
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact);
@@ -9822,6 +9823,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9822
9823
  font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-comfortable);
9823
9824
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable);
9824
9825
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-comfortable);
9826
+ min-height: var(--ids-comp-segmented-control-button-size-min-height-comfortable);
9825
9827
  }
9826
9828
  .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button:focus-visible {
9827
9829
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable);
@@ -9861,6 +9863,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9861
9863
  font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-spacious);
9862
9864
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious);
9863
9865
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-spacious);
9866
+ min-height: var(--ids-comp-segmented-control-button-size-min-height-spacious);
9864
9867
  }
9865
9868
  .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button:focus-visible {
9866
9869
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious);
@@ -9900,6 +9903,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9900
9903
  font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-dense);
9901
9904
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-dense);
9902
9905
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-dense);
9906
+ min-height: var(--ids-comp-segmented-control-button-size-min-height-dense);
9903
9907
  }
9904
9908
  .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button:focus-visible {
9905
9909
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense);
@@ -10144,6 +10148,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10144
10148
  font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-compact);
10145
10149
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-compact);
10146
10150
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-compact);
10151
+ min-height: var(--ids-comp-segmented-control-toggle-button-size-min-height-compact);
10147
10152
  }
10148
10153
  .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus-visible {
10149
10154
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-compact);
@@ -10173,6 +10178,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10173
10178
  font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-comfortable);
10174
10179
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-comfortable);
10175
10180
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-comfortable);
10181
+ min-height: var(--ids-comp-segmented-control-toggle-button-size-min-height-comfortable);
10176
10182
  }
10177
10183
  .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus-visible {
10178
10184
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-comfortable);
@@ -10202,6 +10208,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10202
10208
  font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-spacious);
10203
10209
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-spacious);
10204
10210
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-spacious);
10211
+ min-height: var(--ids-comp-segmented-control-toggle-button-size-min-height-spacious);
10205
10212
  }
10206
10213
  .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus-visible {
10207
10214
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-spacious);
@@ -10231,6 +10238,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10231
10238
  font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-dense);
10232
10239
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-dense);
10233
10240
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-dense);
10241
+ min-height: var(--ids-comp-segmented-control-toggle-button-size-min-height-dense);
10234
10242
  }
10235
10243
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus-visible {
10236
10244
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-dense);
@@ -10669,10 +10677,15 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10669
10677
  background: var(--ids-comp-forms-select-panel-color-bg-light-default);
10670
10678
  }
10671
10679
 
10672
- .ids-form-field > .ids-form-field__field-wrapper:has(.ids-select) {
10680
+ .ids-form-field:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-select) {
10673
10681
  cursor: pointer;
10674
10682
  }
10675
10683
 
10684
+ .ids-form-field.ids-form-field-disabled > .ids-form-field__field-wrapper:has(.ids-select) {
10685
+ cursor: default;
10686
+ pointer-events: none;
10687
+ }
10688
+
10676
10689
  .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
10677
10690
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
10678
10691
  }
@@ -11034,6 +11047,104 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11034
11047
  padding-right: var(--ids-comp-snackbar-message-action-size-padding-right-dense);
11035
11048
  }
11036
11049
 
11050
+ .ids-spinner {
11051
+ display: flex;
11052
+ justify-content: center;
11053
+ align-items: center;
11054
+ }
11055
+ .ids-spinner.ids-spinner-smallcollection-compact {
11056
+ width: var(--ids-comp-spinner-smallcollection-size-width-compact);
11057
+ height: var(--ids-comp-spinner-smallcollection-size-height-compact);
11058
+ }
11059
+ .ids-spinner.ids-spinner-smallcollection-comfortable {
11060
+ width: var(--ids-comp-spinner-smallcollection-size-width-comfortable);
11061
+ height: var(--ids-comp-spinner-smallcollection-size-height-comfortable);
11062
+ }
11063
+ .ids-spinner.ids-spinner-smallcollection-spacious {
11064
+ width: var(--ids-comp-spinner-smallcollection-size-width-spacious);
11065
+ height: var(--ids-comp-spinner-smallcollection-size-height-spacious);
11066
+ }
11067
+ .ids-spinner.ids-spinner-smallcollection-dense {
11068
+ width: var(--ids-comp-spinner-smallcollection-size-width-dense);
11069
+ height: var(--ids-comp-spinner-smallcollection-size-height-dense);
11070
+ }
11071
+ .ids-spinner.ids-spinner-bigcollection-compact {
11072
+ width: var(--ids-comp-spinner-bigcollection-size-width-compact);
11073
+ height: var(--ids-comp-spinner-bigcollection-size-height-compact);
11074
+ }
11075
+ .ids-spinner.ids-spinner-bigcollection-comfortable {
11076
+ width: var(--ids-comp-spinner-bigcollection-size-width-comfortable);
11077
+ height: var(--ids-comp-spinner-bigcollection-size-height-comfortable);
11078
+ }
11079
+ .ids-spinner.ids-spinner-bigcollection-spacious {
11080
+ width: var(--ids-comp-spinner-bigcollection-size-width-spacious);
11081
+ height: var(--ids-comp-spinner-bigcollection-size-height-spacious);
11082
+ }
11083
+ .ids-spinner.ids-spinner-bigcollection-dense {
11084
+ width: var(--ids-comp-spinner-bigcollection-size-width-dense);
11085
+ height: var(--ids-comp-spinner-bigcollection-size-height-dense);
11086
+ }
11087
+ .ids-spinner.ids-spinner-primary > .ids-spinner__body > .ids-spinner__active-indicator {
11088
+ fill: var(--ids-comp-spinner-active-indicator-bg-primary-default);
11089
+ }
11090
+ .ids-spinner.ids-spinner-primary > .ids-spinner__body > .ids-spinner__track {
11091
+ fill: var(--ids-comp-spinner-track-bg-primary-default);
11092
+ }
11093
+ .ids-spinner.ids-spinner-secondary > .ids-spinner__body > .ids-spinner__active-indicator {
11094
+ fill: var(--ids-comp-spinner-active-indicator-bg-secondary-default);
11095
+ }
11096
+ .ids-spinner.ids-spinner-secondary > .ids-spinner__body > .ids-spinner__track {
11097
+ fill: var(--ids-comp-spinner-track-bg-secondary-default);
11098
+ }
11099
+ .ids-spinner.ids-spinner-surface > .ids-spinner__body > .ids-spinner__active-indicator {
11100
+ fill: var(--ids-comp-spinner-active-indicator-bg-surface-default);
11101
+ }
11102
+ .ids-spinner.ids-spinner-surface > .ids-spinner__body > .ids-spinner__track {
11103
+ fill: var(--ids-comp-spinner-track-bg-surface-default);
11104
+ }
11105
+ .ids-spinner.ids-spinner-light > .ids-spinner__body > .ids-spinner__active-indicator {
11106
+ fill: var(--ids-comp-spinner-active-indicator-bg-light-default);
11107
+ }
11108
+ .ids-spinner.ids-spinner-light > .ids-spinner__body > .ids-spinner__track {
11109
+ fill: var(--ids-comp-spinner-track-bg-light-default);
11110
+ }
11111
+ .ids-spinner.ids-spinner-brand > .ids-spinner__body > .ids-spinner__active-indicator {
11112
+ fill: var(--ids-comp-spinner-active-indicator-bg-brand-default);
11113
+ }
11114
+ .ids-spinner.ids-spinner-brand > .ids-spinner__body > .ids-spinner__track {
11115
+ fill: var(--ids-comp-spinner-track-bg-brand-default);
11116
+ }
11117
+ .ids-spinner.ids-spinner-error > .ids-spinner__body > .ids-spinner__active-indicator {
11118
+ fill: var(--ids-comp-spinner-active-indicator-bg-error-default);
11119
+ }
11120
+ .ids-spinner.ids-spinner-error > .ids-spinner__body > .ids-spinner__track {
11121
+ fill: var(--ids-comp-spinner-track-bg-error-default);
11122
+ }
11123
+ .ids-spinner.ids-spinner-success > .ids-spinner__body > .ids-spinner__active-indicator {
11124
+ fill: var(--ids-comp-spinner-active-indicator-bg-success-default);
11125
+ }
11126
+ .ids-spinner.ids-spinner-success > .ids-spinner__body > .ids-spinner__track {
11127
+ fill: var(--ids-comp-spinner-track-bg-success-default);
11128
+ }
11129
+ .ids-spinner.ids-spinner-warning > .ids-spinner__body > .ids-spinner__active-indicator {
11130
+ fill: var(--ids-comp-spinner-active-indicator-bg-warning-default);
11131
+ }
11132
+ .ids-spinner.ids-spinner-warning > .ids-spinner__body > .ids-spinner__track {
11133
+ fill: var(--ids-comp-spinner-track-bg-warning-default);
11134
+ }
11135
+ .ids-spinner .rotate-center {
11136
+ animation: rotate-center 0.9s ease-in-out infinite both;
11137
+ transform-origin: center;
11138
+ }
11139
+
11140
+ @keyframes rotate-center {
11141
+ 0% {
11142
+ transform: rotate(0deg);
11143
+ }
11144
+ 100% {
11145
+ transform: rotate(360deg);
11146
+ }
11147
+ }
11037
11148
  .ids-switch-group {
11038
11149
  box-sizing: border-box;
11039
11150
  border-width: 0;