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

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 (12) hide show
  1. package/README.md +2 -2
  2. package/custom-elements.json +110 -31
  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 +10 -2
  8. package/dist/src/it-button.d.ts.map +1 -1
  9. package/dist/src/it-button.js +250 -135
  10. package/dist/src/it-button.js.map +1 -1
  11. package/package.json +3 -4
  12. package/styles/globals.scss +21 -0
package/dist/src/it-button.js CHANGED
@@ -114,7 +114,9 @@ function registerTranslation(...translation) {
114
114
  });
115
115
  update();
116
116
  }
117
- window.registerTranslation = registerTranslation;
117
+ if (typeof window !== 'undefined') {
118
+ window.registerTranslation = registerTranslation;
119
+ }
118
120
  /**
119
121
  * Localize Reactive Controller for components built with Lit
120
122
  *
@@ -437,6 +439,7 @@ const interactions = new WeakMap();
437
439
  /** A reactive controller to allow form controls to participate in form submission, validation, etc. */
438
440
  class FormControlController {
439
441
  constructor(host, options) {
442
+ this.submittedOnce = false;
440
443
  this.handleFormData = (event) => {
441
444
  // console.log('handleFormData');
442
445
  const disabled = this.options.disabled(this.host);
@@ -458,6 +461,27 @@ class FormControlController {
458
461
  event.formData.append(name, value);
459
462
  }
460
463
  break;
464
+ case 'it-checkbox':
465
+ case 'it-toggle':
466
+ if (this.host.checked) {
467
+ if (event.formData.getAll(name).indexOf(value) < 0) {
468
+ // handle group checkbox
469
+ event.formData.append(name, value);
470
+ }
471
+ }
472
+ break;
473
+ case 'it-checkbox-group':
474
+ case 'it-toggle-group':
475
+ // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
476
+ break;
477
+ case 'it-upload':
478
+ // value is File[] — append each File object directly (not as string)
479
+ if (Array.isArray(value)) {
480
+ value.forEach((file) => {
481
+ event.formData.append(name, file);
482
+ });
483
+ }
484
+ break;
461
485
  default:
462
486
  if (Array.isArray(value)) {
463
487
  value.forEach((val) => {
@@ -479,13 +503,30 @@ class FormControlController {
479
503
  this.setUserInteracted(control, true);
480
504
  });
481
505
  }
482
- if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
506
+ const resReportValidity = reportValidity(this.host);
507
+ if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
483
508
  event.preventDefault();
484
509
  // event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
510
+ // Scroll al primo controllo non valido
511
+ const formControls = formCollections.get(this.form);
512
+ if (formControls) {
513
+ for (const control of formControls) {
514
+ if (!control.validity?.valid) {
515
+ // Scroll smooth verso il controllo non valido
516
+ control.scrollIntoView({
517
+ behavior: 'smooth',
518
+ block: 'center',
519
+ });
520
+ break;
521
+ }
522
+ }
523
+ }
485
524
  }
525
+ this.submittedOnce = true;
486
526
  };
487
527
  this.handleFormReset = () => {
488
528
  this.options.setValue(this.host, '');
529
+ this.submittedOnce = false;
489
530
  this.setUserInteracted(this.host, false);
490
531
  interactions.set(this.host, []);
491
532
  };
@@ -650,6 +691,7 @@ class FormControlController {
650
691
  if (!formCollection) {
651
692
  return;
652
693
  }
694
+ this.submittedOnce = false;
653
695
  // Remove this host from the form's collection
654
696
  formCollection.delete(this.host);
655
697
  // Check to make sure there's no other form controls in the collection. If we do this
@@ -746,6 +788,10 @@ class FormControlController {
746
788
  host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
747
789
  host.toggleAttribute('data-user-valid', isValid && hasInteracted);
748
790
  }
791
+ userInteracted() {
792
+ const hasInteracted = Boolean(userInteractedControls.has(this.host));
793
+ return hasInteracted;
794
+ }
749
795
  /**
750
796
  * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
751
797
  * that affects constraint validation changes so the component receives the correct validity states.
@@ -782,6 +828,7 @@ const translation = {
782
828
  $name: 'Italiano',
783
829
  $dir: 'ltr',
784
830
  validityRequired: 'Questo campo è obbligatorio.',
831
+ validityGroupRequired: "Scegli almeno un'opzione",
785
832
  validityPattern: 'Il valore non corrisponde al formato richiesto.',
786
833
  validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
787
834
  validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
@@ -826,24 +873,27 @@ class FormControl extends BaseLocalizedComponent {
826
873
  this.maxlength = -1;
827
874
  /** If the input is required. */
828
875
  this.required = false;
876
+ /* For grouped input, like checkbox-group */
877
+ this.isInGroup = false;
829
878
  this.validationMessage = '';
830
879
  }
831
880
  /** Gets the validity state object */
832
881
  get validity() {
833
882
  return this.inputElement?.validity;
834
883
  }
884
+ /** Gets the associated form, if one exists. */
885
+ getForm() {
886
+ return this.formControlController.getForm();
887
+ }
835
888
  // Form validation methods
836
889
  checkValidity() {
837
890
  const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
838
891
  return inputValid;
839
892
  }
840
- /** Gets the associated form, if one exists. */
841
- getForm() {
842
- return this.formControlController.getForm();
843
- }
844
893
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
845
894
  reportValidity() {
846
- const ret = this.inputElement.checkValidity();
895
+ // const ret = this.inputElement.checkValidity();
896
+ const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
847
897
  this.handleValidationMessages();
848
898
  return ret; // this.inputElement.reportValidity();
849
899
  }
@@ -888,7 +938,8 @@ class FormControl extends BaseLocalizedComponent {
888
938
  handleValidationMessages() {
889
939
  if (!this.customValidation) {
890
940
  const _v = this.inputElement.validity;
891
- if (_v.valueMissing) {
941
+ const isRequiredHandledByGroup = this.isInGroup === true;
942
+ if (_v.valueMissing && !isRequiredHandledByGroup) {
892
943
  this.setCustomValidity(this.$t('validityRequired'));
893
944
  }
894
945
  else if (_v.patternMismatch) {
@@ -959,7 +1010,7 @@ class FormControl extends BaseLocalizedComponent {
959
1010
  if (this.customValidation) {
960
1011
  this.setCustomValidity(this.validationText ?? '');
961
1012
  }
962
- else {
1013
+ else if (this.formControlController.userInteracted()) {
963
1014
  this.formControlController.updateValidity();
964
1015
  }
965
1016
  }
@@ -1027,11 +1078,23 @@ __decorate([
1027
1078
  ,
1028
1079
  __metadata("design:type", Object)
1029
1080
  ], FormControl.prototype, "required", void 0);
1081
+ __decorate([
1082
+ property({ type: Boolean }),
1083
+ __metadata("design:type", Object)
1084
+ ], FormControl.prototype, "isInGroup", void 0);
1030
1085
  __decorate([
1031
1086
  state(),
1032
1087
  __metadata("design:type", Object)
1033
1088
  ], FormControl.prototype, "validationMessage", void 0);
1034
1089
 
1090
+ if (typeof window !== 'undefined') {
1091
+ window._itAnalytics = window._itAnalytics || {};
1092
+ window._itAnalytics = {
1093
+ ...window._itAnalytics,
1094
+ version: '1.0.0-alpha.11',
1095
+ };
1096
+ }
1097
+
1035
1098
  var styles = css`/***************************** 1 ****************************************/
1036
1099
  /***************************** 2 ****************************************/
1037
1100
  /***************************** 1 ****************************************/
@@ -1097,78 +1160,82 @@ button:not(:disabled),
1097
1160
  }
1098
1161
  }
1099
1162
  .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;
1163
+ --bsi-btn-background: transparent;
1164
+ --bsi-btn-border-color: transparent;
1165
+ --bsi-btn-border-radius: var(--bsi-radius-smooth);
1166
+ --bsi-btn-border-size: 0;
1167
+ --bsi-btn-disabled-opacity: 0.5;
1168
+ --bsi-btn-font-family: var(--bsi-font-sans);
1169
+ --bsi-btn-font-size: var(--bsi-label-font-size);
1170
+ --bsi-btn-font-weight: var(--bsi-font-weight-solid);
1171
+ --bsi-btn-line-height: var(--bsi-font-leading-3);
1172
+ --bsi-btn-outline-border-color: transparent;
1173
+ --bsi-btn-outline-border-size: 2px;
1174
+ --bsi-btn-padding-x: var(--bsi-spacing-s);
1175
+ --bsi-btn-padding-y: var(--bsi-spacing-xs);
1176
+ --bsi-btn-text-color: var(--bsi-color-text-primary);
1114
1177
  }
1115
1178
 
1179
+ /* stylelint-disable-next-line no-duplicate-selectors */
1116
1180
  .btn {
1117
1181
  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);
1182
+ padding: var(--bsi-btn-padding-y) var(--bsi-btn-padding-x);
1183
+ border: var(--bsi-btn-border-width) solid var(--bsi-btn-border-color);
1184
+ border-radius: var(--bsi-btn-border-radius);
1185
+ background: var(--bsi-btn-background);
1186
+ box-shadow: var(--bsi-btn-box-shadow, none);
1187
+ color: var(--bsi-btn-text-color);
1188
+ font-family: var(--bsi-btn-font-family);
1189
+ font-size: var(--bsi-btn-font-size);
1190
+ font-weight: var(--bsi-btn-font-weight);
1191
+ line-height: var(--bsi-btn-line-height);
1128
1192
  text-align: center;
1129
1193
  text-decoration: none;
1130
1194
  vertical-align: middle;
1131
1195
  white-space: initial;
1132
1196
  width: auto;
1133
- transition: all var(--bs-transition-instant) ease-in-out;
1197
+ transition: all var(--bsi-transition-instant) ease-in-out;
1134
1198
  user-select: none;
1135
1199
  }
1200
+ .btn:hover {
1201
+ color: var(--bsi-btn-text-color);
1202
+ }
1136
1203
  .btn:disabled, .btn.disabled {
1137
- opacity: var(--bs-btn-disabled-opacity);
1204
+ opacity: var(--bsi-btn-disabled-opacity);
1138
1205
  cursor: not-allowed;
1139
1206
  pointer-events: none;
1140
1207
  }
1141
1208
  .btn:focus-visible {
1142
- border-color: var(--bs-btn-hover-border-color);
1209
+ border-color: var(--bsi-btn-hover-border-color);
1143
1210
  outline: 0;
1144
1211
  }
1145
1212
  .btn-check:focus-visible + .btn {
1146
- border-color: var(--bs-btn-hover-border-color);
1213
+ border-color: var(--bsi-btn-hover-border-color);
1147
1214
  outline: 0;
1148
1215
  }
1149
1216
 
1150
1217
  .btn-link {
1151
- --bs-btn-background: transparent;
1152
- --bs-btn-border-color: transparent;
1218
+ --bsi-btn-background: transparent;
1219
+ --bsi-btn-border-color: transparent;
1153
1220
  text-decoration: underline;
1154
1221
  }
1155
1222
  .btn-link:hover {
1156
- color: var(--bs-color-link-hover);
1223
+ color: var(--bsi-color-link-hover);
1157
1224
  }
1158
1225
 
1159
1226
  .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;
1227
+ --bsi-btn-padding-x: var(--bsi-spacing-xs);
1228
+ --bsi-btn-padding-y: var(--bsi-spacing-xs);
1229
+ --bsi-btn-font-size: var(--bsi-label-font-size-s);
1230
+ --bsi-btn-line-height: var(--bsi-font-leading-1);
1231
+ --bsi-rounded-icon-size: 20px;
1165
1232
  }
1166
1233
 
1167
1234
  .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);
1235
+ --bsi-btn-padding-x: var(--bsi-spacing-m);
1236
+ --bsi-btn-padding-y: var(--bsi-spacing-s);
1237
+ --bsi-btn-font-size: var(--bsi-label-font-size-l);
1238
+ --bsi-btn-line-height: var(--bsi-font-leading-5);
1172
1239
  }
1173
1240
 
1174
1241
  .btn-progress {
@@ -1180,7 +1247,7 @@ button:not(:disabled),
1180
1247
  flex-direction: row;
1181
1248
  align-items: center;
1182
1249
  justify-content: center;
1183
- gap: var(--bs-icon-spacing);
1250
+ gap: var(--bsi-icon-spacing);
1184
1251
  }
1185
1252
 
1186
1253
  .btn-full {
@@ -1207,16 +1274,16 @@ button:not(:disabled),
1207
1274
 
1208
1275
  .btn-primary,
1209
1276
  a.btn-primary {
1210
- --bs-btn-text-color: var(--bs-color-text-inverse);
1211
- --bs-btn-background: var(--bs-color-background-primary);
1277
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1278
+ --bsi-btn-background: var(--bsi-color-background-primary);
1212
1279
  }
1213
1280
  .btn-primary:hover,
1214
1281
  a.btn-primary:hover {
1215
- --bs-btn-background: var(--bs-color-background-primary-hover);
1282
+ --bsi-btn-background: var(--bsi-color-background-primary-hover);
1216
1283
  }
1217
1284
  .btn-primary:active,
1218
1285
  a.btn-primary:active {
1219
- --bs-btn-background: var(--bs-color-background-primary-active);
1286
+ --bsi-btn-background: var(--bsi-color-background-primary-active);
1220
1287
  }
1221
1288
  .btn-primary.btn-progress,
1222
1289
  a.btn-primary.btn-progress {
@@ -1227,16 +1294,16 @@ a.btn-primary.btn-progress {
1227
1294
 
1228
1295
  .btn-secondary,
1229
1296
  a.btn-secondary {
1230
- --bs-btn-text-color: var(--bs-color-text-inverse);
1231
- --bs-btn-background: var(--bs-color-background-secondary);
1297
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1298
+ --bsi-btn-background: var(--bsi-color-background-secondary);
1232
1299
  }
1233
1300
  .btn-secondary:hover,
1234
1301
  a.btn-secondary:hover {
1235
- --bs-btn-background: var(--bs-color-background-secondary-hover);
1302
+ --bsi-btn-background: var(--bsi-color-background-secondary-hover);
1236
1303
  }
1237
1304
  .btn-secondary:active,
1238
1305
  a.btn-secondary:active {
1239
- --bs-btn-background: var(--bs-color-background-secondary-active);
1306
+ --bsi-btn-background: var(--bsi-color-background-secondary-active);
1240
1307
  }
1241
1308
  .btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
1242
1309
  a.btn-secondary:disabled.btn-progress,
@@ -1248,173 +1315,174 @@ a.btn-secondary.disabled.btn-progress {
1248
1315
 
1249
1316
  .btn-success,
1250
1317
  a.btn-success {
1251
- --bs-btn-text-color: var(--bs-color-text-inverse);
1252
- --bs-btn-background: var(--bs-color-background-success);
1318
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1319
+ --bsi-btn-background: var(--bsi-color-background-success);
1253
1320
  }
1254
1321
  .btn-success:hover,
1255
1322
  a.btn-success:hover {
1256
- --bs-btn-background: var(--bs-color-background-success-hover);
1323
+ --bsi-btn-background: var(--bsi-color-background-success-hover);
1257
1324
  }
1258
1325
  .btn-success:active,
1259
1326
  a.btn-success:active {
1260
- --bs-btn-background: var(--bs-color-background-success-active);
1327
+ --bsi-btn-background: var(--bsi-color-background-success-active);
1261
1328
  }
1262
1329
 
1263
1330
  .btn-warning,
1264
1331
  a.btn-warning {
1265
- --bs-btn-text-color: var(--bs-color-text-inverse);
1266
- --bs-btn-background: var(--bs-color-background-warning);
1332
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1333
+ --bsi-btn-background: var(--bsi-color-background-warning);
1267
1334
  }
1268
1335
  .btn-warning:hover,
1269
1336
  a.btn-warning:hover {
1270
- --bs-btn-background: var(--bs-color-background-warning-hover);
1337
+ --bsi-btn-background: var(--bsi-color-background-warning-hover);
1271
1338
  }
1272
1339
  .btn-warning:active,
1273
1340
  a.btn-warning:active {
1274
- --bs-btn-background: var(--bs-color-background-warning-active);
1341
+ --bsi-btn-background: var(--bsi-color-background-warning-active);
1275
1342
  }
1276
1343
 
1277
1344
  .btn-danger,
1278
1345
  a.btn-danger {
1279
- --bs-btn-text-color: var(--bs-color-text-inverse);
1280
- --bs-btn-background: var(--bs-color-background-danger);
1346
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1347
+ --bsi-btn-background: var(--bsi-color-background-danger);
1281
1348
  }
1282
1349
  .btn-danger:hover,
1283
1350
  a.btn-danger:hover {
1284
- --bs-btn-background: var(--bs-color-background-danger-hover);
1351
+ --bsi-btn-background: var(--bsi-color-background-danger-hover);
1285
1352
  }
1286
1353
  .btn-danger:active,
1287
1354
  a.btn-danger:active {
1288
- --bs-btn-background: var(--bs-color-background-danger-active);
1355
+ --bsi-btn-background: var(--bsi-color-background-danger-active);
1289
1356
  }
1290
1357
 
1291
1358
  .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);
1359
+ --bsi-btn-box-shadow: inset 0 0 0 var(--bsi-btn-outline-border-size) var(--bsi-btn-outline-border-color);
1293
1360
  }
1294
1361
 
1295
1362
  .btn-outline-primary,
1296
1363
  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);
1364
+ --bsi-btn-outline-border-color: var(--bsi-color-border-primary);
1365
+ --bsi-btn-text-color: var(--bsi-color-text-primary);
1299
1366
  }
1300
1367
  .btn-outline-primary:hover,
1301
1368
  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);
1369
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-primary-hover) 70%, black);
1370
+ --bsi-btn-text-color: var(--bsi-color-link-hover);
1304
1371
  }
1305
1372
  .btn-outline-primary:active,
1306
1373
  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);
1374
+ --bsi-btn-outline-border-color: var(--bsi-color-border-primary-active);
1375
+ --bsi-btn-text-color: var(--bsi-color-link-active);
1309
1376
  }
1310
1377
  .btn-outline-secondary,
1311
1378
  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);
1379
+ --bsi-btn-outline-border-color: var(--bsi-color-border-secondary);
1380
+ --bsi-btn-text-color: var(--bsi-color-text-secondary);
1314
1381
  }
1315
1382
  .btn-outline-secondary:hover,
1316
1383
  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);
1384
+ --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-hover);
1385
+ --bsi-btn-text-color: var(--bsi-color-link-secondary-hover);
1319
1386
  }
1320
1387
  .btn-outline-secondary:active,
1321
1388
  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);
1389
+ --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-active);
1390
+ --bsi-btn-text-color: var(--bsi-color-link-secondary-active);
1324
1391
  }
1325
1392
  .btn-outline-success,
1326
1393
  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);
1394
+ --bsi-btn-outline-border-color: var(--bsi-color-border-success);
1395
+ --bsi-btn-text-color: var(--bsi-color-text-success);
1329
1396
  }
1330
1397
  .btn-outline-success:hover,
1331
1398
  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);
1399
+ /* aumenta contrasto scurendo il bordo rispetto al token base */
1400
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-success-hover) 70%, black);
1401
+ --bsi-btn-text-color: var(--bsi-color-text-success-hover);
1334
1402
  }
1335
1403
  .btn-outline-success:active,
1336
1404
  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);
1405
+ --bsi-btn-outline-border-color: var(--bsi-color-border-success-active);
1406
+ --bsi-btn-text-color: var(--bsi-color-text-success-active);
1339
1407
  }
1340
1408
  .btn-outline-warning,
1341
1409
  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);
1410
+ --bsi-btn-outline-border-color: var(--bsi-color-border-warning);
1411
+ --bsi-btn-text-color: var(--bsi-color-text-warning);
1344
1412
  }
1345
1413
  .btn-outline-warning:hover,
1346
1414
  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);
1415
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-warning-hover) 70%, black);
1416
+ --bsi-btn-text-color: var(--bsi-color-text-warning-hover);
1349
1417
  }
1350
1418
  .btn-outline-warning:active,
1351
1419
  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);
1420
+ --bsi-btn-outline-border-color: var(--bsi-color-border-warning-active);
1421
+ --bsi-btn-text-color: var(--bsi-color-text-warning-active);
1354
1422
  }
1355
1423
  .btn-outline-danger,
1356
1424
  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);
1425
+ --bsi-btn-outline-border-color: var(--bsi-color-border-danger);
1426
+ --bsi-btn-text-color: var(--bsi-color-text-danger);
1359
1427
  }
1360
1428
  .btn-outline-danger:hover,
1361
1429
  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);
1430
+ --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-danger-hover) 70%, black);
1431
+ --bsi-btn-text-color: var(--bsi-color-text-danger-hover);
1364
1432
  }
1365
1433
  .btn-outline-danger:active,
1366
1434
  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);
1435
+ --bsi-btn-outline-border-color: var(--bsi-color-border-danger-active);
1436
+ --bsi-btn-text-color: var(--bsi-color-text-danger-active);
1369
1437
  }
1370
1438
 
1371
1439
  .bg-dark .btn-link {
1372
- --bs-btn-text-color: var(--bs-color-text-inverse);
1440
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1373
1441
  }
1374
1442
  .bg-dark a.btn-primary,
1375
1443
  .bg-dark .btn-primary {
1376
- --bs-btn-text-color: var(--bs-color-text-primary);
1377
- --bs-btn-background: var(--bs-color-background-inverse);
1444
+ --bsi-btn-text-color: var(--bsi-color-text-primary);
1445
+ --bsi-btn-background: var(--bsi-color-background-inverse);
1378
1446
  }
1379
1447
  .bg-dark a.btn-primary:hover,
1380
1448
  .bg-dark .btn-primary:hover {
1381
- --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 85%, black);
1449
+ --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 85%, black);
1382
1450
  }
1383
1451
  .bg-dark a.btn-primary:active,
1384
1452
  .bg-dark .btn-primary:active {
1385
- --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 80%, black);
1453
+ --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 80%, black);
1386
1454
  }
1387
1455
  .bg-dark a.btn-secondary,
1388
1456
  .bg-dark .btn-secondary {
1389
- --bs-btn-text-color: var(--bs-color-text-inverse);
1390
- --bs-btn-background: var(--bs-color-background-secondary);
1457
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1458
+ --bsi-btn-background: var(--bsi-color-background-secondary);
1391
1459
  }
1392
1460
  .bg-dark a.btn-secondary:hover, .bg-dark a.btn-secondary:active,
1393
1461
  .bg-dark .btn-secondary:hover,
1394
1462
  .bg-dark .btn-secondary:active {
1395
- --bs-btn-background: color-mix(in srgb, var(--bs-color-background-secondary) 85%, black);
1463
+ --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-secondary) 85%, black);
1396
1464
  }
1397
1465
  .bg-dark .btn-outline-primary,
1398
1466
  .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);
1467
+ --bsi-btn-outline-border-color: var(--bsi-color-border-inverse);
1468
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1401
1469
  }
1402
1470
  .bg-dark .btn-outline-primary:hover,
1403
1471
  .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);
1472
+ --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-border-inverse) 80%, black);
1473
+ --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
1474
+ --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
1407
1475
  }
1408
1476
  .bg-dark .btn-outline-secondary,
1409
1477
  .bg-dark a.btn-outline-secondary {
1410
- --bs-btn-text-color: var(--bs-color-text-inverse);
1478
+ --bsi-btn-text-color: var(--bsi-color-text-inverse);
1411
1479
  }
1412
1480
  .bg-dark .btn-outline-secondary:hover, .bg-dark .btn-outline-secondary:active,
1413
1481
  .bg-dark a.btn-outline-secondary:hover,
1414
1482
  .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);
1483
+ --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-background-secondary) 80%, black);
1484
+ --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
1485
+ --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
1418
1486
  }
1419
1487
 
1420
1488
  .btn-close {
@@ -1424,25 +1492,24 @@ a.btn-outline-danger:active {
1424
1492
  height: 2.5rem;
1425
1493
  padding: 0;
1426
1494
  border: 0;
1427
- opacity: 0.5;
1428
1495
  background-color: transparent;
1429
- color: var(--bs-color-text-base);
1430
1496
  }
1431
1497
  .btn-close .icon {
1432
1498
  position: absolute;
1433
1499
  top: 50%;
1434
1500
  left: 50%;
1435
1501
  transform: translate(-50%, -50%);
1502
+ fill: var(--bsi-icon-secondary);
1436
1503
  }
1437
- .btn-close:hover {
1438
- opacity: 1;
1504
+ .btn-close .icon:hover {
1505
+ fill: var(--bsi-icon-default);
1439
1506
  text-decoration: none;
1440
1507
  }
1441
1508
  .btn-close:focus {
1442
1509
  opacity: 1;
1443
1510
  }
1444
1511
  .btn-close:disabled, .btn-close.disabled {
1445
- opacity: var(--bs-btn-disabled-opacity);
1512
+ opacity: var(--bsi-btn-disabled-opacity);
1446
1513
  pointer-events: none;
1447
1514
  user-select: none;
1448
1515
  }
@@ -1451,7 +1518,8 @@ a.btn-outline-danger:active {
1451
1518
  filter: invert(1) grayscale(100%) brightness(200%);
1452
1519
  }`;
1453
1520
 
1454
- let ItButton = class ItButton extends BaseComponent {
1521
+ var ItButton_1;
1522
+ let ItButton = ItButton_1 = class ItButton extends BaseComponent {
1455
1523
  constructor() {
1456
1524
  super(...arguments);
1457
1525
  this.type = 'button';
@@ -1459,15 +1527,31 @@ let ItButton = class ItButton extends BaseComponent {
1459
1527
  this.size = '';
1460
1528
  this.outline = false;
1461
1529
  this.block = false;
1462
- this.icon = false;
1463
1530
  this.value = '';
1531
+ this.itInert = false;
1464
1532
  this.internals = this.attachInternals();
1533
+ this._hasIcon = false;
1534
+ this._hasProgress = false;
1465
1535
  this._onKeyDown = (e) => {
1466
1536
  if (e.key === 'Enter' || e.key === ' ') {
1467
1537
  e.preventDefault();
1468
- this._nativeButton?.click();
1538
+ if (!this.disabled) {
1539
+ this._nativeButton?.click();
1540
+ }
1541
+ else {
1542
+ e.stopPropagation();
1543
+ }
1469
1544
  }
1470
1545
  };
1546
+ this._updateSlottedStates = (elements) => {
1547
+ this._hasIcon = ItButton_1.hasMatchingElement(elements, 'it-icon');
1548
+ this._hasProgress = ItButton_1.hasMatchingElement(elements, 'it-progress');
1549
+ };
1550
+ this._onSlotChange = (event) => {
1551
+ const slot = event.target;
1552
+ const assignedElements = slot.assignedElements({ flatten: true });
1553
+ this._updateSlottedStates(assignedElements);
1554
+ };
1471
1555
  }
1472
1556
  static get formAssociated() {
1473
1557
  return true;
@@ -1507,6 +1591,20 @@ let ItButton = class ItButton extends BaseComponent {
1507
1591
  focus() {
1508
1592
  this._nativeButton?.focus();
1509
1593
  }
1594
+ setDescribedBy(element) {
1595
+ const btn = this.shadowRoot?.querySelector('button');
1596
+ if (!btn)
1597
+ return;
1598
+ if ('ariaDescribedByElements' in Element.prototype) {
1599
+ btn.ariaDescribedByElements = element ? [element] : null;
1600
+ }
1601
+ else if (element?.id) {
1602
+ btn?.setAttribute('aria-describedby', element.id);
1603
+ }
1604
+ else {
1605
+ btn?.removeAttribute('aria-describedby');
1606
+ }
1607
+ }
1510
1608
  connectedCallback() {
1511
1609
  super.connectedCallback?.();
1512
1610
  if (this.block) {
@@ -1518,6 +1616,13 @@ let ItButton = class ItButton extends BaseComponent {
1518
1616
  this.removeEventListener('keydown', this._onKeyDown);
1519
1617
  super.disconnectedCallback?.();
1520
1618
  }
1619
+ static hasMatchingElement(elements, selector) {
1620
+ return elements.some((element) => element.matches(selector) || element.querySelector(selector) !== null);
1621
+ }
1622
+ firstUpdated(changedProperties) {
1623
+ super.firstUpdated?.(changedProperties);
1624
+ this._updateSlottedStates(Array.from(this.children));
1625
+ }
1521
1626
  // Render the UI as a function of component state
1522
1627
  render() {
1523
1628
  const classes = this.composeClass('btn', this.className, {
@@ -1525,7 +1630,8 @@ let ItButton = class ItButton extends BaseComponent {
1525
1630
  [`btn-outline-${this.variant}`]: !!this.variant && this.outline,
1526
1631
  [`btn-${this.size}`]: !!this.size,
1527
1632
  disabled: this.disabled,
1528
- 'btn-icon': this.icon,
1633
+ 'btn-icon': this._hasIcon,
1634
+ 'btn-progress': this._hasProgress,
1529
1635
  'd-block w-100': this.block,
1530
1636
  });
1531
1637
  const part = this.composeClass('button', 'focusable', {
@@ -1540,11 +1646,12 @@ let ItButton = class ItButton extends BaseComponent {
1540
1646
  class="${classes}"
1541
1647
  @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
1542
1648
  .value="${ifDefined(this.value ? this.value : undefined)}"
1649
+ aria-disabled="${ifDefined(this.disabled ? this.disabled : undefined)}"
1543
1650
  ${setAttributes(this._ariaAttributes)}
1544
1651
  aria-expanded="${ifDefined(this.expanded !== undefined ? this.expanded : undefined)}"
1545
- aria-disabled="${ifDefined(this.disabled ? this.disabled : undefined)}"
1652
+ ?inert="${this.itInert}"
1546
1653
  >
1547
- <slot></slot>
1654
+ <slot @slotchange="${this._onSlotChange}"></slot>
1548
1655
  </button>
1549
1656
  `;
1550
1657
  }
@@ -1574,27 +1681,35 @@ __decorate([
1574
1681
  property({ type: Boolean, reflect: true }),
1575
1682
  __metadata("design:type", Object)
1576
1683
  ], ItButton.prototype, "block", void 0);
1577
- __decorate([
1578
- property({ type: Boolean, reflect: true }),
1579
- __metadata("design:type", Object)
1580
- ], ItButton.prototype, "icon", void 0);
1581
1684
  __decorate([
1582
1685
  property({ type: String }),
1583
1686
  __metadata("design:type", Object)
1584
1687
  ], ItButton.prototype, "value", void 0);
1688
+ __decorate([
1689
+ property({ type: Boolean, reflect: true, attribute: 'it-inert' }),
1690
+ __metadata("design:type", Object)
1691
+ ], ItButton.prototype, "itInert", void 0);
1585
1692
  __decorate([
1586
1693
  property(),
1587
1694
  __metadata("design:type", Object)
1588
1695
  ], ItButton.prototype, "internals", void 0);
1589
1696
  __decorate([
1590
- property({ type: Boolean, reflect: true, attribute: 'it-aria-disabled' }),
1697
+ property({ type: Boolean, reflect: true }),
1591
1698
  __metadata("design:type", Boolean)
1592
1699
  ], ItButton.prototype, "disabled", void 0);
1593
1700
  __decorate([
1594
1701
  property({ type: Boolean, reflect: true, attribute: 'it-aria-expanded' }),
1595
1702
  __metadata("design:type", Boolean)
1596
1703
  ], ItButton.prototype, "expanded", void 0);
1597
- ItButton = __decorate([
1704
+ __decorate([
1705
+ state(),
1706
+ __metadata("design:type", Object)
1707
+ ], ItButton.prototype, "_hasIcon", void 0);
1708
+ __decorate([
1709
+ state(),
1710
+ __metadata("design:type", Object)
1711
+ ], ItButton.prototype, "_hasProgress", void 0);
1712
+ ItButton = ItButton_1 = __decorate([
1598
1713
  customElement('it-button')
1599
1714
  ], ItButton);
1600
1715