@tylertech/forge 3.10.5 → 3.12.0

package/dist/app-bar/forge-app-bar.css

@@ -132,10 +132,6 @@
   color: inherit;
   box-sizing: border-box;
   height: 100%;
-  outline: none;
-  --forge-focus-indicator-color: var(--_app-bar-foreground);
-  --forge-focus-indicator-offset-block: var(--forge-spacing-xxsmall, 4px);
-  --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));
 }
 @keyframes forge-focus-indicator-outward-grow {
   from {
@@ -163,6 +159,9 @@
     border-width: var(--_focus-indicator-active-width);
   }
 }
+.forge-app-bar a.forge-app-bar__title {
+  outline: none;
+}
 .forge-app-bar a.forge-app-bar__title:focus-visible::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
   --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
@@ -201,6 +200,11 @@
   content: "";
   display: block;
 }
+.forge-app-bar a.forge-app-bar__title {
+  --forge-focus-indicator-color: var(--_app-bar-foreground);
+  --forge-focus-indicator-offset-block: var(--forge-spacing-xxsmall, 4px);
+  --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));
+}
 .forge-app-bar__logo-title-container {
   position: relative;
   display: flex;
@@ -221,11 +225,12 @@
   --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
   --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
   --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
-  --forge-state-layer-color: var(--_app-bar-foreground);
 }
 .forge-app-bar__logo-title-container:has(a.forge-app-bar__title)::before {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
   background-color: var(--_state-layer-hover-color);
   inset: 0;
   transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
@@ -243,6 +248,9 @@
   transition-duration: var(--_state-layer-pressed-duration);
   --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
 }
+.forge-app-bar__logo-title-container:has(a.forge-app-bar__title) {
+  --forge-state-layer-color: var(--_app-bar-foreground);
+}
 .forge-app-bar__section {
   display: inline-flex;
   flex: 1 1 auto;

package/dist/button/forge-button.css

@@ -131,9 +131,6 @@
   transition-property: box-shadow, background;
   transition-duration: var(--_button-transition-duration);
   transition-timing-function: var(--_button-transition-timing);
-  position: relative;
-  inline-size: auto;
-  --forge-icon-font-size: var(--_button-icon-size);
 }
 .forge-button::-moz-focus-inner {
   padding: 0;
@@ -147,9 +144,9 @@
   --_button-shadow: var(--_button-active-shadow);
   background: var(--_button-active-background);
 }
-.forge-button:not(:disabled) {
-  outline: none;
-  --forge-focus-indicator-color: var(--_button-primary-color);
+.forge-button {
+  position: relative;
+  inline-size: auto;
 }
 .forge-button:not(:disabled):not(.forge-button--link) {
   --_state-layer-display: var(--forge-state-layer-display, flex);
@@ -165,6 +162,8 @@
 .forge-button:not(:disabled):not(.forge-button--link)::before {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
   background-color: var(--_state-layer-hover-color);
   inset: 0;
   transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
@@ -208,6 +207,9 @@
     border-width: var(--_focus-indicator-active-width);
   }
 }
+.forge-button:not(:disabled) {
+  outline: none;
+}
 .forge-button:not(:disabled):focus-visible::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
   --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
@@ -246,6 +248,9 @@
   content: "";
   display: block;
 }
+.forge-button:not(:disabled) {
+  --forge-focus-indicator-color: var(--_button-primary-color);
+}
 .forge-button:disabled {
   cursor: var(--_button-disabled-cursor);
   --_button-background: var(--_button-disabled-background);
@@ -321,6 +326,9 @@
   --_button-padding-inline: var(--_button-pill-padding-inline);
   --forge-focus-indicator-shape: var(--_button-pill-shape);
 }
+.forge-button {
+  --forge-icon-font-size: var(--_button-icon-size);
+}
 .forge-button--dense {
   --_button-height: var(--_button-dense-height);
 }

package/dist/checkbox/forge-checkbox.css

@@ -44,14 +44,6 @@
 
 .forge-checkbox {
   outline: none;
-  --forge-focus-indicator-shape: 0px;
-  --forge-focus-indicator-outward-offset: 8px;
-  display: inline grid;
-  position: relative;
-  align-items: center;
-  justify-items: center;
-  inline-size: var(--_checkbox-state-layer-width);
-  block-size: var(--_checkbox-state-layer-height);
 }
 .forge-checkbox:has(input[type=checkbox]:focus-visible)::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
@@ -91,6 +83,16 @@
   content: "";
   display: block;
 }
+.forge-checkbox {
+  --forge-focus-indicator-shape: 0px;
+  --forge-focus-indicator-outward-offset: 8px;
+  display: inline grid;
+  position: relative;
+  align-items: center;
+  justify-items: center;
+  inline-size: var(--_checkbox-state-layer-width);
+  block-size: var(--_checkbox-state-layer-height);
+}
 .forge-checkbox input[type=checkbox] {
   appearance: none;
   grid-column: 1;
@@ -113,11 +115,12 @@
   --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
   --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
   --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
-  border-radius: var(--_checkbox-state-layer-shape) !important;
 }
 .forge-checkbox input[type=checkbox]:not(:disabled) {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
   background-color: var(--_state-layer-hover-color);
   inset: 0;
   transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
@@ -134,6 +137,9 @@
   transition-duration: var(--_state-layer-pressed-duration);
   --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
 }
+.forge-checkbox input[type=checkbox]:not(:disabled) {
+  border-radius: var(--_checkbox-state-layer-shape) !important;
+}
 .forge-checkbox__icon {
   display: none;
   grid-column: 1;
@@ -189,10 +195,6 @@
   border-color: var(--_checkbox-checked-border-color);
   background: var(--_checkbox-checked-background);
 }
-.forge-checkbox:has(input[type=checkbox]:checked) .forge-checkbox__icon {
-  display: block;
-  clip-path: polygon(13.101048% 47.903832%, 1.316772% 59.688108%, 33.7527% 92.84076%, 100.858068% 25.018668%, 89.073792% 13.234392%, 33.7527% 68.3388%);
-}
 .forge-checkbox:has(input[type=checkbox]:checked) .forge-checkbox__icon::before {
   translate: 0;
 }
@@ -201,6 +203,10 @@
     translate: -100% 0;
   }
 }
+.forge-checkbox:has(input[type=checkbox]:checked) .forge-checkbox__icon {
+  display: block;
+  clip-path: polygon(13.101048% 47.903832%, 1.316772% 59.688108%, 33.7527% 92.84076%, 100.858068% 25.018668%, 89.073792% 13.234392%, 33.7527% 68.3388%);
+}
 .forge-checkbox:has(input[type=checkbox]:checked) .forge-checkbox__icon--checked {
   clip-path: none;
 }
@@ -213,10 +219,6 @@
   border-color: var(--_checkbox-checked-border-color);
   background: var(--_checkbox-checked-background);
 }
-.forge-checkbox:has(input[type=checkbox]:indeterminate) .forge-checkbox__icon {
-  display: block;
-  clip-path: polygon(8.334% 41.67%, 8.334% 58.338%, 91.674% 58.338%, 91.674% 41.67%);
-}
 .forge-checkbox:has(input[type=checkbox]:indeterminate) .forge-checkbox__icon::before {
   translate: 0;
 }
@@ -225,6 +227,10 @@
     translate: -100% 0;
   }
 }
+.forge-checkbox:has(input[type=checkbox]:indeterminate) .forge-checkbox__icon {
+  display: block;
+  clip-path: polygon(8.334% 41.67%, 8.334% 58.338%, 91.674% 58.338%, 91.674% 41.67%);
+}
 .forge-checkbox:has(input[type=checkbox]:indeterminate) .forge-checkbox__icon--indeterminate {
   clip-path: none;
 }

package/dist/chips/forge-chips.css

@@ -120,14 +120,12 @@
   --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
   --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
   --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
-  --forge-state-layer-color: var(--_chip-color);
-  outline: none;
-  --forge-focus-indicator-color: var(--_chip-color);
-  --forge-focus-indicator-shape: var(--_chip-shape);
 }
 .forge-chip:not(:disabled)::before {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
   background-color: var(--_state-layer-hover-color);
   inset: 0;
   transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
@@ -145,6 +143,9 @@
   transition-duration: var(--_state-layer-pressed-duration);
   --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
 }
+.forge-chip:not(:disabled) {
+  --forge-state-layer-color: var(--_chip-color);
+}
 @keyframes forge-focus-indicator-outward-grow {
   from {
     outline-width: 0;
@@ -171,6 +172,9 @@
     border-width: var(--_focus-indicator-active-width);
   }
 }
+.forge-chip:not(:disabled) {
+  outline: none;
+}
 .forge-chip:not(:disabled):focus-visible::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
   --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
@@ -209,6 +213,10 @@
   content: "";
   display: block;
 }
+.forge-chip:not(:disabled) {
+  --forge-focus-indicator-color: var(--_chip-color);
+  --forge-focus-indicator-shape: var(--_chip-shape);
+}
 .forge-chip--field {
   --_chip-background: var(--_chip-field-background);
   --_chip-color: var(--_chip-field-color);

package/dist/field/forge-field.css

@@ -156,9 +156,6 @@
   .forge-field:has(label).forge-field--rounded {
     padding-inline: var(--forge-spacing-large, 24px);
   }
-  .forge-field:has(label).forge-field--float-label-in label {
-    animation: forge-field-float-label-in var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)) forwards;
-  }
   @keyframes forge-field-float-label-in {
     from {
       transform: translateY(15%);
@@ -169,6 +166,9 @@
       opacity: 1;
     }
   }
+  .forge-field:has(label).forge-field--float-label-in label {
+    animation: forge-field-float-label-in var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)) forwards;
+  }
   @keyframes forge-field-float-label-out {
     from {
       opacity: 0;
@@ -235,8 +235,6 @@
   }
   .forge-field:has(:where(input, textarea, select, .forge-field__input):focus) {
     outline: none;
-    --forge-focus-indicator-color: var(--forge-theme-primary, #3f51b5);
-    --forge-focus-indicator-outward-offset: 0px;
   }
   .forge-field:has(:where(input, textarea, select, .forge-field__input):focus)::after {
     --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
@@ -275,6 +273,10 @@
     display: block;
     border-radius: inherit;
   }
+  .forge-field:has(:where(input, textarea, select, .forge-field__input):focus) {
+    --forge-focus-indicator-color: var(--forge-theme-primary, #3f51b5);
+    --forge-focus-indicator-outward-offset: 0px;
+  }
 }
 @layer textarea {
   .forge-field:has(textarea:only-child) {

package/dist/floating-action-button/forge-floating-action-button.css

@@ -88,16 +88,12 @@
   --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
   --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
   --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
-  outline: none;
-  --forge-focus-indicator-color: var(--_fab-background);
-  --forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);
-  --forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);
-  --forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);
-  --forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end);
 }
 .forge-fab:not(:disabled)::before {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
   background-color: var(--_state-layer-hover-color);
   inset: 0;
   transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
@@ -141,6 +137,9 @@
     border-width: var(--_focus-indicator-active-width);
   }
 }
+.forge-fab:not(:disabled) {
+  outline: none;
+}
 .forge-fab:not(:disabled):focus-visible::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
   --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
@@ -179,6 +178,13 @@
   content: "";
   display: block;
 }
+.forge-fab:not(:disabled) {
+  --forge-focus-indicator-color: var(--_fab-background);
+  --forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);
+  --forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);
+  --forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);
+  --forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end);
+}
 .forge-fab--extended {
   --_fab-padding: var(--_fab-extended-padding);
   min-width: var(--_fab-extended-min-width);

package/dist/forge.css

@@ -1619,7 +1619,12 @@ forge-table {
   font: inherit;
   color: inherit;
   width: 100%;
-  outline-offset: var(--forge-spacing-xxsmall, 4px);
+  outline: none;
+  position: relative;
+}
+.forge-table-head__cell--sortable button forge-focus-indicator {
+  border-radius: 4px;
+  --forge-focus-indicator-offset-inline: -4px;
 }
 .forge-table-head__cell--sortable.forge-table-head__cell--sorted-ascending .forge-table-head__cell-sort-icon {
   transform: rotate(180deg);

package/dist/icon-button/forge-icon-button.css

@@ -105,14 +105,12 @@
   --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
   --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
   --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
-  --forge-state-layer-color: var(--_icon-button-icon-color);
-  outline: none;
-  --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);
-  --forge-focus-indicator-shape: var(--_icon-button-shape);
 }
 .forge-icon-button:not(:disabled)::before {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
   background-color: var(--_state-layer-hover-color);
   inset: 0;
   transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
@@ -130,6 +128,9 @@
   transition-duration: var(--_state-layer-pressed-duration);
   --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
 }
+.forge-icon-button:not(:disabled) {
+  --forge-state-layer-color: var(--_icon-button-icon-color);
+}
 @keyframes forge-focus-indicator-outward-grow {
   from {
     outline-width: 0;
@@ -156,6 +157,9 @@
     border-width: var(--_focus-indicator-active-width);
   }
 }
+.forge-icon-button:not(:disabled) {
+  outline: none;
+}
 .forge-icon-button:not(:disabled):focus-visible::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
   --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
@@ -194,6 +198,10 @@
   content: "";
   display: block;
 }
+.forge-icon-button:not(:disabled) {
+  --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);
+  --forge-focus-indicator-shape: var(--_icon-button-shape);
+}
 .forge-icon-button:not(:disabled):where(.forge-icon-button--text,
 :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {
   --forge-focus-indicator-outward-offset: 0px;