@tylertech/forge 3.4.0 → 3.4.2

package/sass/core/styles/tokens/radio/_tokens.scss

@@ -15,7 +15,7 @@ $tokens: (
   primary-color: utils.module-val(radio, primary-color, theme.variable(tertiary)),
   inactive-color: utils.module-val(radio, inactive-color, theme.variable(surface-container-high)),
   size: utils.module-val(radio, size, 20px),
-  mark-size: utils.module-val(radio, mark-size, 12px),
+  mark-size: utils.module-val(radio, mark-size, 75%),
   state-layer-size: utils.module-val(radio, state-layer-size, 40px),
   state-layer-dense-size: utils.module-val(radio, state-layer-dense-size, 24px),
   // Radio
@@ -29,10 +29,7 @@ $tokens: (
   // Mark
   mark-width: utils.module-ref(radio, mark-width, mark-size),
   mark-height: utils.module-ref(radio, mark-height, mark-size),
-  mark-unchecked-color: utils.module-ref(radio, mark-unchecked-color, inactive-color),
-  mark-checked-color: utils.module-ref(radio, mark-checked-color, primary-color),
-  mark-unchecked-background: utils.module-val(radio, mark-unchecked-background, transparent),
-  mark-checked-background: utils.module-val(radio, mark-checked-background, transparent),
+  mark-color: utils.module-ref(radio, mark-color, primary-color),
   // Label
   gap: utils.module-val(radio, gap, 0),
   justify: utils.module-val(radio, justify, start),

package/sass/divider/_core.scss

@@ -9,7 +9,6 @@
 
 @mixin host {
   display: block;
-  contain: content;
   margin: #{token(margin)};
 }
 

package/sass/drawer/base/_core.scss

@@ -60,8 +60,7 @@
 }
 
 @mixin host() {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   box-sizing: border-box;
   height: 100%;
   overflow: hidden !important; // Using important to ensure that it overrides the scaffold overflow style

package/sass/drawer/drawer/drawer.scss

@@ -25,13 +25,7 @@
 
 @include base-core.core-styles;
 
-//
-// Safari fix for triggering reflow after transition completes (as of Safari 14)
-//
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    :host([open]) {
-      transform: translateZ(0);
-    }
-  }
+:host([open]) {
+  // Safari fix for triggering reflow after transition completes (as of Safari 17.6)
+  transform: translateZ(0);
 }

package/sass/drawer/mini-drawer/_core.scss

@@ -27,6 +27,7 @@
 @mixin root() {
   z-index: #{elevation.z-index-variable(surface)};
   height: 100%;
+  min-width: #{token(min-width)};
 }
 
 @mixin hover() {

package/sass/linear-progress/_core.scss

@@ -13,8 +13,11 @@
   position: relative;
   min-inline-size: 80px;
   block-size: #{token(track-height)};
-  content-visibility: auto;
+
+  // `contain` and `content-visibility` are performance optimizations important here because progress indicators
+  // are often used when a CPU=intensive task is underway so it's especially important to minimize their CPU consumption.
   contain: strict;
+  content-visibility: auto;
 }
 
 @mixin progress {

package/sass/radio/forge-radio.scss

@@ -71,12 +71,12 @@
       @include core.background-checked;
 
       // We use a radial gradient to create the circular mark, applying blur to anti-alias the edge
-      $mark-radius: calc(#{core.token(mark-size)} / 2);
+      $mark-radius: calc(#{core.token(mark-size)} / 1.4);
       $mark-blur: 0.2px;
       background: radial-gradient(
         circle,
-        #{core.token(mark-checked-color)} 0%,
-        #{core.token(mark-checked-color)} calc(#{$mark-radius} - #{$mark-blur}),
+        #{core.token(mark-color)} 0%,
+        #{core.token(mark-color)} calc(#{$mark-radius} - #{$mark-blur}),
         transparent calc(#{$mark-radius} + #{$mark-blur}),
         transparent 100%
       );

package/sass/radio/radio/_core.scss

@@ -57,11 +57,7 @@
 
 @mixin background {
   position: relative;
-  align-items: center;
-  justify-content: center;
-
-  display: flex;
-
+  display: inline block;
   overflow: hidden;
 
   transition-duration: #{token(animation-duration)};
@@ -84,22 +80,23 @@
 
     position: absolute;
 
-    // Using containment here should mitigate the hit to performance from animating the size
-    contain: strict;
-
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transform-origin: top left;
     transition-duration: #{token(animation-duration)};
     transition-delay: #{token(animation-delay)};
     transition-timing-function: #{token(animation-timing-function)};
-    transition-property: inline-size, block-size, border-color;
+    transition-property: opacity, scale;
 
     border-radius: #{token(shape)};
-    border-width: calc(#{token(mark-height)} / 2) calc(#{token(mark-width)} / 2);
-    border-color: #{token(mark-unchecked-color)};
-    border-style: solid;
-    inline-size: calc(#{token(width)} - 2 * #{token(border-width)});
-    block-size: calc(#{token(height)} - 2 * #{token(border-width)});
+    inline-size: #{token(mark-width)};
+    block-size: #{token(mark-height)};
 
-    background: #{token(mark-unchecked-background)};
+    background: #{token(mark-color)};
+
+    scale: 0.5;
+    opacity: 0;
   }
 }
 
@@ -107,11 +104,8 @@
   border-color: #{token(checked-border-color)};
 
   &::after {
-    border-color: #{token(mark-checked-color)};
-    inline-size: 0px;
-    block-size: 0px;
-
-    background: #{token(mark-checked-background)};
+    scale: 1;
+    opacity: 1;
   }
 }
 

package/sass/split-view/split-view/_mixins.scss

@@ -28,7 +28,6 @@
   height: 100%;
   width: 100%;
   overflow: hidden;
-  contain: paint size;
 }
 
 @mixin base() {

package/sass/split-view/split-view-panel/_mixins.scss

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:string';
 @use '../../core/styles/animation';
 @use '../../core/styles/theme';
 @use './variables';
@@ -132,7 +133,6 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  contain: paint size;
 }
 
 @mixin base-horizontal() {
@@ -213,7 +213,7 @@
 @mixin closing-animation($direction: right) {
   @include animating-position($direction);
 
-  $animation-name: unique-id;
+  $animation-name: string.unique-id();
 
   animation-name: $animation-name;
   animation-duration: #{animation.variable(duration-medium2)};

package/sass/toolbar/_core.scss

@@ -14,7 +14,6 @@
 
 @mixin host {
   display: block;
-  contain: layout;
 }
 
 @mixin base {

package/sass/utils/_mixins.scss

@@ -37,7 +37,7 @@
   margin: -1px;
   overflow: hidden;
   padding: 0;
-  position: absolute;
+  position: fixed;
   width: 1px;
   outline: 0;
   -webkit-appearance: none;