@descope/web-components-ui 1.0.90 → 1.0.92

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.
package/dist/index.esm.js CHANGED
@@ -1041,47 +1041,63 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
1041
1041
 
1042
1042
  const componentName$o = getComponentName('button');
1043
1043
 
1044
- const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1045
1044
  const resetStyles = `
1046
1045
  :host {
1047
1046
  display: inline-block;
1048
1047
  }
1049
- vaadin-button { margin: 0; }
1048
+ vaadin-button {
1049
+ margin: 0;
1050
+ min-width: 0;
1051
+ width: 100%;
1052
+ height: auto;
1053
+ }
1054
+ vaadin-button::part(label) {
1055
+ padding: 0;
1056
+ }
1050
1057
  vaadin-button::part(prefix) {
1051
1058
  margin-left: 0;
1052
1059
  margin-right: 0;
1053
1060
  }
1054
1061
  `;
1062
+
1055
1063
  const iconStyles = `
1056
1064
  vaadin-button::part(prefix),
1057
1065
  vaadin-button::part(label) {
1058
1066
  display: flex;
1059
1067
  justify-content: center;
1060
1068
  align-items: center;
1061
- gap: 5px;
1062
1069
  }
1063
1070
  `;
1064
1071
 
1065
- const { label: label$5, host: host$9 } = {
1072
+ const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1073
+
1074
+ const { host: host$9, label: label$6 } = {
1075
+ host: { selector: () => ':host' },
1066
1076
  label: { selector: '::part(label)' },
1067
- host: { selector: () => ':host' }
1068
1077
  };
1069
1078
 
1070
1079
  const Button = compose(
1071
1080
  createStyleMixin({
1072
1081
  mappings: {
1082
+ color: {},
1083
+ textDecoration: label$6,
1084
+ fontSize: {},
1085
+ cursor: {},
1073
1086
  backgroundColor: {},
1074
1087
  borderRadius: {},
1075
- color: label$5,
1076
1088
  borderColor: {},
1077
1089
  borderStyle: {},
1078
1090
  borderWidth: {},
1079
- fontSize: {},
1080
- height: {},
1081
1091
  width: host$9,
1082
- cursor: {},
1083
- padding: label$5,
1084
- textDecoration: label$5
1092
+ gap: label$6,
1093
+ verticalPadding: [
1094
+ { property: 'padding-top' },
1095
+ { property: 'padding-bottom' },
1096
+ ],
1097
+ horizontalPadding: [
1098
+ { property: 'padding-left' },
1099
+ { property: 'padding-right' },
1100
+ ]
1085
1101
  }
1086
1102
  }),
1087
1103
  draggableMixin,
@@ -1090,44 +1106,44 @@ const Button = compose(
1090
1106
  createProxy({
1091
1107
  slots: ['prefix', 'label', 'suffix'],
1092
1108
  wrappedEleName: 'vaadin-button',
1093
- style: () =>
1094
- `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
1109
+ style: () => `
1110
+ ${resetStyles}
1111
+ ${iconStyles}
1112
+ ${loadingIndicatorStyles}
1113
+ ${editorOverrides}
1114
+ `,
1095
1115
  excludeAttrsSync: ['tabindex'],
1096
1116
  componentName: componentName$o
1097
1117
  })
1098
1118
  );
1099
1119
 
1120
+ const { color, fontSize } = Button.cssVarList;
1100
1121
  const loadingIndicatorStyles = `
1101
1122
  @keyframes spin {
1102
1123
  0% { -webkit-transform: rotate(0deg); }
1103
1124
  100% { -webkit-transform: rotate(360deg); }
1104
1125
  }
1105
1126
  :host([loading="true"]) ::before {
1106
- --marginRatio: 1.35;
1107
- color: var(${Button.cssVarList.color});
1108
1127
  animation: spin 2s linear infinite;
1109
1128
  position: absolute;
1110
- top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
1111
- left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
1112
1129
  content: '';
1113
1130
  z-index: 1;
1114
1131
  box-sizing: border-box;
1115
1132
  border-radius: 50%;
1116
1133
  border-bottom-color: transparent;
1117
1134
  border-left-color: transparent;
1118
- border-width: calc(var(${Button.cssVarList.height}) / 12);
1119
1135
  border-style: solid;
1120
- width: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
1121
- height: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
1136
+ color: var(${color});
1137
+ top: calc(50% - (var(${fontSize}) / 2));
1138
+ left: calc(50% - (var(${fontSize}) / 2));
1139
+ border-width: calc(var(${fontSize}) / 10);
1140
+ width: var(${fontSize});
1141
+ height: var(${fontSize});
1122
1142
  }
1123
1143
  :host([loading="true"])::part(prefix),
1124
1144
  :host([loading="true"])::part(label) {
1125
1145
  visibility: hidden;
1126
1146
  }
1127
-
1128
- vaadin-button {
1129
- width: 100%;
1130
- }
1131
1147
  `;
1132
1148
 
1133
1149
  customElements.define(componentName$o, Button);
@@ -1306,7 +1322,7 @@ const {
1306
1322
  checkboxElement,
1307
1323
  checkboxSurface,
1308
1324
  checkboxHiddenLabel: checkboxHiddenLabel$1,
1309
- label: label$4,
1325
+ label: label$5,
1310
1326
  requiredIndicator: requiredIndicator$4
1311
1327
  } = {
1312
1328
  host: { selector: () => ':host' },
@@ -1329,7 +1345,7 @@ const Checkbox = compose(
1329
1345
  checkboxRadius: { ...checkboxElement, property: 'border-radius' },
1330
1346
  checkboxWidth: [
1331
1347
  { ...checkboxElement, property: 'width' },
1332
- { ...label$4, property: 'margin-left' }
1348
+ { ...label$5, property: 'margin-left' }
1333
1349
  ],
1334
1350
  checkboxHeight: { ...checkboxElement, property: 'height' },
1335
1351
 
@@ -1344,23 +1360,23 @@ const Checkbox = compose(
1344
1360
 
1345
1361
  // Label
1346
1362
  labelFontSize: [
1347
- { ...label$4, property: 'font-size' },
1363
+ { ...label$5, property: 'font-size' },
1348
1364
  { ...checkboxHiddenLabel$1, property: 'font-size' }
1349
1365
  ],
1350
1366
  labelLineHeight: [
1351
- { ...label$4, property: 'line-height' },
1367
+ { ...label$5, property: 'line-height' },
1352
1368
  { ...checkboxHiddenLabel$1, property: 'line-height' }
1353
1369
  ],
1354
1370
  labelFontWeight: [
1355
- { ...label$4, property: 'font-weight' },
1371
+ { ...label$5, property: 'font-weight' },
1356
1372
  { ...checkboxHiddenLabel$1, property: 'font-weight' }
1357
1373
  ],
1358
1374
  labelMargin: [
1359
- { ...label$4, property: 'left' },
1375
+ { ...label$5, property: 'left' },
1360
1376
  { ...checkboxHiddenLabel$1, property: 'padding-left' }
1361
1377
  ],
1362
1378
  labelTextColor: [
1363
- { ...label$4, property: 'color' },
1379
+ { ...label$5, property: 'color' },
1364
1380
  { ...requiredIndicator$4, property: 'color' },
1365
1381
  ],
1366
1382
  },
@@ -1398,7 +1414,7 @@ const {
1398
1414
  checkboxElement: track,
1399
1415
  checkboxSurface: knob,
1400
1416
  checkboxHiddenLabel,
1401
- label: label$3,
1417
+ label: label$4,
1402
1418
  requiredIndicator: requiredIndicator$3,
1403
1419
  } = {
1404
1420
  host: { selector: () => ':host' },
@@ -1415,7 +1431,7 @@ const SwitchToggle = compose(
1415
1431
  mappings: {
1416
1432
  width: host$7,
1417
1433
  cursor: [component, checkboxHiddenLabel, track],
1418
- fontSize: [component, label$3, checkboxHiddenLabel],
1434
+ fontSize: [component, label$4, checkboxHiddenLabel],
1419
1435
 
1420
1436
  // Track
1421
1437
  trackBorderWidth: { ...track, property: 'border-width' },
@@ -1452,19 +1468,19 @@ const SwitchToggle = compose(
1452
1468
 
1453
1469
  // Label
1454
1470
  labelMargin: [
1455
- { ...label$3, property: 'padding-left' },
1471
+ { ...label$4, property: 'padding-left' },
1456
1472
  { ...checkboxHiddenLabel, property: 'padding-left' }
1457
1473
  ],
1458
1474
  labelLineHeight: [
1459
- { ...label$3, property: 'line-height' },
1475
+ { ...label$4, property: 'line-height' },
1460
1476
  { ...checkboxHiddenLabel, property: 'line-height' }
1461
1477
  ],
1462
1478
  labelFontWeight: [
1463
- { ...label$3, property: 'font-weight' },
1479
+ { ...label$4, property: 'font-weight' },
1464
1480
  { ...checkboxHiddenLabel, property: 'font-weight' }
1465
1481
  ],
1466
1482
  labelTextColor: [
1467
- { ...label$3, property: 'color' },
1483
+ { ...label$4, property: 'color' },
1468
1484
  { ...requiredIndicator$3, property: 'color' },
1469
1485
  ],
1470
1486
  },
@@ -1869,7 +1885,7 @@ var textFieldMappings = {
1869
1885
 
1870
1886
  const componentName$e = getComponentName('email-field');
1871
1887
 
1872
- let overrides$5 = ``;
1888
+ let overrides$4 = ``;
1873
1889
 
1874
1890
  const EmailField = compose(
1875
1891
  createStyleMixin({
@@ -1884,13 +1900,13 @@ const EmailField = compose(
1884
1900
  createProxy({
1885
1901
  slots: ['suffix'],
1886
1902
  wrappedEleName: 'vaadin-email-field',
1887
- style: () => overrides$5,
1903
+ style: () => overrides$4,
1888
1904
  excludeAttrsSync: ['tabindex'],
1889
1905
  componentName: componentName$e
1890
1906
  })
1891
1907
  );
1892
1908
 
1893
- overrides$5 = `
1909
+ overrides$4 = `
1894
1910
  :host {
1895
1911
  display: inline-block;
1896
1912
  }
@@ -2043,7 +2059,7 @@ customElements.define(componentName$c, Logo);
2043
2059
 
2044
2060
  const componentName$b = getComponentName('number-field');
2045
2061
 
2046
- let overrides$4 = ``;
2062
+ let overrides$3 = ``;
2047
2063
 
2048
2064
  const NumberField = compose(
2049
2065
  createStyleMixin({
@@ -2058,13 +2074,13 @@ const NumberField = compose(
2058
2074
  createProxy({
2059
2075
  slots: ['prefix', 'suffix'],
2060
2076
  wrappedEleName: 'vaadin-number-field',
2061
- style: () => overrides$4,
2077
+ style: () => overrides$3,
2062
2078
  excludeAttrsSync: ['tabindex'],
2063
2079
  componentName: componentName$b
2064
2080
  })
2065
2081
  );
2066
2082
 
2067
- overrides$4 = `
2083
+ overrides$3 = `
2068
2084
  :host {
2069
2085
  display: inline-block;
2070
2086
  }
@@ -2310,7 +2326,7 @@ class PasscodeInternal extends BaseInputClass$2 {
2310
2326
 
2311
2327
  const componentName$9 = getComponentName('text-field');
2312
2328
 
2313
- let overrides$3 = ``;
2329
+ let overrides$2 = ``;
2314
2330
 
2315
2331
  const observedAttrs = ['type'];
2316
2332
 
@@ -2346,13 +2362,13 @@ const TextField = compose(
2346
2362
  createProxy({
2347
2363
  slots: ['prefix', 'suffix'],
2348
2364
  wrappedEleName: 'vaadin-text-field',
2349
- style: () => overrides$3,
2365
+ style: () => overrides$2,
2350
2366
  excludeAttrsSync: ['tabindex'],
2351
2367
  componentName: componentName$9
2352
2368
  })
2353
2369
  );
2354
2370
 
2355
- overrides$3 = `
2371
+ overrides$2 = `
2356
2372
  :host {
2357
2373
  display: inline-block;
2358
2374
  --vaadin-field-default-width: auto;
@@ -2368,6 +2384,7 @@ overrides$3 = `
2368
2384
  overflow: hidden;
2369
2385
  padding: 0;
2370
2386
  }
2387
+ vaadin-text-field[disabled] > input:placeholder-shown,
2371
2388
  vaadin-text-field[readonly] > input:placeholder-shown {
2372
2389
  opacity: 1;
2373
2390
  }
@@ -2441,7 +2458,7 @@ const customMixin$2 = (superclass) =>
2441
2458
  const { borderStyle, borderWidth, ...restTextFieldMappings } =
2442
2459
  textFieldMappings;
2443
2460
 
2444
- const { digitField, label: label$2, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
2461
+ const { digitField, label: label$3, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
2445
2462
  focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
2446
2463
  digitField: { selector: () => TextField.componentName },
2447
2464
  label: { selector: '> label' },
@@ -2463,7 +2480,7 @@ const Passcode = compose(
2463
2480
  // ideally, this would be part of the text field
2464
2481
  { ...internalWrapper, property: 'padding' }
2465
2482
  ],
2466
- color: [restTextFieldMappings.color, label$2, requiredIndicator$2],
2483
+ color: [restTextFieldMappings.color, label$3, requiredIndicator$2],
2467
2484
  padding: { ...digitField, property: textVars$1.padding },
2468
2485
  margin: { ...digitField, property: textVars$1.margin },
2469
2486
  textAlign: { ...digitField, property: textVars$1.textAlign },
@@ -2487,55 +2504,56 @@ const Passcode = compose(
2487
2504
  }
2488
2505
 
2489
2506
  descope-passcode-internal {
2490
- -webkit-mask-image: none;
2491
- padding: 0;
2492
- width: 100%;
2493
- height: 100%;
2494
- min-height: initial;
2507
+ -webkit-mask-image: none;
2508
+ padding: 0;
2509
+ width: 100%;
2510
+ height: 100%;
2511
+ min-height: initial;
2495
2512
  }
2496
2513
 
2497
- descope-passcode-internal .wrapper {
2498
- box-sizing: border-box;
2499
- min-height: initial;
2500
- height: 100%;
2514
+ descope-passcode-internal .wrapper {
2515
+ box-sizing: border-box;
2516
+ min-height: initial;
2517
+ height: 100%;
2518
+ justify-content: center;
2501
2519
  }
2502
2520
 
2503
- descope-passcode-internal descope-text-field {
2504
- width: var(${textVars$1.height})
2505
- }
2521
+ descope-passcode-internal descope-text-field {
2522
+ width: var(${textVars$1.height})
2523
+ }
2506
2524
 
2507
2525
  vaadin-text-field::part(input-field) {
2508
- background-color: transparent;
2509
- padding: 0;
2510
- overflow: hidden;
2511
- -webkit-mask-image: none;
2526
+ background-color: transparent;
2527
+ padding: 0;
2528
+ overflow: hidden;
2529
+ -webkit-mask-image: none;
2512
2530
  }
2513
2531
 
2514
- vaadin-text-field {
2515
- margin: 0;
2516
- padding: 0;
2517
- width: 100%
2518
- }
2532
+ vaadin-text-field {
2533
+ margin: 0;
2534
+ padding: 0;
2535
+ width: 100%
2536
+ }
2519
2537
 
2520
- vaadin-text-field::before {
2521
- height: initial;
2522
- }
2538
+ vaadin-text-field::before {
2539
+ height: initial;
2540
+ }
2523
2541
 
2524
- vaadin-text-field[readonly] > input:placeholder-shown {
2525
- opacity: 1;
2526
- }
2527
-
2528
- vaadin-text-field::part(input-field):focus {
2529
- cursor: text;
2530
- }
2542
+ vaadin-text-field[readonly] > input:placeholder-shown {
2543
+ opacity: 1;
2544
+ }
2531
2545
 
2532
- vaadin-text-field[required]::part(required-indicator)::after {
2533
- font-size: "12px";
2534
- content: "*";
2535
- }
2536
- vaadin-text-field[readonly]::part(input-field)::after {
2537
- border: 0 solid;
2538
- }
2546
+ vaadin-text-field::part(input-field):focus {
2547
+ cursor: text;
2548
+ }
2549
+
2550
+ vaadin-text-field[required]::part(required-indicator)::after {
2551
+ font-size: "12px";
2552
+ content: "*";
2553
+ }
2554
+ vaadin-text-field[readonly]::part(input-field)::after {
2555
+ border: 0 solid;
2556
+ }
2539
2557
  `,
2540
2558
  excludeAttrsSync: ['tabindex'],
2541
2559
  componentName: componentName$8
@@ -2550,14 +2568,22 @@ customElements.define(componentName$8, Passcode);
2550
2568
 
2551
2569
  const componentName$7 = getComponentName('password-field');
2552
2570
 
2553
- let overrides$2 = ``;
2554
-
2555
- const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
2571
+ const {
2572
+ host: host$3,
2573
+ inputWrapper: inputWrapper$1,
2574
+ inputElement,
2575
+ inputElementPlaceholder,
2576
+ revealButton,
2577
+ revealButtonIcon,
2578
+ label: label$2,
2579
+ requiredIndicator: requiredIndicator$1
2580
+ } = {
2556
2581
  host: () => ':host',
2557
2582
  inputWrapper: { selector: '::part(input-field)' },
2558
2583
  inputElement: { selector: '> input' },
2559
2584
  inputElementPlaceholder: { selector: '> input:placeholder-shown' },
2560
2585
  revealButton: { selector: 'vaadin-password-field-button' },
2586
+ revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
2561
2587
  label: { selector: '> label' },
2562
2588
  requiredIndicator: { selector: '::part(required-indicator)::after' },
2563
2589
  };
@@ -2570,17 +2596,20 @@ const PasswordField = compose(
2570
2596
  wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
2571
2597
  wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
2572
2598
  labelTextColor: [
2573
- { ...label$1, property: 'color' },
2599
+ { ...label$2, property: 'color' },
2574
2600
  { ...requiredIndicator$1, property: 'color' }
2575
2601
  ],
2576
- inputTextColor: [{ ...inputElement, property: 'color' }],
2602
+ inputTextColor: [
2603
+ { ...inputElement, property: 'color' },
2604
+ { ...revealButtonIcon, property: 'color' }
2605
+ ],
2577
2606
  placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
2578
2607
  fontSize: [{}, host$3],
2579
2608
  height: inputWrapper$1,
2580
2609
  padding: inputWrapper$1,
2581
2610
  pointerCursor: [
2582
2611
  { ...revealButton, property: 'cursor' },
2583
- { ...label$1, property: 'cursor' },
2612
+ { ...label$2, property: 'cursor' },
2584
2613
  { ...requiredIndicator$1, property: 'cursor' }
2585
2614
  ],
2586
2615
  }
@@ -2592,34 +2621,32 @@ const PasswordField = compose(
2592
2621
  createProxy({
2593
2622
  slots: ['suffix'],
2594
2623
  wrappedEleName: 'vaadin-password-field',
2595
- style: () => overrides$2,
2624
+ style: `
2625
+ :host {
2626
+ display: inline-block;
2627
+ }
2628
+ vaadin-password-field {
2629
+ width: 100%;
2630
+ padding: 0;
2631
+ }
2632
+ vaadin-password-field > input {
2633
+ min-height: 0;
2634
+ }
2635
+ vaadin-password-field::part(input-field) {
2636
+ background: transparent;
2637
+ }
2638
+ vaadin-password-field::part(input-field)::after {
2639
+ opacity: 0;
2640
+ }
2641
+ vaadin-password-field::before {
2642
+ height: initial;
2643
+ }
2644
+ `,
2596
2645
  excludeAttrsSync: ['tabindex'],
2597
2646
  componentName: componentName$7
2598
2647
  })
2599
2648
  );
2600
2649
 
2601
- overrides$2 = `
2602
- :host {
2603
- display: inline-block;
2604
- }
2605
- vaadin-password-field {
2606
- width: 100%;
2607
- padding: 0;
2608
- }
2609
- vaadin-password-field > input {
2610
- min-height: 0;
2611
- }
2612
- vaadin-password-field::part(input-field) {
2613
- background: transparent;
2614
- }
2615
- vaadin-password-field::part(input-field)::after {
2616
- opacity: 0;
2617
- }
2618
- vaadin-password-field::before {
2619
- height: initial;
2620
- }
2621
- `;
2622
-
2623
2650
  customElements.define(componentName$7, PasswordField);
2624
2651
 
2625
2652
  const componentName$6 = getComponentName('text-area');
@@ -2787,11 +2814,12 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
2787
2814
  }
2788
2815
  };
2789
2816
 
2790
- const { host: host$2, input, placeholder, toggle } = {
2817
+ const { host: host$2, input, placeholder, toggle, label: label$1 } = {
2791
2818
  host: { selector: () => ':host' },
2792
2819
  input: { selector: '::part(input-field)' },
2793
2820
  placeholder: { selector: '> input:placeholder-shown' },
2794
- toggle: { selector: '::part(toggle-button)' }
2821
+ toggle: { selector: '::part(toggle-button)' },
2822
+ label: { selector: '::part(label)' }
2795
2823
  };
2796
2824
 
2797
2825
  // const { slotted, selected } = {
@@ -2814,7 +2842,7 @@ const ComboBox = compose(
2814
2842
  borderStyle: input,
2815
2843
  borderRadius: input,
2816
2844
 
2817
- color: input,
2845
+ color: [label$1, input],
2818
2846
 
2819
2847
  // we apply font-size also on the host so we can set its width with em
2820
2848
  fontSize: [{}, host$2],
@@ -4364,7 +4392,7 @@ const {
4364
4392
  inputWrapper: { selector: '::part(input-field)' },
4365
4393
  phoneInput: { selector: () => 'descope-text-field' },
4366
4394
  countryCodeInput: { selector: () => 'descope-combo-box' },
4367
- label: { selector: '> label' },
4395
+ label: { selector: '::part(label)' },
4368
4396
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
4369
4397
  separator: { selector: 'descope-phone-field-internal .separator' }
4370
4398
  };
@@ -4398,7 +4426,12 @@ const PhoneField = compose(
4398
4426
 
4399
4427
  phoneInputWidth: { ...phoneInput, property: 'width' },
4400
4428
 
4401
- color: [label, requiredIndicator, {...phoneInput, property: textVars.color}, {...countryCodeInput, property: comboVars.color}],
4429
+ color: [
4430
+ label,
4431
+ requiredIndicator,
4432
+ { ...phoneInput, property: textVars.color },
4433
+ { ...countryCodeInput, property: comboVars.color }
4434
+ ],
4402
4435
 
4403
4436
  placeholderColor: {
4404
4437
  ...phoneInput,
@@ -5068,46 +5101,37 @@ const mode = {
5068
5101
 
5069
5102
  const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
5070
5103
 
5104
+ const verticalPaddingRatio = 3;
5105
+ const horizontalPaddingRatio = 2;
5106
+
5071
5107
  const button = {
5072
5108
  ...helperTheme$2,
5073
- [vars$g.width]: 'fit-content',
5074
- size: {
5075
- xs: {
5076
- [vars$g.height]: '10px',
5077
- [vars$g.fontSize]: '10px',
5078
- [vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
5079
- },
5080
- sm: {
5081
- [vars$g.height]: '20px',
5082
- [vars$g.fontSize]: '10px',
5083
- [vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
5084
- },
5085
- md: {
5086
- [vars$g.height]: '30px',
5087
- [vars$g.fontSize]: '14px',
5088
- [vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
5089
- },
5090
- lg: {
5091
- [vars$g.height]: '40px',
5092
- [vars$g.fontSize]: '20px',
5093
- [vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
5094
- },
5095
- xl: {
5096
- [vars$g.height]: '50px',
5097
- [vars$g.fontSize]: '25px',
5098
- [vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
5099
- }
5100
- },
5101
5109
 
5102
- [vars$g.borderRadius]: globalRefs$e.radius.lg,
5103
5110
  [vars$g.cursor]: 'pointer',
5111
+
5112
+ [vars$g.borderRadius]: globalRefs$e.radius.sm,
5104
5113
  [vars$g.borderWidth]: '2px',
5105
5114
  [vars$g.borderStyle]: 'solid',
5106
5115
  [vars$g.borderColor]: 'transparent',
5107
5116
 
5117
+ [vars$g.gap]: '0.25em',
5118
+ [vars$g.height]: '100%',
5119
+
5120
+ [vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
5121
+ [vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
5122
+
5123
+ size: {
5124
+ xs: { [vars$g.fontSize]: '12px' },
5125
+ sm: { [vars$g.fontSize]: '14px' },
5126
+ md: { [vars$g.fontSize]: '18px' },
5127
+ lg: { [vars$g.fontSize]: '22px' },
5128
+ xl: { [vars$g.fontSize]: '26px' }
5129
+ },
5130
+
5108
5131
  _fullWidth: {
5109
5132
  [vars$g.width]: '100%'
5110
5133
  },
5134
+
5111
5135
  _loading: {
5112
5136
  [vars$g.cursor]: 'wait'
5113
5137
  },
@@ -5119,27 +5143,30 @@ const button = {
5119
5143
  _hover: {
5120
5144
  [vars$g.backgroundColor]: helperRefs$2.dark
5121
5145
  },
5122
- _loading: {
5123
- [vars$g.backgroundColor]: helperRefs$2.main
5146
+ _active: {
5147
+ [vars$g.backgroundColor]: helperRefs$2.dark
5124
5148
  }
5125
5149
  },
5150
+
5126
5151
  outline: {
5127
5152
  [vars$g.color]: helperRefs$2.main,
5128
- [vars$g.borderColor]: helperRefs$2.main,
5153
+ [vars$g.borderColor]: 'currentColor',
5129
5154
  _hover: {
5130
5155
  [vars$g.color]: helperRefs$2.dark,
5131
- [vars$g.borderColor]: helperRefs$2.dark,
5132
- _error: {
5133
- [vars$g.color]: helperRefs$2.error
5134
- }
5156
+ },
5157
+ _active: {
5158
+ [vars$g.color]: helperRefs$2.light,
5135
5159
  }
5136
5160
  },
5161
+
5137
5162
  link: {
5138
5163
  [vars$g.color]: helperRefs$2.main,
5139
- [vars$g.lineHeight]: helperRefs$2.height,
5140
5164
  _hover: {
5141
5165
  [vars$g.color]: helperRefs$2.main,
5142
5166
  [vars$g.textDecoration]: 'underline'
5167
+ },
5168
+ _active: {
5169
+ [vars$g.color]: helperRefs$2.dark
5143
5170
  }
5144
5171
  }
5145
5172
  }