@tylertech/forge 3.2.0 → 3.3.1

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 (69) hide show
  1. package/custom-elements.json +117 -28
  2. package/dist/button/forge-button.css +6 -1
  3. package/dist/chips/forge-chips.css +1 -0
  4. package/dist/dialog/forge-dialog.css +483 -0
  5. package/dist/field/forge-field.css +2 -0
  6. package/dist/inline-message/forge-inline-message.css +2 -0
  7. package/dist/lib.js +1 -1
  8. package/dist/lib.js.map +4 -4
  9. package/dist/vscode.css-custom-data.json +20 -0
  10. package/dist/vscode.html-custom-data.json +12 -2
  11. package/esm/app-bar/app-bar/app-bar.d.ts +2 -0
  12. package/esm/app-bar/app-bar/app-bar.js +2 -0
  13. package/esm/app-bar/search/app-bar-search-adapter.js +0 -3
  14. package/esm/app-bar/search/app-bar-search.js +1 -1
  15. package/esm/autocomplete/autocomplete-adapter.d.ts +1 -1
  16. package/esm/autocomplete/autocomplete-adapter.js +8 -14
  17. package/esm/autocomplete/autocomplete-core.js +4 -1
  18. package/esm/bottom-sheet/bottom-sheet.js +1 -1
  19. package/esm/button/base/base-button-adapter.js +1 -1
  20. package/esm/button/button.d.ts +3 -0
  21. package/esm/button/button.js +4 -1
  22. package/esm/chip-field/chip-field.js +1 -1
  23. package/esm/chips/chip/chip.d.ts +1 -0
  24. package/esm/chips/chip/chip.js +2 -1
  25. package/esm/circular-progress/circular-progress.js +1 -1
  26. package/esm/deprecated/button/deprecated-button.js +1 -1
  27. package/esm/dialog/dialog.js +1 -1
  28. package/esm/field/field-adapter.d.ts +2 -0
  29. package/esm/field/field-adapter.js +4 -0
  30. package/esm/field/field-core.js +1 -0
  31. package/esm/field/field.js +1 -1
  32. package/esm/inline-message/inline-message.js +1 -1
  33. package/esm/list-dropdown/list-dropdown-utils.js +1 -0
  34. package/esm/paginator/paginator.js +1 -1
  35. package/esm/popover/popover-core.js +1 -1
  36. package/esm/select/select/select.js +1 -1
  37. package/esm/skip-link/skip-link-constants.d.ts +2 -0
  38. package/esm/skip-link/skip-link-constants.js +2 -1
  39. package/esm/skip-link/skip-link.d.ts +36 -12
  40. package/esm/skip-link/skip-link.js +55 -12
  41. package/esm/tabs/tab/tab-constants.d.ts +1 -3
  42. package/esm/tabs/tab/tab-constants.js +1 -3
  43. package/esm/tabs/tab/tab.d.ts +1 -1
  44. package/esm/tabs/tab/tab.js +1 -1
  45. package/esm/tabs/tab-bar/tab-bar-core.js +2 -1
  46. package/esm/tabs/tab-bar/tab-bar.d.ts +1 -1
  47. package/esm/tabs/tab-bar/tab-bar.js +1 -1
  48. package/esm/text-field/text-field-adapter.d.ts +8 -4
  49. package/esm/text-field/text-field-adapter.js +9 -4
  50. package/esm/text-field/text-field-constants.d.ts +2 -0
  51. package/esm/text-field/text-field-constants.js +2 -0
  52. package/esm/text-field/text-field-core.d.ts +2 -0
  53. package/esm/text-field/text-field-core.js +10 -3
  54. package/package.json +1 -1
  55. package/sass/button/_core.scss +5 -0
  56. package/sass/button/button.scss +6 -0
  57. package/sass/button/forge-button.scss +5 -0
  58. package/sass/chip-field/chip-field.scss +2 -1
  59. package/sass/chips/chip/chip.scss +1 -1
  60. package/sass/circular-progress/_core.scss +2 -2
  61. package/sass/core/styles/tokens/button/_tokens.scss +3 -1
  62. package/sass/core/styles/tokens/chips/chip/_tokens.scss +1 -0
  63. package/sass/dialog/_animations.scss +6 -6
  64. package/sass/dialog/dialog.scss +10 -10
  65. package/sass/field/_core.scss +1 -0
  66. package/sass/field/_core.theme.scss +4 -0
  67. package/sass/field/field.scss +5 -1
  68. package/sass/field/forge-field.scss +3 -1
  69. package/sass/inline-message/_core.scss +2 -0
package/sass/field/_core.scss CHANGED
@@ -83,6 +83,7 @@
83
83
  outline-style: #{token(outline-style)};
84
84
  outline-width: #{token(outline-width)};
85
85
  outline-color: #{token(outline-color, custom)};
86
+ outline-offset: calc(#{token(outline-width)} * -1);
86
87
  pointer-events: none;
87
88
  }
88
89
 
package/sass/field/_core.theme.scss CHANGED
@@ -166,3 +166,7 @@ $elevations: (
166
166
  @mixin invalid-label-color {
167
167
  @include override(label-color, theme.variable(error), value);
168
168
  }
169
+
170
+ @mixin invalid-support-text-color {
171
+ color: #{theme.variable(error)};
172
+ }
package/sass/field/field.scss CHANGED
@@ -178,6 +178,10 @@ $variants: (
178
178
  .forge-field {
179
179
  @include core.theme('error');
180
180
  @include core.invalid-label-color;
181
+
182
+ .support-text {
183
+ @include core.invalid-support-text-color;
184
+ }
181
185
  }
182
186
  }
183
187
 
@@ -676,7 +680,7 @@ forge-focus-indicator {
676
680
  @include focus-indicator.provide-theme(
677
681
  (
678
682
  color: #{token(focus-indicator-color, custom)},
679
- outward-offset: 0px,
683
+ outward-offset: calc(#{token(outline-width)} * -1),
680
684
  shape: #{token(shape)},
681
685
  width: #{token(focus-indicator-width)}
682
686
  )
package/sass/field/forge-field.scss CHANGED
@@ -46,6 +46,7 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
46
46
  outline-style: #{token(outline-style)};
47
47
  outline-width: #{token(outline-width)};
48
48
  outline-color: #{theme.variable(outline-low)};
49
+ outline-offset: calc(#{token(outline-width)} * -1);
49
50
 
50
51
  background: #{token(background)};
51
52
 
@@ -329,7 +330,8 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
329
330
  &.forge-field:has(#{$_input-selector}:focus) {
330
331
  @include focus-indicator.provide-theme(
331
332
  (
332
- color: #{theme.variable(error)}
333
+ color: #{theme.variable(error)},
334
+ outward-offset: calc(#{token(outline-width)} * -1)
333
335
  )
334
336
  );
335
337
  }
package/sass/inline-message/_core.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  border-color: #{token(border-color)};
25
25
 
26
26
  display: flex;
27
+ align-items: center;
27
28
  gap: #{token(icon-gap)};
28
29
  box-sizing: border-box;
29
30
  padding-inline: #{token(padding-inline)};
@@ -42,4 +43,5 @@
42
43
 
43
44
  @mixin icon {
44
45
  color: #{token(icon-color)};
46
+ align-self: start;
45
47
  }