@descope/web-components-ui 1.0.83 → 1.0.85

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 (37) hide show
  1. package/dist/index.esm.js +417 -313
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/18.js +577 -0
  4. package/dist/umd/{233.js.LICENSE.txt → 18.js.LICENSE.txt} +6 -0
  5. package/dist/umd/803.js +1 -0
  6. package/dist/umd/988.js +1 -1
  7. package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +1 -0
  8. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -0
  9. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -0
  10. package/dist/umd/descope-combo-box-index-js.js +1 -1
  11. package/dist/umd/descope-container-index-js.js +1 -1
  12. package/dist/umd/index.js +1 -1
  13. package/package.json +1 -1
  14. package/src/components/boolean-fields/booleanFieldMixin.js +38 -0
  15. package/src/components/boolean-fields/commonStyles.js +59 -0
  16. package/src/components/{descope-checkbox/descope-checkbox-internal/CheckboxInternal.js → boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js} +3 -3
  17. package/src/components/boolean-fields/descope-boolean-field-internal/index.js +3 -0
  18. package/src/components/{descope-checkbox → boolean-fields/descope-checkbox}/Checkbox.js +7 -95
  19. package/src/components/{descope-checkbox → boolean-fields/descope-checkbox}/index.js +3 -1
  20. package/src/components/boolean-fields/descope-switch-toggle/SwitchToggle.js +124 -0
  21. package/src/components/boolean-fields/descope-switch-toggle/index.js +8 -0
  22. package/src/components/descope-container/Container.js +2 -1
  23. package/src/index.js +2 -2
  24. package/src/index.umd.js +5 -0
  25. package/src/mixins/proxyInputMixin.js +2 -2
  26. package/src/theme/components/checkbox.js +3 -6
  27. package/src/theme/components/container.js +1 -0
  28. package/src/theme/components/switchToggle.js +71 -4
  29. package/dist/umd/233.js +0 -577
  30. package/dist/umd/786.js +0 -2
  31. package/dist/umd/786.js.LICENSE.txt +0 -17
  32. package/dist/umd/descope-checkbox-descope-checkbox-internal-index-js.js +0 -1
  33. package/dist/umd/descope-checkbox-index-js.js +0 -1
  34. package/dist/umd/descope-switch-toggle-index-js.js +0 -1
  35. package/src/components/descope-checkbox/descope-checkbox-internal/index.js +0 -3
  36. package/src/components/descope-switch-toggle/SwitchToggle.js +0 -89
  37. package/src/components/descope-switch-toggle/index.js +0 -6
package/dist/index.esm.js CHANGED
@@ -777,8 +777,8 @@ const proxyInputMixin = (superclass) =>
777
777
  }
778
778
 
779
779
  get inputElement() {
780
- const inputSlot = this.baseElement.shadowRoot.querySelector('slot[name="input"]');
781
- const textAreaSlot = this.baseElement.shadowRoot.querySelector('slot[name="textarea"]');
780
+ const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
781
+ const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
782
782
 
783
783
  this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
784
784
 
@@ -1051,7 +1051,7 @@ const iconStyles = `
1051
1051
  }
1052
1052
  `;
1053
1053
 
1054
- const { label: label$4, host: host$8 } = {
1054
+ const { label: label$5, host: host$9 } = {
1055
1055
  label: { selector: '::part(label)' },
1056
1056
  host: { selector: () => ':host' }
1057
1057
  };
@@ -1061,16 +1061,16 @@ const Button = compose(
1061
1061
  mappings: {
1062
1062
  backgroundColor: {},
1063
1063
  borderRadius: {},
1064
- color: label$4,
1064
+ color: label$5,
1065
1065
  borderColor: {},
1066
1066
  borderStyle: {},
1067
1067
  borderWidth: {},
1068
1068
  fontSize: {},
1069
1069
  height: {},
1070
- width: host$8,
1070
+ width: host$9,
1071
1071
  cursor: {},
1072
- padding: label$4,
1073
- textDecoration: label$4
1072
+ padding: label$5,
1073
+ textDecoration: label$5
1074
1074
  }
1075
1075
  }),
1076
1076
  draggableMixin,
@@ -1129,7 +1129,7 @@ const createBaseInputClass = (...args) => compose(
1129
1129
  inputEventsDispatchingMixin
1130
1130
  )(createBaseClass(...args));
1131
1131
 
1132
- const componentName$n = getComponentName('checkbox-internal');
1132
+ const componentName$n = getComponentName('boolean-field-internal');
1133
1133
 
1134
1134
  const forwardAttributes$1 = [
1135
1135
  'disabled',
@@ -1140,7 +1140,7 @@ const forwardAttributes$1 = [
1140
1140
 
1141
1141
  const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
1142
1142
 
1143
- class CheckboxInternal extends BaseInputClass$3 {
1143
+ class BooleanInputInternal extends BaseInputClass$3 {
1144
1144
  constructor() {
1145
1145
  super();
1146
1146
  this.innerHTML = `
@@ -1191,52 +1191,112 @@ class CheckboxInternal extends BaseInputClass$3 {
1191
1191
  };
1192
1192
  }
1193
1193
 
1194
- const componentName$m = getComponentName('checkbox');
1194
+ const booleanFieldMixin = (superclass) =>
1195
+ class BooleanFieldMixinClass extends superclass {
1196
+ constructor() {
1197
+ super();
1198
+ }
1195
1199
 
1196
- const customMixin$4 = (superclass) =>
1197
- class CheckboxMixinClass extends superclass {
1198
- constructor() {
1199
- super();
1200
- }
1200
+ init() {
1201
+ super.init?.();
1201
1202
 
1202
- init() {
1203
- super.init?.();
1204
-
1205
- const template = document.createElement('template');
1206
- template.innerHTML = `
1203
+ const template = document.createElement('template');
1204
+ template.innerHTML = `
1207
1205
  <${componentName$n}
1208
1206
  tabindex="-1"
1209
1207
  slot="input"
1210
1208
  ></${componentName$n}>
1211
1209
  `;
1212
1210
 
1213
- this.baseElement.appendChild(template.content.cloneNode(true));
1214
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
1215
- this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1211
+ this.baseElement.appendChild(template.content.cloneNode(true));
1212
+ this.inputElement = this.shadowRoot.querySelector(componentName$n);
1213
+ this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1214
+
1215
+ forwardAttrs(this, this.inputElement, {
1216
+ includeAttrs: [
1217
+ 'required',
1218
+ 'full-width',
1219
+ 'size',
1220
+ 'label',
1221
+ 'invalid',
1222
+ ]
1223
+ });
1224
+
1225
+ forwardProps(this.inputElement, this, ['checked']);
1226
+ syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
1227
+ }
1228
+ };
1216
1229
 
1217
- forwardAttrs(this, this.inputElement, {
1218
- includeAttrs: [
1219
- 'required',
1220
- 'full-width',
1221
- 'size',
1222
- 'label',
1223
- 'invalid',
1224
- ]
1225
- });
1230
+ var commonStyles = `
1231
+ :host {
1232
+ --vaadin-field-default-width: auto;
1233
+ display: inline-flex;
1234
+ }
1235
+ .wrapper {
1236
+ display: flex;
1237
+ }
1226
1238
 
1227
- forwardProps(this.inputElement, this, ['checked']);
1228
- syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
1229
- }
1230
- };
1239
+ vaadin-text-field {
1240
+ position: relative;
1241
+ padding: 0;
1242
+ display: inline-flex;
1243
+ align-items: flex-start;
1244
+ }
1245
+ vaadin-text-field::before {
1246
+ height: 0;
1247
+ margin: 0;
1248
+ }
1249
+ vaadin-text-field::part(label) {
1250
+ position: absolute;
1251
+ top: 0;
1252
+ }
1253
+ vaadin-text-field::part(input-field) {
1254
+ padding: 0;
1255
+ background: none;
1256
+ min-height: 0;
1257
+ }
1258
+ vaadin-text-field::part(input-field)::after {
1259
+ background: none;
1260
+ }
1261
+ vaadin-text-field[focus-ring]::part(input-field) {
1262
+ box-shadow: none;
1263
+ }
1264
+ vaadin-text-field[required]::part(required-indicator)::after {
1265
+ content: "*";
1266
+ }
1267
+
1268
+ vaadin-checkbox [slot="label"] {
1269
+ align-self: flex-start;
1270
+ opacity: 0;
1271
+ padding: 0;
1272
+ }
1273
+ [required] vaadin-checkbox [slot="label"] {
1274
+ padding-right: 1em;
1275
+ }
1276
+ vaadin-checkbox::part(checkbox) {
1277
+ margin: 0;
1278
+ }
1279
+ vaadin-checkbox[focus-ring]::part(checkbox) {
1280
+ box-shadow: none;
1281
+ }
1282
+
1283
+ descope-boolean-field-internal {
1284
+ -webkit-mask-image: none;
1285
+ min-height: 0;
1286
+ padding: 0;
1287
+ }
1288
+ `;
1289
+
1290
+ const componentName$m = getComponentName('checkbox');
1231
1291
 
1232
1292
  const {
1233
- host: host$7,
1234
- component,
1293
+ host: host$8,
1294
+ component: component$1,
1235
1295
  checkboxElement,
1236
1296
  checkboxSurface,
1237
- checkboxHiddenLabel,
1238
- label: label$3,
1239
- requiredIndicator: requiredIndicator$3
1297
+ checkboxHiddenLabel: checkboxHiddenLabel$1,
1298
+ label: label$4,
1299
+ requiredIndicator: requiredIndicator$4
1240
1300
  } = {
1241
1301
  host: { selector: () => ':host' },
1242
1302
  label: { selector: '::part(label)' },
@@ -1250,15 +1310,15 @@ const {
1250
1310
  const Checkbox = compose(
1251
1311
  createStyleMixin({
1252
1312
  mappings: {
1253
- width: host$7,
1254
- cursor: component,
1313
+ width: host$8,
1314
+ cursor: component$1,
1255
1315
 
1256
1316
  // Checkbox
1257
1317
  checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
1258
1318
  checkboxRadius: { ...checkboxElement, property: 'border-radius' },
1259
1319
  checkboxWidth: [
1260
1320
  { ...checkboxElement, property: 'width' },
1261
- { ...label$3, property: 'margin-left' }
1321
+ { ...label$4, property: 'margin-left' }
1262
1322
  ],
1263
1323
  checkboxHeight: { ...checkboxElement, property: 'height' },
1264
1324
 
@@ -1268,13 +1328,121 @@ const Checkbox = compose(
1268
1328
  checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
1269
1329
 
1270
1330
  // Checkmark
1271
- checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
1331
+ checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component$1, property: 'font-size' }],
1272
1332
  checkmarkTextColor: { ...checkboxSurface, property: 'color' },
1273
1333
 
1274
1334
  // Label
1275
1335
  labelFontSize: [
1276
- { ...label$3, property: 'font-size' },
1277
- { ...checkboxHiddenLabel, property: 'font-size' }
1336
+ { ...label$4, property: 'font-size' },
1337
+ { ...checkboxHiddenLabel$1, property: 'font-size' }
1338
+ ],
1339
+ labelLineHeight: [
1340
+ { ...label$4, property: 'line-height' },
1341
+ { ...checkboxHiddenLabel$1, property: 'line-height' }
1342
+ ],
1343
+ labelFontWeight: [
1344
+ { ...label$4, property: 'font-weight' },
1345
+ { ...checkboxHiddenLabel$1, property: 'font-weight' }
1346
+ ],
1347
+ labelMargin: [
1348
+ { ...label$4, property: 'left' },
1349
+ { ...checkboxHiddenLabel$1, property: 'padding-left' }
1350
+ ],
1351
+ labelTextColor: [
1352
+ { ...label$4, property: 'color' },
1353
+ { ...requiredIndicator$4, property: 'color' },
1354
+ ],
1355
+ },
1356
+ }),
1357
+ draggableMixin,
1358
+ proxyInputMixin,
1359
+ componentNameValidationMixin,
1360
+ booleanFieldMixin
1361
+ )(
1362
+ createProxy({
1363
+ slots: [],
1364
+ wrappedEleName: 'vaadin-text-field',
1365
+ style: `
1366
+ ${commonStyles}
1367
+
1368
+ vaadin-checkbox [slot="label"] {
1369
+ height: 100%;
1370
+ cursor: pointer;
1371
+ }
1372
+ `,
1373
+ excludeAttrsSync: ['tabindex'],
1374
+ componentName: componentName$m
1375
+ })
1376
+ );
1377
+
1378
+ customElements.define(componentName$n, BooleanInputInternal);
1379
+
1380
+ customElements.define(componentName$m, Checkbox);
1381
+
1382
+ const componentName$l = getComponentName('switch-toggle');
1383
+
1384
+ const {
1385
+ host: host$7,
1386
+ component,
1387
+ checkboxElement: track,
1388
+ checkboxSurface: knob,
1389
+ checkboxHiddenLabel,
1390
+ label: label$3,
1391
+ requiredIndicator: requiredIndicator$3,
1392
+ } = {
1393
+ host: { selector: () => ':host' },
1394
+ label: { selector: '::part(label)' },
1395
+ requiredIndicator: { selector: '::part(required-indicator)::after' },
1396
+ component: { selector: 'vaadin-checkbox' },
1397
+ checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
1398
+ checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
1399
+ checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
1400
+ };
1401
+
1402
+ const SwitchToggle = compose(
1403
+ createStyleMixin({
1404
+ mappings: {
1405
+ width: host$7,
1406
+ cursor: [component, checkboxHiddenLabel, track],
1407
+ fontSize: [component, label$3, checkboxHiddenLabel],
1408
+
1409
+ // Track
1410
+ trackBorderWidth: { ...track, property: 'border-width' },
1411
+ trackBorderStyle: { ...track, property: 'border-style' },
1412
+ trackBorderColor: { ...track, property: 'border-color' },
1413
+
1414
+ // Checkbox
1415
+ trackBackgroundColor: { ...track, property: 'background-color' },
1416
+ trackRadius: { ...track, property: 'border-radius' },
1417
+
1418
+ trackWidth: [
1419
+ { ...track, property: 'width' },
1420
+ ],
1421
+ trackHeight: [
1422
+ { ...knob, property: 'font-size' },
1423
+ { ...track, property: 'height' }
1424
+ ],
1425
+ switchOutlineWidth: { ...track, property: 'outline-width' },
1426
+ switchOutlineOffset: { ...track, property: 'outline-offset' },
1427
+ switchOutlineColor: { ...track, property: 'outline-color' },
1428
+ switchOutlineStyle: { ...track, property: 'outline-style' },
1429
+
1430
+ // Knob
1431
+ knobSize: [
1432
+ { ...knob, property: 'width' },
1433
+ { ...knob, property: 'height' },
1434
+ ],
1435
+ knobTextColor: { ...knob, property: 'color' },
1436
+ knobRadius: { ...knob, property: 'border-radius' },
1437
+ knobTransition: { ...knob, property: 'transition' },
1438
+ knobColor: { ...knob, property: 'background-color' },
1439
+ knobTopOffset: { ...knob, property: 'top' },
1440
+ knobPosition: { ...knob, property: 'left' },
1441
+
1442
+ // Label
1443
+ labelMargin: [
1444
+ { ...label$3, property: 'padding-left' },
1445
+ { ...checkboxHiddenLabel, property: 'padding-left' }
1278
1446
  ],
1279
1447
  labelLineHeight: [
1280
1448
  { ...label$3, property: 'line-height' },
@@ -1284,10 +1452,6 @@ const Checkbox = compose(
1284
1452
  { ...label$3, property: 'font-weight' },
1285
1453
  { ...checkboxHiddenLabel, property: 'font-weight' }
1286
1454
  ],
1287
- labelMargin: [
1288
- { ...label$3, property: 'left' },
1289
- { ...checkboxHiddenLabel, property: 'padding-left' }
1290
- ],
1291
1455
  labelTextColor: [
1292
1456
  { ...label$3, property: 'color' },
1293
1457
  { ...requiredIndicator$3, property: 'color' },
@@ -1297,86 +1461,42 @@ const Checkbox = compose(
1297
1461
  draggableMixin,
1298
1462
  proxyInputMixin,
1299
1463
  componentNameValidationMixin,
1300
- customMixin$4
1464
+ booleanFieldMixin
1301
1465
  )(
1302
1466
  createProxy({
1303
1467
  slots: [],
1304
1468
  wrappedEleName: 'vaadin-text-field',
1305
- style: `
1306
- :host {
1307
- --vaadin-field-default-width: auto;
1308
- display: inline-flex;
1309
- }
1310
- .wrapper {
1311
- display: flex;
1312
- }
1469
+ style: () => `
1470
+ ${commonStyles}
1313
1471
 
1314
- vaadin-text-field {
1315
- position: relative;
1316
- padding: 0;
1317
- display: inline-flex;
1318
- align-items: flex-start;
1319
- }
1320
- vaadin-text-field[focus-ring]::part(input-field) {
1321
- box-shadow: none;
1322
- }
1323
- vaadin-text-field::before {
1324
- height: auto;
1325
- margin: 0;
1326
- }
1327
- vaadin-text-field::part(input-field) {
1328
- padding: 0;
1329
- background: none;
1330
- min-height: 0;
1331
- }
1332
- vaadin-text-field::part(input-field)::after {
1333
- background: none;
1334
- }
1335
1472
  vaadin-text-field::part(label) {
1336
- position: absolute;
1337
- top: 0;
1338
- }
1339
- vaadin-text-field[required]::part(required-indicator)::after {
1340
- content: "*";
1473
+ left: calc(var(${SwitchToggle.cssVarList.trackWidth}) + var(${SwitchToggle.cssVarList.trackBorderWidth}) * 2);
1341
1474
  }
1342
1475
 
1343
- vaadin-checkbox [slot="label"] {
1344
- opacity: 0;
1345
- height: 100%;
1346
- align-self: flex-start;
1347
- padding: 0;
1348
- cursor: pointer;
1476
+ vaadin-checkbox[active]::part(checkbox) {
1477
+ transform: none;
1349
1478
  }
1350
- [required] vaadin-checkbox [slot="label"] {
1351
- padding-right: 1em;
1352
- }
1353
- vaadin-checkbox::part(checkbox) {
1354
- margin: 0;
1355
- }
1356
- vaadin-checkbox[focus-ring]::part(checkbox) {
1357
- box-shadow: none;
1479
+ vaadin-checkbox[checked]::part(checkbox) {
1480
+ background: none;
1358
1481
  }
1359
-
1360
- descope-checkbox-internal {
1361
- -webkit-mask-image: none;
1362
- min-height: 0;
1363
- padding: 0;
1482
+ vaadin-checkbox::part(checkbox)::after {
1483
+ position: absolute;
1484
+ opacity: 1;
1485
+ content: '';
1364
1486
  }
1365
1487
  `,
1366
1488
  excludeAttrsSync: ['tabindex'],
1367
- componentName: componentName$m
1489
+ componentName: componentName$l
1368
1490
  })
1369
1491
  );
1370
1492
 
1371
- customElements.define(componentName$n, CheckboxInternal);
1372
-
1373
- customElements.define(componentName$m, Checkbox);
1493
+ customElements.define(componentName$l, SwitchToggle);
1374
1494
 
1375
- const componentName$l = getComponentName('loader-linear');
1495
+ const componentName$k = getComponentName('loader-linear');
1376
1496
 
1377
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
1497
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
1378
1498
  static get componentName() {
1379
- return componentName$l;
1499
+ return componentName$k;
1380
1500
  }
1381
1501
  constructor() {
1382
1502
  super();
@@ -1434,11 +1554,11 @@ const LoaderLinear = compose(
1434
1554
  componentNameValidationMixin
1435
1555
  )(RawLoaderLinear);
1436
1556
 
1437
- customElements.define(componentName$l, LoaderLinear);
1557
+ customElements.define(componentName$k, LoaderLinear);
1438
1558
 
1439
- const componentName$k = getComponentName('loader-radial');
1559
+ const componentName$j = getComponentName('loader-radial');
1440
1560
 
1441
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
1561
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
1442
1562
  constructor() {
1443
1563
  super();
1444
1564
 
@@ -1484,11 +1604,11 @@ const LoaderRadial = compose(
1484
1604
  componentNameValidationMixin
1485
1605
  )(RawLoaderRadial);
1486
1606
 
1487
- customElements.define(componentName$k, LoaderRadial);
1607
+ customElements.define(componentName$j, LoaderRadial);
1488
1608
 
1489
- const componentName$j = getComponentName('container');
1609
+ const componentName$i = getComponentName('container');
1490
1610
 
1491
- class RawContainer extends createBaseClass({componentName: componentName$j, baseSelector: ':host > slot'}) {
1611
+ class RawContainer extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
1492
1612
  constructor() {
1493
1613
  super();
1494
1614
 
@@ -1529,6 +1649,7 @@ const Container = compose(
1529
1649
  justifyContent: {},
1530
1650
  alignItems: {},
1531
1651
  gap: {},
1652
+ flexWrap: {},
1532
1653
 
1533
1654
  backgroundColor: {},
1534
1655
  borderRadius: {},
@@ -1544,26 +1665,26 @@ const Container = compose(
1544
1665
  componentNameValidationMixin
1545
1666
  )(RawContainer);
1546
1667
 
1547
- customElements.define(componentName$j, Container);
1668
+ customElements.define(componentName$i, Container);
1548
1669
 
1549
- const componentName$i = getComponentName('date-picker');
1670
+ const componentName$h = getComponentName('date-picker');
1550
1671
 
1551
1672
  const DatePicker = compose(
1552
1673
  draggableMixin,
1553
1674
  componentNameValidationMixin
1554
1675
  )(
1555
1676
  createProxy({
1556
- componentName: componentName$i,
1677
+ componentName: componentName$h,
1557
1678
  slots: ['prefix', 'suffix'],
1558
1679
  wrappedEleName: 'vaadin-date-picker',
1559
1680
  style: ``
1560
1681
  })
1561
1682
  );
1562
1683
 
1563
- customElements.define(componentName$i, DatePicker);
1684
+ customElements.define(componentName$h, DatePicker);
1564
1685
 
1565
- const componentName$h = getComponentName('divider');
1566
- class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
1686
+ const componentName$g = getComponentName('divider');
1687
+ class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
1567
1688
  constructor() {
1568
1689
  super();
1569
1690
 
@@ -1641,9 +1762,9 @@ const Divider = compose(
1641
1762
  componentNameValidationMixin
1642
1763
  )(RawDivider);
1643
1764
 
1644
- const componentName$g = getComponentName('text');
1765
+ const componentName$f = getComponentName('text');
1645
1766
 
1646
- class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
1767
+ class RawText extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > slot' }) {
1647
1768
  constructor() {
1648
1769
  super();
1649
1770
 
@@ -1685,9 +1806,9 @@ const Text = compose(
1685
1806
  componentNameValidationMixin
1686
1807
  )(RawText);
1687
1808
 
1688
- customElements.define(componentName$g, Text);
1809
+ customElements.define(componentName$f, Text);
1689
1810
 
1690
- customElements.define(componentName$h, Divider);
1811
+ customElements.define(componentName$g, Divider);
1691
1812
 
1692
1813
  const selectors$2 = {
1693
1814
  label: '::part(label)',
@@ -1732,9 +1853,9 @@ var textFieldMappings = {
1732
1853
  placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
1733
1854
  };
1734
1855
 
1735
- const componentName$f = getComponentName('email-field');
1856
+ const componentName$e = getComponentName('email-field');
1736
1857
 
1737
- let overrides$6 = ``;
1858
+ let overrides$5 = ``;
1738
1859
 
1739
1860
  const EmailField = compose(
1740
1861
  createStyleMixin({
@@ -1749,13 +1870,13 @@ const EmailField = compose(
1749
1870
  createProxy({
1750
1871
  slots: ['suffix'],
1751
1872
  wrappedEleName: 'vaadin-email-field',
1752
- style: () => overrides$6,
1873
+ style: () => overrides$5,
1753
1874
  excludeAttrsSync: ['tabindex'],
1754
- componentName: componentName$f
1875
+ componentName: componentName$e
1755
1876
  })
1756
1877
  );
1757
1878
 
1758
- overrides$6 = `
1879
+ overrides$5 = `
1759
1880
  :host {
1760
1881
  display: inline-block;
1761
1882
  }
@@ -1795,10 +1916,10 @@ overrides$6 = `
1795
1916
  }
1796
1917
  `;
1797
1918
 
1798
- customElements.define(componentName$f, EmailField);
1919
+ customElements.define(componentName$e, EmailField);
1799
1920
 
1800
- const componentName$e = getComponentName('link');
1801
- class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
1921
+ const componentName$d = getComponentName('link');
1922
+ class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
1802
1923
  constructor() {
1803
1924
  super();
1804
1925
  document.createElement('template');
@@ -1859,14 +1980,14 @@ const Link = compose(
1859
1980
  componentNameValidationMixin
1860
1981
  )(RawLink);
1861
1982
 
1862
- customElements.define(componentName$e, Link);
1983
+ customElements.define(componentName$d, Link);
1863
1984
 
1864
- const componentName$d = getComponentName('logo');
1985
+ const componentName$c = getComponentName('logo');
1865
1986
 
1866
1987
  let style;
1867
1988
  const getStyle = () => style;
1868
1989
 
1869
- class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
1990
+ class RawLogo extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
1870
1991
  constructor() {
1871
1992
  super();
1872
1993
 
@@ -1904,11 +2025,11 @@ style = `
1904
2025
  }
1905
2026
  `;
1906
2027
 
1907
- customElements.define(componentName$d, Logo);
2028
+ customElements.define(componentName$c, Logo);
1908
2029
 
1909
- const componentName$c = getComponentName('number-field');
2030
+ const componentName$b = getComponentName('number-field');
1910
2031
 
1911
- let overrides$5 = ``;
2032
+ let overrides$4 = ``;
1912
2033
 
1913
2034
  const NumberField = compose(
1914
2035
  createStyleMixin({
@@ -1923,13 +2044,13 @@ const NumberField = compose(
1923
2044
  createProxy({
1924
2045
  slots: ['prefix', 'suffix'],
1925
2046
  wrappedEleName: 'vaadin-number-field',
1926
- style: () => overrides$5,
2047
+ style: () => overrides$4,
1927
2048
  excludeAttrsSync: ['tabindex'],
1928
- componentName: componentName$c
2049
+ componentName: componentName$b
1929
2050
  })
1930
2051
  );
1931
2052
 
1932
- overrides$5 = `
2053
+ overrides$4 = `
1933
2054
  :host {
1934
2055
  display: inline-block;
1935
2056
  }
@@ -1969,7 +2090,7 @@ overrides$5 = `
1969
2090
  }
1970
2091
  `;
1971
2092
 
1972
- customElements.define(componentName$c, NumberField);
2093
+ customElements.define(componentName$b, NumberField);
1973
2094
 
1974
2095
  const focusElement = (ele) => {
1975
2096
  ele?.focus();
@@ -1985,7 +2106,7 @@ const getSanitizedCharacters = (str) => {
1985
2106
  return [...pin]; // creating array of chars
1986
2107
  };
1987
2108
 
1988
- const componentName$b = getComponentName('passcode-internal');
2109
+ const componentName$a = getComponentName('passcode-internal');
1989
2110
 
1990
2111
  const observedAttributes$1 = [
1991
2112
  'digits'
@@ -1999,7 +2120,7 @@ const forwardAttributes = [
1999
2120
  'readonly'
2000
2121
  ];
2001
2122
 
2002
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
2123
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
2003
2124
 
2004
2125
  class PasscodeInternal extends BaseInputClass$2 {
2005
2126
  static get observedAttributes() {
@@ -2007,7 +2128,7 @@ class PasscodeInternal extends BaseInputClass$2 {
2007
2128
  }
2008
2129
 
2009
2130
  static get componentName() {
2010
- return componentName$b;
2131
+ return componentName$a;
2011
2132
  }
2012
2133
 
2013
2134
  #dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -2173,9 +2294,9 @@ class PasscodeInternal extends BaseInputClass$2 {
2173
2294
  }
2174
2295
  }
2175
2296
 
2176
- const componentName$a = getComponentName('text-field');
2297
+ const componentName$9 = getComponentName('text-field');
2177
2298
 
2178
- let overrides$4 = ``;
2299
+ let overrides$3 = ``;
2179
2300
 
2180
2301
  const observedAttrs = ['type'];
2181
2302
 
@@ -2211,13 +2332,13 @@ const TextField = compose(
2211
2332
  createProxy({
2212
2333
  slots: ['prefix', 'suffix'],
2213
2334
  wrappedEleName: 'vaadin-text-field',
2214
- style: () => overrides$4,
2335
+ style: () => overrides$3,
2215
2336
  excludeAttrsSync: ['tabindex'],
2216
- componentName: componentName$a
2337
+ componentName: componentName$9
2217
2338
  })
2218
2339
  );
2219
2340
 
2220
- overrides$4 = `
2341
+ overrides$3 = `
2221
2342
  :host {
2222
2343
  display: inline-block;
2223
2344
  --vaadin-field-default-width: auto;
@@ -2270,7 +2391,7 @@ overrides$4 = `
2270
2391
  }
2271
2392
  `;
2272
2393
 
2273
- const componentName$9 = getComponentName('passcode');
2394
+ const componentName$8 = getComponentName('passcode');
2274
2395
 
2275
2396
  const customMixin$2 = (superclass) =>
2276
2397
  class PasscodeClass extends superclass {
@@ -2287,17 +2408,17 @@ const customMixin$2 = (superclass) =>
2287
2408
  const template = document.createElement('template');
2288
2409
 
2289
2410
  template.innerHTML = `
2290
- <${componentName$b}
2411
+ <${componentName$a}
2291
2412
  bordered="true"
2292
2413
  name="code"
2293
2414
  tabindex="-1"
2294
2415
  slot="input"
2295
- ></${componentName$b}>
2416
+ ></${componentName$a}>
2296
2417
  `;
2297
2418
 
2298
2419
  this.baseElement.appendChild(template.content.cloneNode(true));
2299
2420
 
2300
- this.inputElement = this.shadowRoot.querySelector(componentName$b);
2421
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
2301
2422
 
2302
2423
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2303
2424
  }
@@ -2403,19 +2524,19 @@ const Passcode = compose(
2403
2524
  }
2404
2525
  `,
2405
2526
  excludeAttrsSync: ['tabindex'],
2406
- componentName: componentName$9
2527
+ componentName: componentName$8
2407
2528
  })
2408
2529
  );
2409
2530
 
2410
- customElements.define(componentName$a, TextField);
2531
+ customElements.define(componentName$9, TextField);
2411
2532
 
2412
- customElements.define(componentName$b, PasscodeInternal);
2533
+ customElements.define(componentName$a, PasscodeInternal);
2413
2534
 
2414
- customElements.define(componentName$9, Passcode);
2535
+ customElements.define(componentName$8, Passcode);
2415
2536
 
2416
- const componentName$8 = getComponentName('password-field');
2537
+ const componentName$7 = getComponentName('password-field');
2417
2538
 
2418
- let overrides$3 = ``;
2539
+ let overrides$2 = ``;
2419
2540
 
2420
2541
  const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
2421
2542
  host: () => ':host',
@@ -2457,13 +2578,13 @@ const PasswordField = compose(
2457
2578
  createProxy({
2458
2579
  slots: ['suffix'],
2459
2580
  wrappedEleName: 'vaadin-password-field',
2460
- style: () => overrides$3,
2581
+ style: () => overrides$2,
2461
2582
  excludeAttrsSync: ['tabindex'],
2462
- componentName: componentName$8
2583
+ componentName: componentName$7
2463
2584
  })
2464
2585
  );
2465
2586
 
2466
- overrides$3 = `
2587
+ overrides$2 = `
2467
2588
  :host {
2468
2589
  display: inline-block;
2469
2590
  }
@@ -2484,87 +2605,7 @@ overrides$3 = `
2484
2605
  }
2485
2606
  `;
2486
2607
 
2487
- customElements.define(componentName$8, PasswordField);
2488
-
2489
- const componentName$7 = getComponentName('switch-toggle');
2490
-
2491
- let overrides$2 = ``;
2492
-
2493
- const SwitchToggle = compose(
2494
- createStyleMixin({
2495
- mappings: {
2496
- width: { selector: () => ':host' },
2497
- cursor: [{}, { selector: '> label' }]
2498
- }
2499
- }),
2500
- draggableMixin,
2501
- proxyInputMixin,
2502
- componentNameValidationMixin
2503
- )(
2504
- createProxy({
2505
- slots: [],
2506
- wrappedEleName: 'vaadin-checkbox',
2507
- style: () => overrides$2,
2508
- excludeAttrsSync: ['tabindex'],
2509
- componentName: componentName$7
2510
- })
2511
- );
2512
-
2513
- overrides$2 = `
2514
- :host {
2515
- display: inline-block;
2516
- }
2517
-
2518
- :host {
2519
- --margin: 7px;
2520
- --width: var(${SwitchToggle.cssVarList.width});
2521
- --height: calc(var(--width) / 2);
2522
- --radius: var(--height);
2523
- --knobSize: calc(var(--height) - 5px);
2524
- --bgColor: #fff;
2525
- --knobBgColor: #000;
2526
- }
2527
- vaadin-checkbox : {
2528
- width: 100%;
2529
- }
2530
- vaadin-checkbox>label {
2531
- cursor: pointer;
2532
- border: 1px solid;
2533
- text-indent: -99999px;
2534
- display: block;
2535
- position: relative;
2536
- width: var(--width);
2537
- height: var(--height);
2538
- background: var(--bgColor);
2539
- border-radius: var(--radius);
2540
- }
2541
- vaadin-checkbox>label::after {
2542
- content: '';
2543
- position: absolute;
2544
- transition: 0.3s;
2545
- top: var(--margin);
2546
- left: var(--margin);
2547
- width: var(--knobSize);
2548
- height: var(--knobSize);
2549
- background: var(--knobBgColor);
2550
- border-radius: var(--knobSize);
2551
- }
2552
- vaadin-checkbox::part(checkbox) {
2553
- height: 0;
2554
- width: 0;
2555
- visibility: hidden;
2556
- margin: 0;
2557
- }
2558
- vaadin-checkbox[checked]>label::after {
2559
- transform: translateX(-100%);
2560
- left: calc(100% - var(--margin));
2561
- }
2562
- vaadin-checkbox[active]>label::after {
2563
- width: calc(var(--knobSize) + 15px);
2564
- }
2565
- `;
2566
-
2567
- customElements.define(componentName$7, SwitchToggle);
2608
+ customElements.define(componentName$7, PasswordField);
2568
2609
 
2569
2610
  const componentName$6 = getComponentName('text-area');
2570
2611
 
@@ -4999,15 +5040,15 @@ var globals = {
4999
5040
  fonts
5000
5041
  };
5001
5042
 
5002
- const globalRefs$d = getThemeRefs(globals);
5043
+ const globalRefs$e = getThemeRefs(globals);
5003
5044
  const vars$g = Button.cssVarList;
5004
5045
 
5005
5046
  const mode = {
5006
- primary: globalRefs$d.colors.primary,
5007
- secondary: globalRefs$d.colors.secondary,
5008
- success: globalRefs$d.colors.success,
5009
- error: globalRefs$d.colors.error,
5010
- surface: globalRefs$d.colors.surface
5047
+ primary: globalRefs$e.colors.primary,
5048
+ secondary: globalRefs$e.colors.secondary,
5049
+ success: globalRefs$e.colors.success,
5050
+ error: globalRefs$e.colors.error,
5051
+ surface: globalRefs$e.colors.surface
5011
5052
  };
5012
5053
 
5013
5054
  const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
@@ -5019,31 +5060,31 @@ const button = {
5019
5060
  xs: {
5020
5061
  [vars$g.height]: '10px',
5021
5062
  [vars$g.fontSize]: '10px',
5022
- [vars$g.padding]: `0 ${globalRefs$d.spacing.xs}`
5063
+ [vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
5023
5064
  },
5024
5065
  sm: {
5025
5066
  [vars$g.height]: '20px',
5026
5067
  [vars$g.fontSize]: '10px',
5027
- [vars$g.padding]: `0 ${globalRefs$d.spacing.sm}`
5068
+ [vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
5028
5069
  },
5029
5070
  md: {
5030
5071
  [vars$g.height]: '30px',
5031
5072
  [vars$g.fontSize]: '14px',
5032
- [vars$g.padding]: `0 ${globalRefs$d.spacing.md}`
5073
+ [vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
5033
5074
  },
5034
5075
  lg: {
5035
5076
  [vars$g.height]: '40px',
5036
5077
  [vars$g.fontSize]: '20px',
5037
- [vars$g.padding]: `0 ${globalRefs$d.spacing.lg}`
5078
+ [vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
5038
5079
  },
5039
5080
  xl: {
5040
5081
  [vars$g.height]: '50px',
5041
5082
  [vars$g.fontSize]: '25px',
5042
- [vars$g.padding]: `0 ${globalRefs$d.spacing.xl}`
5083
+ [vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
5043
5084
  }
5044
5085
  },
5045
5086
 
5046
- [vars$g.borderRadius]: globalRefs$d.radius.lg,
5087
+ [vars$g.borderRadius]: globalRefs$e.radius.lg,
5047
5088
  [vars$g.cursor]: 'pointer',
5048
5089
  [vars$g.borderWidth]: '2px',
5049
5090
  [vars$g.borderStyle]: 'solid',
@@ -5089,7 +5130,7 @@ const button = {
5089
5130
  }
5090
5131
  };
5091
5132
 
5092
- const globalRefs$c = getThemeRefs(globals);
5133
+ const globalRefs$d = getThemeRefs(globals);
5093
5134
 
5094
5135
  const vars$f = TextField.cssVarList;
5095
5136
 
@@ -5098,44 +5139,44 @@ const textField = (vars) => ({
5098
5139
  xs: {
5099
5140
  [vars.height]: '14px',
5100
5141
  [vars.fontSize]: '8px',
5101
- [vars.padding]: `0 ${globalRefs$c.spacing.xs}`
5142
+ [vars.padding]: `0 ${globalRefs$d.spacing.xs}`
5102
5143
  },
5103
5144
  sm: {
5104
5145
  [vars.height]: '20px',
5105
5146
  [vars.fontSize]: '10px',
5106
- [vars.padding]: `0 ${globalRefs$c.spacing.sm}`
5147
+ [vars.padding]: `0 ${globalRefs$d.spacing.sm}`
5107
5148
  },
5108
5149
  md: {
5109
5150
  [vars.height]: '30px',
5110
5151
  [vars.fontSize]: '14px',
5111
- [vars.padding]: `0 ${globalRefs$c.spacing.md}`
5152
+ [vars.padding]: `0 ${globalRefs$d.spacing.md}`
5112
5153
  },
5113
5154
  lg: {
5114
5155
  [vars.height]: '40px',
5115
5156
  [vars.fontSize]: '20px',
5116
- [vars.padding]: `0 ${globalRefs$c.spacing.lg}`
5157
+ [vars.padding]: `0 ${globalRefs$d.spacing.lg}`
5117
5158
  },
5118
5159
  xl: {
5119
5160
  [vars.height]: '50px',
5120
5161
  [vars.fontSize]: '25px',
5121
- [vars.padding]: `0 ${globalRefs$c.spacing.xl}`
5162
+ [vars.padding]: `0 ${globalRefs$d.spacing.xl}`
5122
5163
  }
5123
5164
  },
5124
5165
 
5125
- [vars.color]: globalRefs$c.colors.surface.contrast,
5126
- [vars.placeholderColor]: globalRefs$c.colors.surface.main,
5166
+ [vars.color]: globalRefs$d.colors.surface.contrast,
5167
+ [vars.placeholderColor]: globalRefs$d.colors.surface.main,
5127
5168
 
5128
- [vars.backgroundColor]: globalRefs$c.colors.surface.light,
5169
+ [vars.backgroundColor]: globalRefs$d.colors.surface.light,
5129
5170
 
5130
5171
  [vars.borderWidth]: '1px',
5131
5172
  [vars.borderStyle]: 'solid',
5132
5173
  [vars.borderColor]: 'transparent',
5133
- [vars.borderRadius]: globalRefs$c.radius.sm,
5174
+ [vars.borderRadius]: globalRefs$d.radius.sm,
5134
5175
 
5135
5176
  _disabled: {
5136
- [vars.color]: globalRefs$c.colors.surface.dark,
5137
- [vars.placeholderColor]: globalRefs$c.colors.surface.light,
5138
- [vars.backgroundColor]: globalRefs$c.colors.surface.main
5177
+ [vars.color]: globalRefs$d.colors.surface.dark,
5178
+ [vars.placeholderColor]: globalRefs$d.colors.surface.light,
5179
+ [vars.backgroundColor]: globalRefs$d.colors.surface.main
5139
5180
  },
5140
5181
 
5141
5182
  _fullWidth: {
@@ -5145,24 +5186,24 @@ const textField = (vars) => ({
5145
5186
  _focused: {
5146
5187
  [vars.outlineWidth]: '2px',
5147
5188
  [vars.outlineStyle]: 'solid',
5148
- [vars.outlineColor]: globalRefs$c.colors.surface.main
5189
+ [vars.outlineColor]: globalRefs$d.colors.surface.main
5149
5190
  },
5150
5191
 
5151
5192
  _bordered: {
5152
- [vars.borderColor]: globalRefs$c.colors.surface.main
5193
+ [vars.borderColor]: globalRefs$d.colors.surface.main
5153
5194
  },
5154
5195
 
5155
5196
  _invalid: {
5156
- [vars.borderColor]: globalRefs$c.colors.error.main,
5157
- [vars.color]: globalRefs$c.colors.error.main,
5158
- [vars.outlineColor]: globalRefs$c.colors.error.light,
5159
- [vars.placeholderColor]: globalRefs$c.colors.error.light
5197
+ [vars.borderColor]: globalRefs$d.colors.error.main,
5198
+ [vars.color]: globalRefs$d.colors.error.main,
5199
+ [vars.outlineColor]: globalRefs$d.colors.error.light,
5200
+ [vars.placeholderColor]: globalRefs$d.colors.error.light
5160
5201
  }
5161
5202
  });
5162
5203
 
5163
5204
  var textField$1 = textField(vars$f);
5164
5205
 
5165
- const globalRefs$b = getThemeRefs(globals);
5206
+ const globalRefs$c = getThemeRefs(globals);
5166
5207
 
5167
5208
  const vars$e = PasswordField.cssVarList;
5168
5209
 
@@ -5170,11 +5211,11 @@ const passwordField = {
5170
5211
  [vars$e.wrapperBorderStyle]: 'solid',
5171
5212
  [vars$e.wrapperBorderWidth]: '1px',
5172
5213
  [vars$e.wrapperBorderColor]: 'transparent',
5173
- [vars$e.wrapperBorderRadius]: globalRefs$b.radius.sm,
5214
+ [vars$e.wrapperBorderRadius]: globalRefs$c.radius.sm,
5174
5215
 
5175
- [vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
5176
- [vars$e.inputTextColor]: globalRefs$b.colors.surface.contrast,
5177
- [vars$e.placeholderTextColor]: globalRefs$b.colors.surface.main,
5216
+ [vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
5217
+ [vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
5218
+ [vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
5178
5219
 
5179
5220
  [vars$e.pointerCursor]: 'pointer',
5180
5221
 
@@ -5205,7 +5246,7 @@ const passwordField = {
5205
5246
 
5206
5247
  _bordered: {
5207
5248
  [vars$e.padding]: `0 0.5em`,
5208
- [vars$e.wrapperBorderColor]: globalRefs$b.colors.surface.main
5249
+ [vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
5209
5250
  },
5210
5251
 
5211
5252
  _fullWidth: {
@@ -5213,10 +5254,10 @@ const passwordField = {
5213
5254
  },
5214
5255
 
5215
5256
  _invalid: {
5216
- [vars$e.labelTextColor]: globalRefs$b.colors.error.main,
5217
- [vars$e.inputTextColor]: globalRefs$b.colors.error.main,
5218
- [vars$e.placeholderTextColor]: globalRefs$b.colors.error.light,
5219
- [vars$e.wrapperBorderColor]: globalRefs$b.colors.error.main
5257
+ [vars$e.labelTextColor]: globalRefs$c.colors.error.main,
5258
+ [vars$e.inputTextColor]: globalRefs$c.colors.error.main,
5259
+ [vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
5260
+ [vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main
5220
5261
  },
5221
5262
  };
5222
5263
 
@@ -5228,16 +5269,16 @@ const emailField = {
5228
5269
  ...textField(EmailField.cssVarList)
5229
5270
  };
5230
5271
 
5231
- const globalRefs$a = getThemeRefs(globals);
5272
+ const globalRefs$b = getThemeRefs(globals);
5232
5273
  const vars$d = TextArea.cssVarList;
5233
5274
 
5234
5275
  const textArea = {
5235
5276
  [vars$d.width]: '100%',
5236
- [vars$d.color]: globalRefs$a.colors.primary.main,
5237
- [vars$d.backgroundColor]: globalRefs$a.colors.surface.light,
5277
+ [vars$d.color]: globalRefs$b.colors.primary.main,
5278
+ [vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
5238
5279
  [vars$d.resize]: 'vertical',
5239
5280
 
5240
- [vars$d.borderRadius]: globalRefs$a.radius.sm,
5281
+ [vars$d.borderRadius]: globalRefs$b.radius.sm,
5241
5282
  [vars$d.borderWidth]: '1px',
5242
5283
  [vars$d.borderStyle]: 'solid',
5243
5284
  [vars$d.borderColor]: 'transparent',
@@ -5246,11 +5287,11 @@ const textArea = {
5246
5287
 
5247
5288
 
5248
5289
  _bordered: {
5249
- [vars$d.borderColor]: globalRefs$a.colors.surface.main
5290
+ [vars$d.borderColor]: globalRefs$b.colors.surface.main
5250
5291
  },
5251
5292
 
5252
5293
  _focused: {
5253
- [vars$d.outlineColor]: globalRefs$a.colors.surface.main
5294
+ [vars$d.outlineColor]: globalRefs$b.colors.surface.main
5254
5295
  },
5255
5296
 
5256
5297
  _fullWidth: {
@@ -5262,55 +5303,52 @@ const textArea = {
5262
5303
  },
5263
5304
 
5264
5305
  _invalid: {
5265
- [vars$d.outlineColor]: globalRefs$a.colors.error.main
5306
+ [vars$d.outlineColor]: globalRefs$b.colors.error.main
5266
5307
  }
5267
5308
  };
5268
5309
 
5269
- const globalRefs$9 = getThemeRefs(globals);
5310
+ const globalRefs$a = getThemeRefs(globals);
5270
5311
  const vars$c = Checkbox.cssVarList;
5271
5312
 
5272
5313
  const checkbox = {
5273
- [vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
5314
+ [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5274
5315
 
5275
5316
  [vars$c.labelFontSize]: '12px',
5276
5317
  [vars$c.labelFontWeight]: '400',
5277
- [vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
5318
+ [vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
5278
5319
  [vars$c.cursor]: 'pointer',
5279
5320
 
5280
5321
  [vars$c.checkboxWidth]: 'calc(1em - 2px)',
5281
5322
  [vars$c.checkboxHeight]: 'calc(1em - 2px)',
5282
5323
  [vars$c.labelMargin]: 'calc(1em + 5px)',
5283
5324
 
5325
+ [vars$c.checkboxRadius]: globalRefs$a.radius.sm,
5326
+
5284
5327
  size: {
5285
5328
  xs: {
5286
5329
  [vars$c.labelFontSize]: '12px',
5287
5330
  [vars$c.labelLineHeight]: '1.1em',
5288
5331
  [vars$c.checkmarkSize]: '18px',
5289
- [vars$c.checkboxRadius]: globalRefs$9.radius.sm,
5290
5332
  },
5291
5333
  sm: {
5292
5334
  [vars$c.labelFontSize]: '14px',
5293
5335
  [vars$c.labelLineHeight]: '1.2em',
5294
5336
  [vars$c.checkmarkSize]: '22px',
5295
- [vars$c.checkboxRadius]: globalRefs$9.radius.sm,
5296
5337
  },
5297
5338
  md: {
5298
5339
  [vars$c.labelFontSize]: '16px',
5299
5340
  [vars$c.labelLineHeight]: '1.35em',
5300
5341
  [vars$c.checkmarkSize]: '26px',
5301
- [vars$c.checkboxRadius]: globalRefs$9.radius.sm,
5302
5342
  },
5303
5343
  lg: {
5304
5344
  [vars$c.labelFontSize]: '20px',
5305
5345
  [vars$c.labelLineHeight]: '1.5em',
5306
5346
  [vars$c.checkmarkSize]: '34px',
5307
- [vars$c.checkboxRadius]: globalRefs$9.radius.sm,
5308
5347
  },
5309
5348
  xl: {
5310
5349
  [vars$c.labelFontSize]: '20px',
5311
5350
  [vars$c.labelLineHeight]: '1.75em',
5312
5351
  [vars$c.checkmarkSize]: '38px',
5313
- [vars$c.checkboxRadius]: globalRefs$9.radius.sm,
5314
5352
  }
5315
5353
  },
5316
5354
 
@@ -5319,33 +5357,98 @@ const checkbox = {
5319
5357
  },
5320
5358
 
5321
5359
  _checked: {
5322
- [vars$c.checkboxBackgroundColor]: globalRefs$9.colors.primary.main,
5323
- [vars$c.checkmarkTextColor]: globalRefs$9.colors.primary.contrast,
5360
+ [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
5361
+ [vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
5324
5362
  },
5325
5363
 
5326
5364
  _disabled: {
5327
- [vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
5365
+ [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5328
5366
  },
5329
5367
 
5330
5368
  _focusRing: {
5331
5369
  [vars$c.checkboxOutlineWidth]: '2px',
5332
5370
  [vars$c.checkboxOutlineOffset]: '1px',
5333
- [vars$c.checkboxOutlineColor]: globalRefs$9.colors.primary.main,
5371
+ [vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
5334
5372
  [vars$c.checkboxOutlineStyle]: 'solid'
5335
5373
  },
5336
5374
 
5337
5375
  _invalid: {
5338
- [vars$c.checkboxOutlineColor]: globalRefs$9.colors.error.main,
5339
- [vars$c.labelTextColor]: globalRefs$9.colors.error.main
5376
+ [vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
5377
+ [vars$c.labelTextColor]: globalRefs$a.colors.error.main
5340
5378
  },
5341
5379
 
5342
5380
  };
5343
5381
 
5382
+ const knobMargin = '2px';
5383
+ const checkboxHeight = '1.25em';
5384
+ const trackBorderWidth = '2px';
5385
+
5386
+ const globalRefs$9 = getThemeRefs(globals);
5344
5387
  const vars$b = SwitchToggle.cssVarList;
5345
5388
 
5346
5389
  const switchToggle = {
5347
- [vars$b.width]: '70px',
5348
- [vars$b.cursor]: [{}, { selector: '> label' }]
5390
+ size: {
5391
+ xs: { [vars$b.fontSize]: '8px' },
5392
+ sm: { [vars$b.fontSize]: '12px' },
5393
+ md: { [vars$b.fontSize]: '16px' },
5394
+ lg: { [vars$b.fontSize]: '20px' },
5395
+ xl: { [vars$b.fontSize]: '24px' }
5396
+ },
5397
+
5398
+ [vars$b.cursor]: 'pointer',
5399
+
5400
+ [vars$b.trackBorderStyle]: 'solid',
5401
+ [vars$b.trackBorderWidth]: trackBorderWidth,
5402
+ [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
5403
+
5404
+ [vars$b.trackBackgroundColor]: 'none',
5405
+ [vars$b.trackRadius]: globalRefs$9.radius.md,
5406
+ [vars$b.trackWidth]: '2.5em',
5407
+ [vars$b.trackHeight]: checkboxHeight,
5408
+
5409
+ [vars$b.knobSize]: `calc(1em - ${knobMargin})`,
5410
+ [vars$b.knobRadius]: '50%',
5411
+ [vars$b.knobTopOffset]: '1px',
5412
+ [vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
5413
+ [vars$b.knobPosition]: knobMargin,
5414
+ [vars$b.knobTransition]: '0.3s',
5415
+
5416
+ [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
5417
+ [vars$b.labelFontWeight]: '400',
5418
+ [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
5419
+ [vars$b.labelMargin]: '0.25em',
5420
+
5421
+ _fullWidth: {
5422
+ [vars$b.width]: '100%',
5423
+ },
5424
+
5425
+ _checked: {
5426
+ [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
5427
+ [vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
5428
+ [vars$b.knobColor]: globalRefs$9.colors.primary.main,
5429
+ [vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
5430
+ },
5431
+
5432
+ _disabled: {
5433
+ [vars$b.cursor]: 'not-allowed', // todo: fix cursor
5434
+ [vars$b.knobColor]: globalRefs$9.colors.surface.main,
5435
+ [vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
5436
+ [vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
5437
+ },
5438
+
5439
+ _focusRing: {
5440
+ [vars$b.switchOutlineWidth]: '2px',
5441
+ [vars$b.switchOutlineOffset]: '1px',
5442
+ [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
5443
+ [vars$b.switchOutlineStyle]: 'solid'
5444
+ },
5445
+
5446
+ _invalid: {
5447
+ [vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
5448
+ [vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
5449
+ [vars$b.knobColor]: globalRefs$9.colors.error.main,
5450
+ [vars$b.labelTextColor]: globalRefs$9.colors.error.main
5451
+ },
5349
5452
  };
5350
5453
 
5351
5454
  const globalRefs$8 = getThemeRefs(globals);
@@ -5389,6 +5492,7 @@ const container = {
5389
5492
  [vars$a.flexDirection]: 'row',
5390
5493
  [vars$a.alignItems]: helperRefs$1.verticalAlignment,
5391
5494
  [vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
5495
+ [vars$a.flexWrap]: 'wrap',
5392
5496
  horizontalAlignment: {
5393
5497
  spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
5394
5498
  }
@@ -5590,7 +5694,7 @@ const vars$6 = Divider.cssVarList;
5590
5694
 
5591
5695
  const thickness = '2px';
5592
5696
  const textPaddingSize = '10px';
5593
- const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$h);
5697
+ const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
5594
5698
 
5595
5699
 
5596
5700
  const divider = {