@tylertech/forge 3.7.0 → 3.8.0-dev.0

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

@@ -19,7 +19,7 @@ $tokens: (
   text-color: utils.module-ref(button, text-color, primary-color),
   disabled-color: utils.module-val(button, disabled-color, theme.variable(surface-container)),
   padding: utils.module-val(button, padding, spacing.variable(medium)),
-  display: utils.module-val(button, display, inline-flex),
+  display: utils.module-val(button, display, inline-grid),
   justify: utils.module-val(button, justify, center),
   shape: utils.module-val(button, shape, shape.variable(medium)),
   // Base
@@ -33,7 +33,7 @@ $tokens: (
   shape-start-end-radius: utils.module-ref(button, shape-start-end-radius, shape),
   shape-end-start-radius: utils.module-ref(button, shape-end-start-radius, shape),
   shape-end-end-radius: utils.module-ref(button, shape-end-end-radius, shape),
-  padding-block: utils.module-ref(button, padding-block, padding),
+  padding-block: utils.module-ref(button, padding-block, 0),
   padding-inline: utils.module-ref(button, padding-inline, padding),
   background: utils.module-val(button, background, transparent),
   hover-background: utils.module-ref(button, hover-background, background),

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

@@ -37,10 +37,16 @@ $tokens: (
   with-overlap-handle-outline-width: utils.module-val(slider, with-overlap-handle-outline-width, 1px),
   with-tick-marks-active-container-color: utils.module-val(slider, with-tick-marks-active-container-color, theme.variable(on-primary)),
   with-tick-marks-container-size: utils.module-val(slider, with-tick-marks-container-size, 2px),
-  with-tick-marks-disabled-active-container-color:
-    utils.module-val(slider, with-tick-marks-disabled-active-container-color, theme.variable(on-surface-container-high)),
-  with-tick-marks-disabled-inactive-container-color:
-    utils.module-val(slider, with-tick-marks-disabled-inactive-container-color, theme.variable(on-surface-container-high)),
+  with-tick-marks-disabled-active-container-color: utils.module-val(
+      slider,
+      with-tick-marks-disabled-active-container-color,
+      theme.variable(on-surface-container-high)
+    ),
+  with-tick-marks-disabled-inactive-container-color: utils.module-val(
+      slider,
+      with-tick-marks-disabled-inactive-container-color,
+      theme.variable(on-surface-container-high)
+    ),
   with-tick-marks-inactive-container-color: utils.module-val(slider, with-tick-marks-inactive-container-color, theme.variable(primary))
 ) !default;
 

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

@@ -63,7 +63,7 @@ $tokens: (
   state-layer-dense-width: utils.module-ref(switch, state-layer-dense-width, state-layer-dense-size),
   state-layer-dense-height: utils.module-ref(switch, state-layer-dense-height, state-layer-dense-size),
   // Disabled
-  disabled-opacity: utils.module-val(switch, disabled-opacity, theme.emphasis(medium-low)),
+  disabled-opacity: utils.module-val(switch, disabled-opacity, theme.emphasis(medium)),
   // Active
   handle-active-on-color: utils.module-ref(switch, handle-active-on-color, handle-on-color),
   handle-active-off-color: utils.module-ref(switch, handle-active-off-color, handle-off-color),

package/sass/dialog/dialog.scss

@@ -36,6 +36,14 @@ $can-animate: '[visible]:not([animation-type=none])';
     display: none;
   }
 
+  //
+  // Slotted
+  //
+
+  ::slotted(forge-scaffold) {
+    height: auto;
+  }
+
   //
   // Base
   //

package/sass/dialog/forge-dialog.scss

@@ -73,6 +73,10 @@
   transition-property: display, opacity, overlay, scale;
   transition-behavior: allow-discrete;
 
+  > forge-scaffold {
+    height: auto;
+  }
+
   &--fullscreen {
     @include core.fullscreen-dialog-base;
     @include core.fullscreen-surface;

package/sass/linear-progress/linear-progress.scss

@@ -35,9 +35,13 @@ $_host-tokens: [track-height];
   // State vars
   #{declare(track-dot-size)}: calc(#{token(track-height)} / 2);
   #{declare(track-background-width)}: calc(#{token(track-dot-size, custom)} * 5);
-  #{declare(track-background)}: 0 / #{token(track-background-width, custom)} 100% radial-gradient(circle at calc(#{token(track-dot-size, custom)} * 2), #{token(
-          track-color
-        )} 0, #{token(track-color)} #{token(track-dot-size, custom)}, transparent #{token(track-dot-size, custom)});
+  #{declare(track-background)}: 0 / #{token(track-background-width, custom)} 100%
+    radial-gradient(
+      circle at calc(#{token(track-dot-size, custom)} * 2),
+      #{token(track-color)} 0,
+      #{token(track-color)} #{token(track-dot-size, custom)},
+      transparent #{token(track-dot-size, custom)}
+    );
 }
 
 .forge-linear-progress {

package/sass/list/list-item/list-item.scss

@@ -157,7 +157,7 @@ slot[name='tertiary-text'] {
 }
 
 // Button slotted elements
-::slotted(:is(button, [role='button'][tabindex], [forge-list-item-button])) {
+::slotted(:is(button:not([slot]), [forge-list-item-button])) {
   @include button;
 }
 

package/sass/popover/popover.scss

@@ -318,7 +318,6 @@ forge-overlay[clipped-y] {
   .forge-popover {
     height: auto;
     min-height: 0;
-    max-height: 100vh;
     overflow-y: auto;
   }
 }

package/sass/slider/_core.scss

@@ -45,9 +45,8 @@ $_active-track-end-clip: calc(#{$_active-track-end-offset} + #{$_active-track-ma
   // Clip the inputs to the space left/right of the center point between the
   // values so the right input gets pointer events.
   $_clip-to-start: calc(
-    #{token(state-layer-size)} / 2 + (100% - #{token(state-layer-size)}) * (#{token(start-fraction, custom)} + ((
-                #{token(end-fraction, custom)} - #{token(start-fraction, custom)}
-              ) / 2))
+    #{token(state-layer-size)} / 2 + (100% - #{token(state-layer-size)}) *
+      (#{token(start-fraction, custom)} + ((#{token(end-fraction, custom)} - #{token(start-fraction, custom)}) / 2))
   );
 
   $_clip-to-end: calc(100% - $_clip-to-start);