@tylertech/forge 3.3.0 → 3.3.2

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 (63) hide show
  1. package/custom-elements.json +28 -7
  2. package/dist/button/forge-button.css +6 -1
  3. package/dist/card/forge-card.css +1 -1
  4. package/dist/dialog/forge-dialog.css +483 -0
  5. package/dist/expansion-panel/forge-expansion-panel.css +0 -1
  6. package/dist/lib.js +1 -1
  7. package/dist/lib.js.map +4 -4
  8. package/dist/scaffold/forge-scaffold.css +2 -2
  9. package/dist/vscode.css-custom-data.json +15 -0
  10. package/dist/vscode.html-custom-data.json +2 -2
  11. package/esm/accordion/accordion-constants.d.ts +3 -0
  12. package/esm/accordion/accordion-constants.js +5 -1
  13. package/esm/accordion/accordion-core.js +5 -2
  14. package/esm/accordion/accordion.d.ts +2 -0
  15. package/esm/accordion/accordion.js +2 -0
  16. package/esm/app-bar/search/app-bar-search-adapter.js +0 -3
  17. package/esm/app-bar/search/app-bar-search.js +1 -1
  18. package/esm/autocomplete/autocomplete-adapter.d.ts +1 -1
  19. package/esm/autocomplete/autocomplete-adapter.js +7 -7
  20. package/esm/autocomplete/autocomplete-core.js +4 -1
  21. package/esm/bottom-sheet/bottom-sheet.js +1 -1
  22. package/esm/button/button.d.ts +3 -0
  23. package/esm/button/button.js +4 -1
  24. package/esm/card/card.js +1 -1
  25. package/esm/chip-field/chip-field-adapter.d.ts +2 -0
  26. package/esm/chip-field/chip-field-adapter.js +3 -0
  27. package/esm/chip-field/chip-field-core.js +4 -1
  28. package/esm/deprecated/button/deprecated-button.js +1 -1
  29. package/esm/dialog/dialog.js +1 -1
  30. package/esm/expansion-panel/expansion-panel-adapter.d.ts +5 -0
  31. package/esm/expansion-panel/expansion-panel-adapter.js +7 -0
  32. package/esm/expansion-panel/expansion-panel-constants.d.ts +2 -0
  33. package/esm/expansion-panel/expansion-panel-constants.js +2 -0
  34. package/esm/expansion-panel/expansion-panel-core.d.ts +2 -1
  35. package/esm/expansion-panel/expansion-panel-core.js +9 -3
  36. package/esm/expansion-panel/expansion-panel.d.ts +7 -1
  37. package/esm/expansion-panel/expansion-panel.js +14 -2
  38. package/esm/field/field-adapter.d.ts +1 -0
  39. package/esm/field/field-adapter.js +7 -0
  40. package/esm/field/field-constants.d.ts +1 -0
  41. package/esm/field/field-constants.js +1 -0
  42. package/esm/field/field.js +1 -1
  43. package/esm/list-dropdown/list-dropdown-utils.js +1 -0
  44. package/esm/popover/popover-core.js +1 -1
  45. package/esm/scaffold/scaffold.js +1 -1
  46. package/esm/text-field/text-field-component-delegate.js +0 -3
  47. package/esm/toolbar/toolbar.js +1 -1
  48. package/package.json +1 -1
  49. package/sass/button/_core.scss +5 -0
  50. package/sass/button/button.scss +6 -0
  51. package/sass/button/forge-button.scss +5 -0
  52. package/sass/core/styles/tokens/button/_tokens.scss +3 -1
  53. package/sass/core/styles/tokens/card/_tokens.scss +1 -1
  54. package/sass/core/styles/tokens/scaffold/_tokens.scss +1 -1
  55. package/sass/dialog/_animations.scss +6 -6
  56. package/sass/dialog/dialog.scss +10 -10
  57. package/sass/expansion-panel/_core.scss +0 -2
  58. package/sass/expansion-panel/expansion-panel.scss +6 -0
  59. package/sass/expansion-panel/forge-expansion-panel.scss +2 -0
  60. package/sass/field/_core.theme.scss +4 -0
  61. package/sass/field/field.scss +6 -1
  62. package/sass/scaffold/_core.scss +1 -1
  63. package/sass/scaffold/forge-scaffold.scss +1 -1
package/sass/core/styles/tokens/scaffold/_tokens.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  $tokens: (
10
10
  height: utils.module-val(scaffold, height, 100%),
11
11
  width: utils.module-val(scaffold, width, 100%),
12
- overflow: utils.module-val(scaffold, overflow, hidden),
12
+ overflow: utils.module-val(scaffold, overflow, initial),
13
13
  body-position: utils.module-val(scaffold, body-position, relative)
14
14
  ) !default;
15
15
 
package/sass/dialog/_animations.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  // Zoom (default)
10
10
  //
11
11
 
12
- @keyframes zoom-in {
12
+ @keyframes forge-dialog-zoom-in {
13
13
  from {
14
14
  opacity: #{token(zoom-opacity)};
15
15
  scale: #{token(zoom-scale)};
@@ -20,7 +20,7 @@
20
20
  }
21
21
  }
22
22
 
23
- @keyframes zoom-out {
23
+ @keyframes forge-dialog-zoom-out {
24
24
  from {
25
25
  opacity: 1;
26
26
  scale: 1;
@@ -35,7 +35,7 @@
35
35
  // Fade
36
36
  //
37
37
 
38
- @keyframes fade-in {
38
+ @keyframes forge-dialog-fade-in {
39
39
  from {
40
40
  opacity: #{token(fade-opacity)};
41
41
  }
@@ -44,7 +44,7 @@
44
44
  }
45
45
  }
46
46
 
47
- @keyframes fade-out {
47
+ @keyframes forge-dialog-fade-out {
48
48
  from {
49
49
  opacity: 1;
50
50
  }
@@ -57,7 +57,7 @@
57
57
  // Slide
58
58
  //
59
59
 
60
- @keyframes slide-in {
60
+ @keyframes forge-dialog-slide-in {
61
61
  from {
62
62
  opacity: #{token(slide-opacity)};
63
63
  translate: #{token(slide-translate)};
@@ -69,7 +69,7 @@
69
69
  }
70
70
  }
71
71
 
72
- @keyframes slide-out {
72
+ @keyframes forge-dialog-slide-out {
73
73
  from {
74
74
  opacity: 1;
75
75
  translate: 0 0;
package/sass/dialog/dialog.scss CHANGED
@@ -173,10 +173,10 @@ $can-animate: '[visible]:not([animation-type=none])';
173
173
  :host(#{$can-animate}:is(:not([animation-type]), [animation-type='zoom'])) {
174
174
  dialog.forge-dialog[open] {
175
175
  .surface {
176
- animation-name: zoom-in;
176
+ animation-name: forge-dialog-zoom-in;
177
177
 
178
178
  &.exiting {
179
- animation-name: zoom-out;
179
+ animation-name: forge-dialog-zoom-out;
180
180
  }
181
181
  }
182
182
  }
@@ -186,10 +186,10 @@ $can-animate: '[visible]:not([animation-type=none])';
186
186
  :host(#{$can-animate}[animation-type='fade']) {
187
187
  dialog.forge-dialog[open] {
188
188
  .surface {
189
- animation-name: fade-in;
189
+ animation-name: forge-dialog-fade-in;
190
190
 
191
191
  &.exiting {
192
- animation-name: fade-out;
192
+ animation-name: forge-dialog-fade-out;
193
193
  }
194
194
  }
195
195
  }
@@ -199,10 +199,10 @@ $can-animate: '[visible]:not([animation-type=none])';
199
199
  :host(#{$can-animate}[animation-type='slide']) {
200
200
  dialog.forge-dialog[open] {
201
201
  .surface {
202
- animation-name: slide-in;
202
+ animation-name: forge-dialog-slide-in;
203
203
 
204
204
  &.exiting {
205
- animation-name: slide-out;
205
+ animation-name: forge-dialog-slide-out;
206
206
  }
207
207
  }
208
208
  }
@@ -252,10 +252,10 @@ $can-animate: '[visible]:not([animation-type=none])';
252
252
  }
253
253
 
254
254
  .surface {
255
- animation-name: slide-in;
255
+ animation-name: forge-dialog-slide-in;
256
256
 
257
257
  &.exiting {
258
- animation-name: slide-out;
258
+ animation-name: forge-dialog-slide-out;
259
259
  }
260
260
  }
261
261
  }
@@ -358,10 +358,10 @@ $can-animate: '[visible]:not([animation-type=none])';
358
358
  @layer media {
359
359
  @media (prefers-reduced-motion: reduce) {
360
360
  .surface {
361
- animation-name: fade-in;
361
+ animation-name: forge-dialog-fade-in;
362
362
 
363
363
  &.exiting {
364
- animation-name: fade-out;
364
+ animation-name: forge-dialog-fade-out;
365
365
  }
366
366
  }
367
367
  }
package/sass/expansion-panel/_core.scss CHANGED
@@ -26,7 +26,6 @@
26
26
  transition-timing-function: #{token(animation-easing)};
27
27
 
28
28
  min-height: 0;
29
- overflow: hidden;
30
29
 
31
30
  opacity: 0;
32
31
  }
@@ -34,7 +33,6 @@
34
33
  @mixin inner {
35
34
  display: grid;
36
35
  grid-template-rows: 1fr;
37
- overflow: hidden;
38
36
  }
39
37
 
40
38
  @mixin orientation-horizontal-base {
package/sass/expansion-panel/expansion-panel.scss CHANGED
@@ -51,6 +51,12 @@
51
51
  // Open
52
52
  //
53
53
 
54
+ :host(:not([open])) {
55
+ .inner {
56
+ overflow: hidden;
57
+ }
58
+ }
59
+
54
60
  :host([open]) {
55
61
  .content {
56
62
  @include open-base;
package/sass/expansion-panel/forge-expansion-panel.scss CHANGED
@@ -23,6 +23,8 @@
23
23
 
24
24
  &__content {
25
25
  @include core.inner;
26
+
27
+ overflow: hidden;
26
28
  }
27
29
 
28
30
  @media (prefers-reduced-motion: reduce) {
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
@@ -146,7 +146,8 @@ $variants: (
146
146
 
147
147
  @if $density == 'extra-small' {
148
148
  :host(#{map.get($label-positions, inset)}#{$selector}) {
149
- .label {
149
+ .label,
150
+ .label::before {
150
151
  @include utils.visually-hidden;
151
152
  }
152
153
 
@@ -178,6 +179,10 @@ $variants: (
178
179
  .forge-field {
179
180
  @include core.theme('error');
180
181
  @include core.invalid-label-color;
182
+
183
+ .support-text {
184
+ @include core.invalid-support-text-color;
185
+ }
181
186
  }
182
187
  }
183
188
 
package/sass/scaffold/_core.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  width: #{token(width)};
53
53
  min-width: 0;
54
54
  min-height: 0;
55
- overflow: hidden;
55
+ overflow: #{token(overflow)};
56
56
  }
57
57
 
58
58
  @mixin footer {
package/sass/scaffold/forge-scaffold.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  grid-area: body;
34
34
  min-width: 0;
35
35
  min-height: 0;
36
- overflow: hidden;
36
+ overflow: #{core.token(overflow)};
37
37
 
38
38
  > * {
39
39
  @include core.scrollable;