@tylertech/forge 3.3.5 → 3.4.0

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 (87) hide show
  1. package/custom-elements.json +388 -98
  2. package/dist/app-bar/forge-app-bar.css +2 -17
  3. package/dist/field/forge-field.css +4 -17
  4. package/dist/forge.css +12 -0
  5. package/dist/icon-button/forge-icon-button.css +1 -0
  6. package/dist/lib.js +1 -1
  7. package/dist/lib.js.map +3 -3
  8. package/dist/toolbar/forge-toolbar.css +2 -1
  9. package/dist/typography/forge-typography.css +12 -0
  10. package/dist/vscode.css-custom-data.json +15 -15
  11. package/dist/vscode.html-custom-data.json +159 -28
  12. package/esm/app-bar/app-bar/app-bar.d.ts +1 -0
  13. package/esm/app-bar/app-bar/app-bar.js +2 -1
  14. package/esm/autocomplete/autocomplete-adapter.js +2 -1
  15. package/esm/calendar/calendar-core.d.ts +1 -1
  16. package/esm/calendar/calendar-core.js +1 -1
  17. package/esm/calendar/calendar-dropdown/calendar-dropdown.js +1 -1
  18. package/esm/checkbox/checkbox.d.ts +3 -3
  19. package/esm/checkbox/checkbox.js +1 -1
  20. package/esm/chip-field/chip-field.js +1 -1
  21. package/esm/deprecated/icon-button/deprecated-icon-button.js +1 -1
  22. package/esm/dialog/dialog-core.d.ts +1 -0
  23. package/esm/dialog/dialog-core.js +10 -6
  24. package/esm/dialog/dialog.d.ts +4 -4
  25. package/esm/field/base/with-base-field.js +2 -2
  26. package/esm/field/field-adapter.d.ts +4 -4
  27. package/esm/field/field-adapter.js +4 -12
  28. package/esm/field/field-constants.d.ts +1 -0
  29. package/esm/field/field-constants.js +2 -1
  30. package/esm/field/field-core.d.ts +2 -0
  31. package/esm/field/field-core.js +13 -3
  32. package/esm/field/field.d.ts +1 -0
  33. package/esm/field/field.js +3 -2
  34. package/esm/icon/icon.d.ts +26 -9
  35. package/esm/icon/icon.js +3 -2
  36. package/esm/icon-button/icon-button.d.ts +1 -0
  37. package/esm/icon-button/icon-button.js +2 -1
  38. package/esm/label/label.d.ts +1 -1
  39. package/esm/popover/popover-adapter.js +8 -1
  40. package/esm/radio/radio/radio.d.ts +2 -2
  41. package/esm/radio/radio/radio.js +1 -1
  42. package/esm/select/core/base-select-adapter.js +5 -0
  43. package/esm/skip-link/skip-link.d.ts +1 -1
  44. package/esm/skip-link/skip-link.js +1 -1
  45. package/esm/switch/switch.d.ts +2 -2
  46. package/esm/switch/switch.js +1 -1
  47. package/esm/tabs/tab/tab-adapter.d.ts +3 -0
  48. package/esm/tabs/tab/tab-adapter.js +5 -0
  49. package/esm/tabs/tab/tab-core.d.ts +3 -0
  50. package/esm/tabs/tab/tab-core.js +5 -0
  51. package/esm/tabs/tab/tab.d.ts +6 -4
  52. package/esm/tabs/tab/tab.js +6 -5
  53. package/esm/tabs/tab-bar/tab-bar-core.js +1 -1
  54. package/esm/tabs/tab-bar/tab-bar.d.ts +4 -2
  55. package/esm/tabs/tab-bar/tab-bar.js +3 -3
  56. package/esm/time-picker/time-picker-adapter.d.ts +2 -2
  57. package/esm/time-picker/time-picker-adapter.js +44 -30
  58. package/esm/time-picker/time-picker-core.js +1 -1
  59. package/esm/time-picker/time-picker.d.ts +125 -28
  60. package/esm/time-picker/time-picker.js +0 -27
  61. package/esm/toolbar/toolbar.d.ts +1 -0
  62. package/esm/toolbar/toolbar.js +2 -1
  63. package/esm/view-switcher/view-switcher.d.ts +1 -1
  64. package/package.json +4 -4
  65. package/sass/app-bar/app-bar/_core.scss +1 -1
  66. package/sass/checkbox/_core.scss +1 -1
  67. package/sass/core/styles/_utils.scss +1 -1
  68. package/sass/core/styles/theme/_utils.scss +1 -1
  69. package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss +1 -0
  70. package/sass/core/styles/tokens/icon-button/_tokens.scss +1 -0
  71. package/sass/core/styles/tokens/list/list/_tokens.scss +2 -1
  72. package/sass/core/styles/tokens/tabs/tab/_tokens.scss +6 -6
  73. package/sass/core/styles/tokens/toolbar/_tokens.scss +2 -1
  74. package/sass/core/styles/tokens/typography/_tokens.label.scss +10 -0
  75. package/sass/field/_core.animation.scss +0 -20
  76. package/sass/field/_core.layout.scss +3 -8
  77. package/sass/field/_core.scss +1 -0
  78. package/sass/field/_core.slotted.scss +4 -8
  79. package/sass/field/field.scss +8 -8
  80. package/sass/icon-button/_core.scss +1 -0
  81. package/sass/radio/index.scss +1 -1
  82. package/sass/radio/radio/_core.scss +1 -1
  83. package/sass/switch/_core.scss +1 -1
  84. package/sass/tabs/tab/_core.scss +4 -19
  85. package/sass/tabs/tab/tab.scss +1 -25
  86. package/sass/tabs/tab-bar/_core.scss +1 -0
  87. package/sass/toolbar/_core.scss +1 -1
package/dist/app-bar/forge-app-bar.css CHANGED
@@ -24,22 +24,6 @@
24
24
  opacity: 100%;
25
25
  }
26
26
  }
27
- @keyframes float-in-input-animation {
28
- from {
29
- translate: 0;
30
- }
31
- to {
32
- translate: 0 calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8));
33
- }
34
- }
35
- @keyframes float-out-input-animation {
36
- from {
37
- translate: 0 calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8));
38
- }
39
- to {
40
- translate: 0;
41
- }
42
- }
43
27
  @keyframes multiline-inset-label-background-animation {
44
28
  from {
45
29
  opacity: 0%;
@@ -58,6 +42,7 @@
58
42
  --_app-bar-logo-gap: var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));
59
43
  --_app-bar-logo-font-size: var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));
60
44
  --_app-bar-title-padding: var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));
45
+ --_app-bar-columns: var(--forge-app-bar-columns, 1fr 1fr 1fr);
61
46
  --_app-bar-transition-duration: var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));
62
47
  --_app-bar-transition-timing: var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
63
48
  --forge-theme-primary: var(--_app-bar-foreground);
@@ -84,7 +69,7 @@
84
69
  width: 100%;
85
70
  display: grid;
86
71
  align-items: center;
87
- grid-template-columns: 1fr 1fr 1fr;
72
+ grid-template-columns: var(--_app-bar-columns);
88
73
  height: var(--_app-bar-height);
89
74
  padding-inline: var(--_app-bar-row-padding);
90
75
  display: grid;
package/dist/field/forge-field.css CHANGED
@@ -24,22 +24,6 @@
24
24
  opacity: 100%;
25
25
  }
26
26
  }
27
- @keyframes float-in-input-animation {
28
- from {
29
- translate: 0;
30
- }
31
- to {
32
- translate: 0 calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8));
33
- }
34
- }
35
- @keyframes float-out-input-animation {
36
- from {
37
- translate: 0 calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8));
38
- }
39
- to {
40
- translate: 0;
41
- }
42
- }
43
27
  @keyframes multiline-inset-label-background-animation {
44
28
  from {
45
29
  opacity: 0%;
@@ -95,6 +79,9 @@
95
79
  font: inherit;
96
80
  font-size: var(--_field-font-size);
97
81
  text-overflow: ellipsis;
82
+ padding-block-start: 0;
83
+ padding-block-end: 0;
84
+ transition: padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);
98
85
  display: flex;
99
86
  block-size: var(--_field-height);
100
87
  inline-size: 100%;
@@ -302,7 +289,7 @@
302
289
  }
303
290
  .forge-field:has(textarea) textarea {
304
291
  padding-block-start: calc((var(--_field-height) - var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)))) / 2);
305
- padding-block-end: calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) + 8px);
292
+ padding-block-end: calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) + (var(--_field-height) - var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)))) / 2);
306
293
  resize: vertical;
307
294
  block-size: fit-content;
308
295
  }
package/dist/forge.css CHANGED
@@ -1446,6 +1446,18 @@ body {
1446
1446
  text-decoration: var(--forge-typography-label2-text-decoration, inherit);
1447
1447
  }
1448
1448
 
1449
+ .forge-typography--label3 {
1450
+ -moz-osx-font-smoothing: grayscale;
1451
+ -webkit-font-smoothing: antialiased;
1452
+ font-family: var(--forge-typography-label3-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
1453
+ font-size: var(--forge-typography-label3-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.875)));
1454
+ font-weight: var(--forge-typography-label3-font-weight, 400);
1455
+ line-height: var(--forge-typography-label3-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));
1456
+ letter-spacing: var(--forge-typography-label3-letter-spacing, 0.0089285714em);
1457
+ text-transform: var(--forge-typography-label3-text-transform, inherit);
1458
+ text-decoration: var(--forge-typography-label3-text-decoration, inherit);
1459
+ }
1460
+
1449
1461
  .forge-typography--button {
1450
1462
  -moz-osx-font-smoothing: grayscale;
1451
1463
  -webkit-font-smoothing: antialiased;
package/dist/icon-button/forge-icon-button.css CHANGED
@@ -40,6 +40,7 @@
40
40
  --_icon-button-density-medium-size: var(--forge-icon-button-density-medium-size, 36px);
41
41
  --_icon-button-density-medium-padding: var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));
42
42
  --_icon-button-density-large-size: var(--forge-icon-button-density-large-size, var(--_icon-button-size));
43
+ --_icon-button-toggle-on-background-color: var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));
43
44
  --_icon-button-toggle-on-icon-color: var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));
44
45
  --_icon-button-outlined-toggle-on-background-color: var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));
45
46
  --_icon-button-outlined-toggle-on-icon-color: var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));