@italia/button 0.1.0-alpha.2 → 1.0.0-alpha.5

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/README.md +2 -2
  2. package/custom-elements.json +20 -12
  3. package/dist/src/index.d.ts +1 -0
  4. package/dist/src/index.d.ts.map +1 -1
  5. package/dist/src/index.js +5 -0
  6. package/dist/src/index.js.map +1 -1
  7. package/dist/src/it-button.d.ts.map +1 -1
  8. package/dist/src/it-button.js +183 -122
  9. package/dist/src/it-button.js.map +1 -1
  10. package/package.json +3 -4
package/dist/src/it-button.js CHANGED
@@ -437,6 +437,7 @@ const interactions = new WeakMap();
437
437
  /** A reactive controller to allow form controls to participate in form submission, validation, etc. */
438
438
  class FormControlController {
439
439
  constructor(host, options) {
440
+ this.submittedOnce = false;
440
441
  this.handleFormData = (event) => {
441
442
  // console.log('handleFormData');
442
443
  const disabled = this.options.disabled(this.host);
@@ -458,6 +459,17 @@ class FormControlController {
458
459
  event.formData.append(name, value);
459
460
  }
460
461
  break;
462
+ case 'it-checkbox':
463
+ if (this.host.checked) {
464
+ if (event.formData.getAll(name).indexOf(value) < 0) {
465
+ // handle group checkbox
466
+ event.formData.append(name, value);
467
+ }
468
+ }
469
+ break;
470
+ case 'it-checkbox-group':
471
+ // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
472
+ break;
461
473
  default:
462
474
  if (Array.isArray(value)) {
463
475
  value.forEach((val) => {
@@ -479,13 +491,30 @@ class FormControlController {
479
491
  this.setUserInteracted(control, true);
480
492
  });
481
493
  }
482
- if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
494
+ const resReportValidity = reportValidity(this.host);
495
+ if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
483
496
  event.preventDefault();
484
497
  // event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
498
+ // Scroll al primo controllo non valido
499
+ const formControls = formCollections.get(this.form);
500
+ if (formControls) {
501
+ for (const control of formControls) {
502
+ if (!control.validity?.valid) {
503
+ // Scroll smooth verso il controllo non valido
504
+ control.scrollIntoView({
505
+ behavior: 'smooth',
506
+ block: 'center',
507
+ });
508
+ break;
509
+ }
510
+ }
511
+ }
485
512
  }
513
+ this.submittedOnce = true;
486
514
  };
487
515
  this.handleFormReset = () => {
488
516
  this.options.setValue(this.host, '');
517
+ this.submittedOnce = false;
489
518
  this.setUserInteracted(this.host, false);
490
519
  interactions.set(this.host, []);
491
520
  };
@@ -650,6 +679,7 @@ class FormControlController {
650
679
  if (!formCollection) {
651
680
  return;
652
681
  }
682
+ this.submittedOnce = false;
653
683
  // Remove this host from the form's collection
654
684
  formCollection.delete(this.host);
655
685
  // Check to make sure there's no other form controls in the collection. If we do this
@@ -746,6 +776,10 @@ class FormControlController {
746
776
  host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
747
777
  host.toggleAttribute('data-user-valid', isValid && hasInteracted);
748
778
  }
779
+ userInteracted() {
780
+ const hasInteracted = Boolean(userInteractedControls.has(this.host));
781
+ return hasInteracted;
782
+ }
749
783
  /**
750
784
  * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
751
785
  * that affects constraint validation changes so the component receives the correct validity states.
@@ -782,6 +816,7 @@ const translation = {
782
816
  $name: 'Italiano',
783
817
  $dir: 'ltr',
784
818
  validityRequired: 'Questo campo è obbligatorio.',
819
+ validityGroupRequired: "Scegli almeno un'opzione",
785
820
  validityPattern: 'Il valore non corrisponde al formato richiesto.',
786
821
  validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
787
822
  validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
@@ -826,24 +861,27 @@ class FormControl extends BaseLocalizedComponent {
826
861
  this.maxlength = -1;
827
862
  /** If the input is required. */
828
863
  this.required = false;
864
+ /* For grouped input, like checkbox-group */
865
+ this.isInGroup = false;
829
866
  this.validationMessage = '';
830
867
  }
831
868
  /** Gets the validity state object */
832
869
  get validity() {
833
870
  return this.inputElement?.validity;
834
871
  }
872
+ /** Gets the associated form, if one exists. */
873
+ getForm() {
874
+ return this.formControlController.getForm();
875
+ }
835
876
  // Form validation methods
836
877
  checkValidity() {
837
878
  const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
838
879
  return inputValid;
839
880
  }
840
- /** Gets the associated form, if one exists. */
841
- getForm() {
842
- return this.formControlController.getForm();
843
- }
844
881
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
845
882
  reportValidity() {
846
- const ret = this.inputElement.checkValidity();
883
+ // const ret = this.inputElement.checkValidity();
884
+ const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
847
885
  this.handleValidationMessages();
848
886
  return ret; // this.inputElement.reportValidity();
849
887
  }
@@ -888,7 +926,8 @@ class FormControl extends BaseLocalizedComponent {
888
926
  handleValidationMessages() {
889
927
  if (!this.customValidation) {
890
928
  const _v = this.inputElement.validity;
891
- if (_v.valueMissing) {
929
+ const isRequiredHandledByGroup = this.isInGroup === true;
930
+ if (_v.valueMissing && !isRequiredHandledByGroup) {
892
931
  this.setCustomValidity(this.$t('validityRequired'));
893
932
  }
894
933
  else if (_v.patternMismatch) {
@@ -959,7 +998,7 @@ class FormControl extends BaseLocalizedComponent {
959
998
  if (this.customValidation) {
960
999
  this.setCustomValidity(this.validationText ?? '');
961
1000
  }
962
- else {
1001
+ else if (this.formControlController.userInteracted()) {
963
1002
  this.formControlController.updateValidity();
964
1003
  }
965
1004
  }
@@ -1027,11 +1066,23 @@ __decorate([
1027
1066
  ,
1028
1067
  __metadata("design:type", Object)
1029
1068
  ], FormControl.prototype, "required", void 0);
1069
+ __decorate([
1070
+ property({ type: Boolean }),
1071
+ __metadata("design:type", Object)
1072
+ ], FormControl.prototype, "isInGroup", void 0);
1030
1073
  __decorate([
1031
1074
  state(),
1032
1075
  __metadata("design:type", Object)
1033
1076
  ], FormControl.prototype, "validationMessage", void 0);
1034
1077
 
1078
+ if (typeof window !== 'undefined') {
1079
+ window._itAnalytics = window._itAnalytics || {};
1080
+ window._itAnalytics = {
1081
+ ...window._itAnalytics,
1082
+ version: '1.0.0-alpha.5',
1083
+ };
1084
+ }
1085
+
1035
1086
  var styles = css`/***************************** 1 ****************************************/
1036
1087
  /***************************** 2 ****************************************/
1037
1088
  /***************************** 1 ****************************************/
@@ -1097,78 +1148,82 @@ button:not(:disabled),
1097
1148
  }
1098
1149
  }
1099
1150
  .btn {
1100
- --bs-btn-padding-x: var(--bs-spacing-s);
1101
- --bs-btn-padding-y: var(--bs-spacing-xs);
1102
- --bs-btn-font-family: var(--bs-font-sans);
1103
- --bs-btn-font-weight: var(--bs-font-weight-solid);
1104
- --bs-btn-font-size: var(--bs-label-font-size);
1105
- --bs-btn-line-height: var(--bs-font-line-height-3);
1106
- --bs-btn-text-color: var(--bs-color-text-primary);
1107
- --bs-btn-background: transparent;
1108
- --bs-btn-border-size: 0;
1109
- --bs-btn-border-color: transparent;
1110
- --bs-btn-border-radius: var(--bs-radius-smooth);
1111
- --bs-btn-outline-border-size: 2px;
1112
- --bs-btn-outline-border-color: transparent;
1113
- --bs-btn-disabled-opacity: 0.5;
1151
+ --bsi-btn-background: transparent;
1152
+ --bsi-btn-border-color: transparent;
1153
+ --bsi-btn-border-radius: var(--bsi-radius-smooth);
1154
+ --bsi-btn-border-size: 0;
1155
+ --bsi-btn-disabled-opacity: 0.5;
1156
+ --bsi-btn-font-family: var(--bsi-font-sans);
1157
+ --bsi-btn-font-size: var(--bsi-label-font-size);
1158
+ --bsi-btn-font-weight: var(--bsi-font-weight-solid);
1159
+ --bsi-btn-line-height: var(--bsi-font-line-height-3);
1160
+ --bsi-btn-outline-border-color: transparent;
1161
+ --bsi-btn-outline-border-size: 2px;
1162
+ --bsi-btn-padding-x: var(--bsi-spacing-s);
1163
+ --bsi-btn-padding-y: var(--bsi-spacing-xs);
1164
+ --bsi-btn-text-color: var(--bsi-color-text-primary);
1114
1165
  }
1115
1166
 
1167
+ /* stylelint-disable-next-line no-duplicate-selectors */
1116
1168
  .btn {
1117
1169
  display: inline-block;
1118
- padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
1119
- border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
1120
- border-radius: var(--bs-btn-border-radius);
1121
- background: var(--bs-btn-background);
1122
- box-shadow: var(--bs-btn-box-shadow, none);
1123
- color: var(--bs-btn-text-color);
1124
- font-family: var(--bs-btn-font-family);
1125
- font-size: var(--bs-btn-font-size);
1126
- font-weight: var(--bs-btn-font-weight);
1127
- line-height: var(--bs-btn-line-height);
1170
+ padding: var(--bsi-btn-padding-y) var(--bsi-btn-padding-x);
1171
+ border: var(--bsi-btn-border-width) solid var(--bsi-btn-border-color);
1172
+ border-radius: var(--bsi-btn-border-radius);
1173
+ background: var(--bsi-btn-background);
1174
+ box-shadow: var(--bsi-btn-box-shadow, none);
1175
+ color: var(--bsi-btn-text-color);
1176
+ font-family: var(--bsi-btn-font-family);
1177
+ font-size: var(--bsi-btn-font-size);
1178
+ font-weight: var(--bsi-btn-font-weight);
1179
+ line-height: var(--bsi-btn-line-height);
1128
1180
  text-align: center;
1129
1181
  text-decoration: none;
1130
1182
  vertical-align: middle;
1131
1183
  white-space: initial;
1132
1184
  width: auto;
1133
- transition: all var(--bs-transition-instant) ease-in-out;
1185
+ transition: all var(--bsi-transition-instant) ease-in-out;
1134
1186
  user-select: none;
1135
1187
  }
1188
+ .btn:hover {
1189
+ color: var(--bsi-btn-text-color);
1190
+ }
1136
1191
  .btn:disabled, .btn.disabled {
1137
- opacity: var(--bs-btn-disabled-opacity);
1192
+ opacity: var(--bsi-btn-disabled-opacity);
1138
1193
  cursor: not-allowed;
1139
1194
  pointer-events: none;
1140
1195
  }
1141
1196
  .btn:focus-visible {
1142
- border-color: var(--bs-btn-hover-border-color);
1197
+ border-color: var(--bsi-btn-hover-border-color);
1143
1198
  outline: 0;
1144
1199
  }
1145
1200
  .btn-check:focus-visible + .btn {
1146
- border-color: var(--bs-btn-hover-border-color);
1201
+ border-color: var(--bsi-btn-hover-border-color);
1147
1202
  outline: 0;
1148
1203
  }
1149
1204
 
1150
1205
  .btn-link {
1151
- --bs-btn-background: transparent;
1152
- --bs-btn-border-color: transparent;
1206
+ --bsi-btn-background: transparent;
1207
+ --bsi-btn-border-color: transparent;
1153
1208
  text-decoration: underline;
1154
1209
  }
1155
1210
  .btn-link:hover {
1156
- color: var(--bs-color-link-hover);
1211
+ color: var(--bsi-color-link-hover);
1157
1212
  }
1158
1213
 
1159
1214
  .btn-xs {
1160
- --bs-btn-padding-x: var(--bs-spacing-xs);
1161
- --bs-btn-padding-y: var(--bs-spacing-xs);
1162
- --bs-btn-font-size: var(--bs-label-font-size-s);
1163
- --bs-btn-line-height: var(--bs-font-line-height-1);
1164
- --bs-rounded-icon-size: 20px;
1215
+ --bsi-btn-padding-x: var(--bsi-spacing-xs);
1216
+ --bsi-btn-padding-y: var(--bsi-spacing-xs);
1217
+ --bsi-btn-font-size: var(--bsi-label-font-size-s);
1218
+ --bsi-btn-line-height: var(--bsi-font-line-height-1);
1219
+ --bsi-rounded-icon-size: 20px;
1165
1220
  }
1166
1221
 
1167
1222
  .btn-lg {
1168
- --bs-btn-padding-x: var(--bs-spacing-m);
1169
- --bs-btn-padding-y: var(--bs-spacing-s);
1170
- --bs-btn-font-size: var(--bs-label-font-size-m);
1171
- --bs-btn-line-height: var(--bs-font-line-height-5);
1223
+ --bsi-btn-padding-x: var(--bsi-spacing-m);
1224
+ --bsi-btn-padding-y: var(--bsi-spacing-s);
1225
+ --bsi-btn-font-size: var(--bsi-label-font-size-l);
1226
+ --bsi-btn-line-height: var(--bsi-font-line-height-5);
1172
1227
  }
1173
1228
 
1174
1229
  .btn-progress {
@@ -1180,7 +1235,7 @@ button:not(:disabled),
1180
1235
  flex-direction: row;
1181
1236
  align-items: center;
1182
1237
  justify-content: center;
1183
- gap: var(--bs-icon-spacing);
1238
+ gap: var(--bsi-icon-spacing);
1184
1239
  }
1185
1240
 
1186
1241
  .btn-full {
@@ -1207,16 +1262,16 @@ button:not(:disabled),
1207
1262
 
1208
1263
  .btn-primary,
1209
1264
  a.btn-primary {
1210
- --bs-btn-text-color: var(--bs-color-text-inverse);
1211
- --bs-btn-background: var(--bs-color-background-primary);
1265
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1266
+ --bsi-btn-background: var(--bsi-color-background-primary);
1212
1267
  }
1213
1268
  .btn-primary:hover,
1214
1269
  a.btn-primary:hover {
1215
- --bs-btn-background: var(--bs-color-background-primary-hover);
1270
+ --bsi-btn-background: var(--bsi-color-background-primary-hover);
1216
1271
  }
1217
1272
  .btn-primary:active,
1218
1273
  a.btn-primary:active {
1219
- --bs-btn-background: var(--bs-color-background-primary-active);
1274
+ --bsi-btn-background: var(--bsi-color-background-primary-active);
1220
1275
  }
1221
1276
  .btn-primary.btn-progress,
1222
1277
  a.btn-primary.btn-progress {
@@ -1227,16 +1282,16 @@ a.btn-primary.btn-progress {
1227
1282
 
1228
1283
  .btn-secondary,
1229
1284
  a.btn-secondary {
1230
- --bs-btn-text-color: var(--bs-color-text-inverse);
1231
- --bs-btn-background: var(--bs-color-background-secondary);
1285
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1286
+ --bsi-btn-background: var(--bsi-color-background-secondary);
1232
1287
  }
1233
1288
  .btn-secondary:hover,
1234
1289
  a.btn-secondary:hover {
1235
- --bs-btn-background: var(--bs-color-background-secondary-hover);
1290
+ --bsi-btn-background: var(--bsi-color-background-secondary-hover);
1236
1291
  }
1237
1292
  .btn-secondary:active,
1238
1293
  a.btn-secondary:active {
1239
- --bs-btn-background: var(--bs-color-background-secondary-active);
1294
+ --bsi-btn-background: var(--bsi-color-background-secondary-active);
1240
1295
  }
1241
1296
  .btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
1242
1297
  a.btn-secondary:disabled.btn-progress,
@@ -1248,173 +1303,174 @@ a.btn-secondary.disabled.btn-progress {
1248
1303
 
1249
1304
  .btn-success,
1250
1305
  a.btn-success {
1251
- --bs-btn-text-color: var(--bs-color-text-inverse);
1252
- --bs-btn-background: var(--bs-color-background-success);
1306
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1307
+ --bsi-btn-background: var(--bsi-color-background-success);
1253
1308
  }
1254
1309
  .btn-success:hover,
1255
1310
  a.btn-success:hover {
1256
- --bs-btn-background: var(--bs-color-background-success-hover);
1311
+ --bsi-btn-background: var(--bsi-color-background-success-hover);
1257
1312
  }
1258
1313
  .btn-success:active,
1259
1314
  a.btn-success:active {
1260
- --bs-btn-background: var(--bs-color-background-success-active);
1315
+ --bsi-btn-background: var(--bsi-color-background-success-active);
1261
1316
  }
1262
1317
 
1263
1318
  .btn-warning,
1264
1319
  a.btn-warning {
1265
- --bs-btn-text-color: var(--bs-color-text-inverse);
1266
- --bs-btn-background: var(--bs-color-background-warning);
1320
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1321
+ --bsi-btn-background: var(--bsi-color-background-warning);
1267
1322
  }
1268
1323
  .btn-warning:hover,
1269
1324
  a.btn-warning:hover {
1270
- --bs-btn-background: var(--bs-color-background-warning-hover);
1325
+ --bsi-btn-background: var(--bsi-color-background-warning-hover);
1271
1326
  }
1272
1327
  .btn-warning:active,
1273
1328
  a.btn-warning:active {
1274
- --bs-btn-background: var(--bs-color-background-warning-active);
1329
+ --bsi-btn-background: var(--bsi-color-background-warning-active);
1275
1330
  }
1276
1331
 
1277
1332
  .btn-danger,
1278
1333
  a.btn-danger {
1279
- --bs-btn-text-color: var(--bs-color-text-inverse);
1280
- --bs-btn-background: var(--bs-color-background-danger);
1334
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1335
+ --bsi-btn-background: var(--bsi-color-background-danger);
1281
1336
  }
1282
1337
  .btn-danger:hover,
1283
1338
  a.btn-danger:hover {
1284
- --bs-btn-background: var(--bs-color-background-danger-hover);
1339
+ --bsi-btn-background: var(--bsi-color-background-danger-hover);
1285
1340
  }
1286
1341
  .btn-danger:active,
1287
1342
  a.btn-danger:active {
1288
- --bs-btn-background: var(--bs-color-background-danger-active);
1343
+ --bsi-btn-background: var(--bsi-color-background-danger-active);
1289
1344
  }
1290
1345
 
1291
1346
  .btn[class*=btn-outline-] {
1292
- --bs-btn-box-shadow: inset 0 0 0 var(--bs-btn-outline-border-size) var(--bs-btn-outline-border-color);
1347
+ --bsi-btn-box-shadow: inset 0 0 0 var(--bsi-btn-outline-border-size) var(--bsi-btn-outline-border-color);
1293
1348
  }
1294
1349
 
1295
1350
  .btn-outline-primary,
1296
1351
  a.btn-outline-primary {
1297
- --bs-btn-outline-border-color: var(--bs-color-border-primary);
1298
- --bs-btn-text-color: var(--bs-color-text-primary);
1352
+ --bsi-btn-outline-border-color: var(--bsi-color-border-primary);
1353
+ --bsi-btn-text-color: var(--bsi-color-text-primary);
1299
1354
  }
1300
1355
  .btn-outline-primary:hover,
1301
1356
  a.btn-outline-primary:hover {
1302
- --bs-btn-outline-border-color: var(--bs-color-border-primary-hover);
1303
- --bs-btn-text-color: var(--bs-color-link-hover);
1357
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-primary-hover) 70%, black);
1358
+ --bsi-btn-text-color: var(--bsi-color-link-hover);
1304
1359
  }
1305
1360
  .btn-outline-primary:active,
1306
1361
  a.btn-outline-primary:active {
1307
- --bs-btn-outline-border-color: var(--bs-color-border-primary-active);
1308
- --bs-btn-text-color: var(--bs-color-link-active);
1362
+ --bsi-btn-outline-border-color: var(--bsi-color-border-primary-active);
1363
+ --bsi-btn-text-color: var(--bsi-color-link-active);
1309
1364
  }
1310
1365
  .btn-outline-secondary,
1311
1366
  a.btn-outline-secondary {
1312
- --bs-btn-outline-border-color: var(--bs-color-border-secondary);
1313
- --bs-btn-text-color: var(--bs-color-text-secondary);
1367
+ --bsi-btn-outline-border-color: var(--bsi-color-border-secondary);
1368
+ --bsi-btn-text-color: var(--bsi-color-text-secondary);
1314
1369
  }
1315
1370
  .btn-outline-secondary:hover,
1316
1371
  a.btn-outline-secondary:hover {
1317
- --bs-btn-outline-border-color: var(--bs-color-border-secondary-hover);
1318
- --bs-btn-text-color: var(--bs-color-text-secondary-hover);
1372
+ --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-hover);
1373
+ --bsi-btn-text-color: var(--bsi-color-link-secondary-hover);
1319
1374
  }
1320
1375
  .btn-outline-secondary:active,
1321
1376
  a.btn-outline-secondary:active {
1322
- --bs-btn-outline-border-color: var(--bs-color-border-secondary-active);
1323
- --bs-btn-text-color: var(--bs-color-text-secondary-active);
1377
+ --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-active);
1378
+ --bsi-btn-text-color: var(--bsi-color-link-secondary-active);
1324
1379
  }
1325
1380
  .btn-outline-success,
1326
1381
  a.btn-outline-success {
1327
- --bs-btn-outline-border-color: var(--bs-color-border-success);
1328
- --bs-btn-text-color: var(--bs-color-text-success);
1382
+ --bsi-btn-outline-border-color: var(--bsi-color-border-success);
1383
+ --bsi-btn-text-color: var(--bsi-color-text-success);
1329
1384
  }
1330
1385
  .btn-outline-success:hover,
1331
1386
  a.btn-outline-success:hover {
1332
- --bs-btn-outline-border-color: var(--bs-color-border-success-hover);
1333
- --bs-btn-text-color: var(--bs-color-text-success-hover);
1387
+ /* aumenta contrasto scurendo il bordo rispetto al token base */
1388
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-success-hover) 70%, black);
1389
+ --bsi-btn-text-color: var(--bsi-color-text-success-hover);
1334
1390
  }
1335
1391
  .btn-outline-success:active,
1336
1392
  a.btn-outline-success:active {
1337
- --bs-btn-outline-border-color: var(--bs-color-border-success-active);
1338
- --bs-btn-text-color: var(--bs-color-text-success-active);
1393
+ --bsi-btn-outline-border-color: var(--bsi-color-border-success-active);
1394
+ --bsi-btn-text-color: var(--bsi-color-text-success-active);
1339
1395
  }
1340
1396
  .btn-outline-warning,
1341
1397
  a.btn-outline-warning {
1342
- --bs-btn-outline-border-color: var(--bs-color-border-warning);
1343
- --bs-btn-text-color: var(--bs-color-text-warning);
1398
+ --bsi-btn-outline-border-color: var(--bsi-color-border-warning);
1399
+ --bsi-btn-text-color: var(--bsi-color-text-warning);
1344
1400
  }
1345
1401
  .btn-outline-warning:hover,
1346
1402
  a.btn-outline-warning:hover {
1347
- --bs-btn-outline-border-color: var(--bs-color-border-warning-hover);
1348
- --bs-btn-text-color: var(--bs-color-text-warning-hover);
1403
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-warning-hover) 70%, black);
1404
+ --bsi-btn-text-color: var(--bsi-color-text-warning-hover);
1349
1405
  }
1350
1406
  .btn-outline-warning:active,
1351
1407
  a.btn-outline-warning:active {
1352
- --bs-btn-outline-border-color: var(--bs-color-border-warning-active);
1353
- --bs-btn-text-color: var(--bs-color-text-warning-active);
1408
+ --bsi-btn-outline-border-color: var(--bsi-color-border-warning-active);
1409
+ --bsi-btn-text-color: var(--bsi-color-text-warning-active);
1354
1410
  }
1355
1411
  .btn-outline-danger,
1356
1412
  a.btn-outline-danger {
1357
- --bs-btn-outline-border-color: var(--bs-color-border-danger);
1358
- --bs-btn-text-color: var(--bs-color-text-danger);
1413
+ --bsi-btn-outline-border-color: var(--bsi-color-border-danger);
1414
+ --bsi-btn-text-color: var(--bsi-color-text-danger);
1359
1415
  }
1360
1416
  .btn-outline-danger:hover,
1361
1417
  a.btn-outline-danger:hover {
1362
- --bs-btn-outline-border-color: var(--bs-color-border-danger-hover);
1363
- --bs-btn-text-color: var(--bs-color-text-danger-hover);
1418
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-danger-hover) 70%, black);
1419
+ --bsi-btn-text-color: var(--bsi-color-text-danger-hover);
1364
1420
  }
1365
1421
  .btn-outline-danger:active,
1366
1422
  a.btn-outline-danger:active {
1367
- --bs-btn-outline-border-color: var(--bs-color-border-danger-active);
1368
- --bs-btn-text-color: var(--bs-color-text-danger-active);
1423
+ --bsi-btn-outline-border-color: var(--bsi-color-border-danger-active);
1424
+ --bsi-btn-text-color: var(--bsi-color-text-danger-active);
1369
1425
  }
1370
1426
 
1371
1427
  .bg-dark .btn-link {
1372
- --bs-btn-text-color: var(--bs-color-text-inverse);
1428
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1373
1429
  }
1374
1430
  .bg-dark a.btn-primary,
1375
1431
  .bg-dark .btn-primary {
1376
- --bs-btn-text-color: var(--bs-color-text-primary);
1377
- --bs-btn-background: var(--bs-color-background-inverse);
1432
+ --bsi-btn-text-color: var(--bsi-color-text-primary);
1433
+ --bsi-btn-background: var(--bsi-color-background-inverse);
1378
1434
  }
1379
1435
  .bg-dark a.btn-primary:hover,
1380
1436
  .bg-dark .btn-primary:hover {
1381
- --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 85%, black);
1437
+ --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 85%, black);
1382
1438
  }
1383
1439
  .bg-dark a.btn-primary:active,
1384
1440
  .bg-dark .btn-primary:active {
1385
- --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 80%, black);
1441
+ --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 80%, black);
1386
1442
  }
1387
1443
  .bg-dark a.btn-secondary,
1388
1444
  .bg-dark .btn-secondary {
1389
- --bs-btn-text-color: var(--bs-color-text-inverse);
1390
- --bs-btn-background: var(--bs-color-background-secondary);
1445
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1446
+ --bsi-btn-background: var(--bsi-color-background-secondary);
1391
1447
  }
1392
1448
  .bg-dark a.btn-secondary:hover, .bg-dark a.btn-secondary:active,
1393
1449
  .bg-dark .btn-secondary:hover,
1394
1450
  .bg-dark .btn-secondary:active {
1395
- --bs-btn-background: color-mix(in srgb, var(--bs-color-background-secondary) 85%, black);
1451
+ --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-secondary) 85%, black);
1396
1452
  }
1397
1453
  .bg-dark .btn-outline-primary,
1398
1454
  .bg-dark a.btn-outline-primary {
1399
- --bs-btn-outline-border-color: var(--bs-color-border-inverse);
1400
- --bs-btn-text-color: var(--bs-color-text-inverse);
1455
+ --bsi-btn-outline-border-color: var(--bsi-color-border-inverse);
1456
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1401
1457
  }
1402
1458
  .bg-dark .btn-outline-primary:hover,
1403
1459
  .bg-dark a.btn-outline-primary:hover {
1404
- --bs-btn-boxshadow-color-darken: color-mix(in srgb, var(--bs-color-border-inverse) 80%, black);
1405
- --bs-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bs-btn-boxshadow-color-darken) 80%, gray);
1406
- --bs-btn-outline-border-color: var(--bs-btn-boxshadow-color-desaturated);
1460
+ --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-border-inverse) 80%, black);
1461
+ --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
1462
+ --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
1407
1463
  }
1408
1464
  .bg-dark .btn-outline-secondary,
1409
1465
  .bg-dark a.btn-outline-secondary {
1410
- --bs-btn-text-color: var(--bs-color-text-inverse);
1466
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1411
1467
  }
1412
1468
  .bg-dark .btn-outline-secondary:hover, .bg-dark .btn-outline-secondary:active,
1413
1469
  .bg-dark a.btn-outline-secondary:hover,
1414
1470
  .bg-dark a.btn-outline-secondary:active {
1415
- --bs-btn-boxshadow-color-darken: color-mix(in srgb, var(--bs-color-background-secondary) 80%, black);
1416
- --bs-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bs-btn-boxshadow-color-darken) 80%, gray);
1417
- --bs-btn-outline-border-color: var(--bs-btn-boxshadow-color-desaturated);
1471
+ --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-background-secondary) 80%, black);
1472
+ --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
1473
+ --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
1418
1474
  }
1419
1475
 
1420
1476
  .btn-close {
@@ -1426,7 +1482,7 @@ a.btn-outline-danger:active {
1426
1482
  border: 0;
1427
1483
  opacity: 0.5;
1428
1484
  background-color: transparent;
1429
- color: var(--bs-color-text-base);
1485
+ color: var(--bsi-color-text-base);
1430
1486
  }
1431
1487
  .btn-close .icon {
1432
1488
  position: absolute;
@@ -1442,7 +1498,7 @@ a.btn-outline-danger:active {
1442
1498
  opacity: 1;
1443
1499
  }
1444
1500
  .btn-close:disabled, .btn-close.disabled {
1445
- opacity: var(--bs-btn-disabled-opacity);
1501
+ opacity: var(--bsi-btn-disabled-opacity);
1446
1502
  pointer-events: none;
1447
1503
  user-select: none;
1448
1504
  }
@@ -1465,7 +1521,12 @@ let ItButton = class ItButton extends BaseComponent {
1465
1521
  this._onKeyDown = (e) => {
1466
1522
  if (e.key === 'Enter' || e.key === ' ') {
1467
1523
  e.preventDefault();
1468
- this._nativeButton?.click();
1524
+ if (!this.disabled) {
1525
+ this._nativeButton?.click();
1526
+ }
1527
+ else {
1528
+ e.stopPropagation();
1529
+ }
1469
1530
  }
1470
1531
  };
1471
1532
  }
@@ -1540,9 +1601,9 @@ let ItButton = class ItButton extends BaseComponent {
1540
1601
  class="${classes}"
1541
1602
  @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
1542
1603
  .value="${ifDefined(this.value ? this.value : undefined)}"
1604
+ aria-disabled="${ifDefined(this.disabled ? this.disabled : undefined)}"
1543
1605
  ${setAttributes(this._ariaAttributes)}
1544
1606
  aria-expanded="${ifDefined(this.expanded !== undefined ? this.expanded : undefined)}"
1545
- aria-disabled="${ifDefined(this.disabled ? this.disabled : undefined)}"
1546
1607
  >
1547
1608
  <slot></slot>
1548
1609
  </button>
@@ -1587,7 +1648,7 @@ __decorate([
1587
1648
  __metadata("design:type", Object)
1588
1649
  ], ItButton.prototype, "internals", void 0);
1589
1650
  __decorate([
1590
- property({ type: Boolean, reflect: true, attribute: 'it-aria-disabled' }),
1651
+ property({ type: Boolean, reflect: true }),
1591
1652
  __metadata("design:type", Boolean)
1592
1653
  ], ItButton.prototype, "disabled", void 0);
1593
1654
  __decorate([