@tylertech/forge 3.4.0 → 3.4.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 (23) hide show
  1. package/custom-elements.json +34 -16
  2. package/dist/lib.js +1 -1
  3. package/dist/lib.js.map +3 -3
  4. package/dist/radio/forge-radio.css +16 -21
  5. package/dist/vscode.css-custom-data.json +2 -17
  6. package/dist/vscode.html-custom-data.json +2 -2
  7. package/esm/button-area/button-area.js +1 -1
  8. package/esm/calendar/calendar.js +1 -1
  9. package/esm/date-range-picker/date-range-picker.d.ts +5 -0
  10. package/esm/date-range-picker/date-range-picker.js +5 -0
  11. package/esm/field/field.js +1 -1
  12. package/esm/radio/radio/radio.d.ts +1 -4
  13. package/esm/radio/radio/radio.js +2 -5
  14. package/esm/text-field/text-field-core.js +7 -2
  15. package/esm/text-field/text-field.d.ts +1 -0
  16. package/esm/text-field/text-field.js +3 -0
  17. package/esm/tooltip/tooltip.js +1 -1
  18. package/package.json +1 -1
  19. package/sass/core/styles/tokens/field/_tokens.scss +2 -2
  20. package/sass/core/styles/tokens/radio/_tokens.scss +2 -5
  21. package/sass/radio/forge-radio.scss +3 -3
  22. package/sass/radio/radio/_core.scss +14 -20
  23. package/sass/utils/_mixins.scss +1 -1
package/esm/tooltip/tooltip.js CHANGED
@@ -15,7 +15,7 @@ import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
15
15
  import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
16
16
  import { tryDismiss } from '../core/utils/dismissible-stack';
17
17
  const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
18
- const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
18
+ const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
19
19
  /**
20
20
  * @tag forge-tooltip
21
21
  *
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tylertech/forge",
3
3
  "description": "Tyler Forge™ Web Components library",
4
- "version": "3.4.0",
4
+ "version": "3.4.1",
5
5
  "author": "Tyler Technologies, Inc.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/sass/core/styles/tokens/field/_tokens.scss CHANGED
@@ -51,8 +51,8 @@ $tokens: (
51
51
  popover-icon-open-rotation: utils.module-val(field, popover-icon-open-rotation, 180deg),
52
52
  surface-animation-duration: utils.module-val(field, surface-animation-duration, animation.variable(duration-short4)),
53
53
  surface-animation-timing: utils.module-val(field, surface-animation-timing, animation.variable(easing-standard)),
54
- floating-animation-duration: utils.module-val(field, floating-animation-duration, animation.variable(duration-short4)),
55
- floating-animation-timing: utils.module-val(field, floating-animation-timing, animation.variable(easing-decelerate)),
54
+ floating-animation-duration: utils.module-val(field, floating-animation-duration, animation.variable(duration-short2)),
55
+ floating-animation-timing: utils.module-val(field, floating-animation-timing, animation.variable(easing-linear)),
56
56
  focus-indicator-width: utils.module-val(field, focus-indicator-width, focus-indicator.get(width)),
57
57
  disabled-opacity: utils.module-val(field, disabled-opacity, theme.emphasis(medium-low)),
58
58
  disabled-background: utils.module-val(field, disabled-background, theme.variable(surface-container-low)),
package/sass/core/styles/tokens/radio/_tokens.scss CHANGED
@@ -15,7 +15,7 @@ $tokens: (
15
15
  primary-color: utils.module-val(radio, primary-color, theme.variable(tertiary)),
16
16
  inactive-color: utils.module-val(radio, inactive-color, theme.variable(surface-container-high)),
17
17
  size: utils.module-val(radio, size, 20px),
18
- mark-size: utils.module-val(radio, mark-size, 12px),
18
+ mark-size: utils.module-val(radio, mark-size, 75%),
19
19
  state-layer-size: utils.module-val(radio, state-layer-size, 40px),
20
20
  state-layer-dense-size: utils.module-val(radio, state-layer-dense-size, 24px),
21
21
  // Radio
@@ -29,10 +29,7 @@ $tokens: (
29
29
  // Mark
30
30
  mark-width: utils.module-ref(radio, mark-width, mark-size),
31
31
  mark-height: utils.module-ref(radio, mark-height, mark-size),
32
- mark-unchecked-color: utils.module-ref(radio, mark-unchecked-color, inactive-color),
33
- mark-checked-color: utils.module-ref(radio, mark-checked-color, primary-color),
34
- mark-unchecked-background: utils.module-val(radio, mark-unchecked-background, transparent),
35
- mark-checked-background: utils.module-val(radio, mark-checked-background, transparent),
32
+ mark-color: utils.module-ref(radio, mark-color, primary-color),
36
33
  // Label
37
34
  gap: utils.module-val(radio, gap, 0),
38
35
  justify: utils.module-val(radio, justify, start),
package/sass/radio/forge-radio.scss CHANGED
@@ -71,12 +71,12 @@
71
71
  @include core.background-checked;
72
72
 
73
73
  // We use a radial gradient to create the circular mark, applying blur to anti-alias the edge
74
- $mark-radius: calc(#{core.token(mark-size)} / 2);
74
+ $mark-radius: calc(#{core.token(mark-size)} / 1.4);
75
75
  $mark-blur: 0.2px;
76
76
  background: radial-gradient(
77
77
  circle,
78
- #{core.token(mark-checked-color)} 0%,
79
- #{core.token(mark-checked-color)} calc(#{$mark-radius} - #{$mark-blur}),
78
+ #{core.token(mark-color)} 0%,
79
+ #{core.token(mark-color)} calc(#{$mark-radius} - #{$mark-blur}),
80
80
  transparent calc(#{$mark-radius} + #{$mark-blur}),
81
81
  transparent 100%
82
82
  );
package/sass/radio/radio/_core.scss CHANGED
@@ -57,11 +57,7 @@
57
57
 
58
58
  @mixin background {
59
59
  position: relative;
60
- align-items: center;
61
- justify-content: center;
62
-
63
- display: flex;
64
-
60
+ display: inline block;
65
61
  overflow: hidden;
66
62
 
67
63
  transition-duration: #{token(animation-duration)};
@@ -84,22 +80,23 @@
84
80
 
85
81
  position: absolute;
86
82
 
87
- // Using containment here should mitigate the hit to performance from animating the size
88
- contain: strict;
89
-
83
+ top: 50%;
84
+ left: 50%;
85
+ transform: translate(-50%, -50%);
86
+ transform-origin: top left;
90
87
  transition-duration: #{token(animation-duration)};
91
88
  transition-delay: #{token(animation-delay)};
92
89
  transition-timing-function: #{token(animation-timing-function)};
93
- transition-property: inline-size, block-size, border-color;
90
+ transition-property: opacity, scale;
94
91
 
95
92
  border-radius: #{token(shape)};
96
- border-width: calc(#{token(mark-height)} / 2) calc(#{token(mark-width)} / 2);
97
- border-color: #{token(mark-unchecked-color)};
98
- border-style: solid;
99
- inline-size: calc(#{token(width)} - 2 * #{token(border-width)});
100
- block-size: calc(#{token(height)} - 2 * #{token(border-width)});
93
+ inline-size: #{token(mark-width)};
94
+ block-size: #{token(mark-height)};
101
95
 
102
- background: #{token(mark-unchecked-background)};
96
+ background: #{token(mark-color)};
97
+
98
+ scale: 0.5;
99
+ opacity: 0;
103
100
  }
104
101
  }
105
102
 
@@ -107,11 +104,8 @@
107
104
  border-color: #{token(checked-border-color)};
108
105
 
109
106
  &::after {
110
- border-color: #{token(mark-checked-color)};
111
- inline-size: 0px;
112
- block-size: 0px;
113
-
114
- background: #{token(mark-checked-background)};
107
+ scale: 1;
108
+ opacity: 1;
115
109
  }
116
110
  }
117
111
 
package/sass/utils/_mixins.scss CHANGED
@@ -37,7 +37,7 @@
37
37
  margin: -1px;
38
38
  overflow: hidden;
39
39
  padding: 0;
40
- position: absolute;
40
+ position: fixed;
41
41
  width: 1px;
42
42
  outline: 0;
43
43
  -webkit-appearance: none;