@tylertech/forge 3.3.6 → 3.4.1

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,16 +104,13 @@
   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;
   }
 }
 
 @mixin label {
-  @include typography.style(label1);
+  @include typography.style(label2);
 
   cursor: default;
 

package/sass/switch/_core.scss

@@ -248,7 +248,7 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
 }
 
 @mixin label {
-  @include typography.style(label1);
+  @include typography.style(label2);
 
   &:empty {
     display: none;

package/sass/tabs/tab/_core.scss

@@ -77,12 +77,6 @@
   }
 }
 
-@mixin tab-secondary {
-  @include override(indicator-height, secondary-indicator-height);
-  @include override(indicator-shape, secondary-indicator-shape);
-  @include override(padding-inline, 0, value);
-}
-
 @mixin focus {
   color: #{token(focus-label-text-color)};
 
@@ -131,6 +125,7 @@
   transition: 150ms color linear;
   max-height: calc(#{token(content-height)} + 2 * #{token(content-padding-block)});
   min-height: #{token(content-height)};
+  width: 100%;
   padding-block: #{token(content-padding-block)};
   padding-inline: #{token(content-padding-inline)};
   gap: #{token(content-spacing)};
@@ -149,20 +144,11 @@
   background: #{token(indicator-color)};
   border-radius: #{token(indicator-shape)};
   height: #{token(indicator-height)};
+  min-width: 100%;
   inset: auto 0 0;
   opacity: 0;
 }
 
-@mixin content-secondary {
-  @include override(content-padding-inline, content-padding-inline-secondary);
-
-  width: 100%;
-}
-
-@mixin indicator-secondary {
-  min-width: 100%;
-}
-
 @mixin vertical {
   @include override(padding-inline, 0, value);
 
@@ -173,9 +159,6 @@
 
 @mixin vertical-content {
   width: 100%;
-}
-
-@mixin vertical-secondary-content {
   min-height: 100%;
 }
 
@@ -190,7 +173,9 @@
 }
 
 @mixin content-stacked {
+  max-height: none;
   flex-direction: column;
+  height: 100%;
 }
 
 @mixin inverted-indicator {

package/sass/tabs/tab/tab.scss

@@ -173,24 +173,6 @@ forge-state-layer {
   }
 }
 
-//
-// Secondary
-//
-
-:host([secondary]) {
-  .forge-tab {
-    @include tab-secondary;
-  }
-
-  .content {
-    @include content-secondary;
-  }
-
-  .indicator {
-    @include indicator-secondary;
-  }
-}
-
 //
 // Vertical
 //
@@ -217,13 +199,7 @@ forge-state-layer {
   }
 }
 
-:host([vertical][secondary]) {
-  .content {
-    @include vertical-secondary-content;
-  }
-}
-
-:host([vertical]:not([secondary])) {
+:host([vertical]) {
   .forge-tab {
     @include override(indicator-shape, vertical-indicator-shape);
   }

package/sass/tabs/tab-bar/_core.scss

@@ -30,6 +30,7 @@
 
 @mixin slotted-base {
   flex: #{token(stretch)};
+  align-self: stretch;
 }
 
 @mixin slotted-selected {

package/sass/toolbar/_core.scss

@@ -9,7 +9,7 @@
 
 @mixin _grid {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: #{token(columns)};
 }
 
 @mixin host {

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;