@tylertech/forge 3.10.5 → 3.12.0

package/dist/list/forge-list.css

@@ -190,6 +190,8 @@
   .forge-list-item label::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,8 +245,6 @@
   .forge-list-item--interactive:not(.forge-list-item--disabled),
   :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
     cursor: pointer;
-    outline: none;
-    --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));
   }
   @keyframes forge-focus-indicator-outward-grow {
     from {
@@ -276,6 +276,33 @@
   a,
   label,
   .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a,
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button,
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label,
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]),
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
+    outline: none;
+  }
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
   :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after,
   .forge-list-item:has(button:not(:disabled),
   a,
@@ -358,6 +385,33 @@
     content: "";
     display: block;
   }
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a,
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button,
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label,
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]),
+  .forge-list-item:has(button:not(:disabled),
+  a,
+  label,
+  .forge-list-item--interactive:not(.forge-list-item--disabled),
+  :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
+    --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));
+  }
   .forge-list-item__text {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -434,7 +488,6 @@
 @layer selected {
   .forge-list-item--selected {
     color: var(--_list-item-selected-color);
-    --forge-state-layer-color: var(--_list-item-selected-color);
   }
   .forge-list-item--selected::before {
     content: "";
@@ -445,6 +498,9 @@
     background-color: var(--_list-item-selected-background);
     pointer-events: none;
   }
+  .forge-list-item--selected {
+    --forge-state-layer-color: var(--_list-item-selected-color);
+  }
   .forge-list-item--selected .forge-list-item__start {
     color: var(--_list-item-start-selected-color);
   }

package/dist/radio/forge-radio.css

@@ -40,15 +40,6 @@
 
 .forge-radio {
   outline: none;
-  --forge-focus-indicator-color: var(--_radio-primary-color);
-  --forge-focus-indicator-outward-offset: 0px;
-  --forge-focus-indicator-shape: var(--_radio-state-layer-shape);
-  display: inline flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--_radio-state-layer-width);
-  block-size: var(--_radio-state-layer-height);
 }
 .forge-radio:has(input[type=radio]:focus-visible)::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
@@ -88,6 +79,17 @@
   content: "";
   display: block;
 }
+.forge-radio {
+  --forge-focus-indicator-color: var(--_radio-primary-color);
+  --forge-focus-indicator-outward-offset: 0px;
+  --forge-focus-indicator-shape: var(--_radio-state-layer-shape);
+  display: inline flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_radio-state-layer-width);
+  block-size: var(--_radio-state-layer-height);
+}
 .forge-radio input[type=radio] {
   position: absolute;
   appearance: none;
@@ -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(--_radio-state-layer-shape) !important;
 }
 .forge-radio input[type=radio]: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-radio input[type=radio]:not(:disabled) {
+  border-radius: var(--_radio-state-layer-shape) !important;
+}
 .forge-radio::before {
   position: relative;
   align-items: center;
@@ -159,7 +165,6 @@
   inline-size: var(--_radio-width);
   block-size: var(--_radio-height);
   background: var(--_radio-background);
-  content: "";
 }
 .forge-radio::before::after {
   content: "";
@@ -179,14 +184,19 @@
   scale: 0.5;
   opacity: 0;
 }
+.forge-radio::before {
+  content: "";
+}
 .forge-radio:has(input[type=radio]:checked)::before {
   border-color: var(--_radio-checked-border-color);
-  background: radial-gradient(circle, var(--_radio-mark-color) 0%, var(--_radio-mark-color) calc(calc(var(--_radio-mark-size) / 1.4) - 0.2px), transparent calc(calc(var(--_radio-mark-size) / 1.4) + 0.2px), transparent 100%);
 }
 .forge-radio:has(input[type=radio]:checked)::before::after {
   scale: 1;
   opacity: 1;
 }
+.forge-radio:has(input[type=radio]:checked)::before {
+  background: radial-gradient(circle, var(--_radio-mark-color) 0%, var(--_radio-mark-color) calc(calc(var(--_radio-mark-size) / 1.4) - 0.2px), transparent calc(calc(var(--_radio-mark-size) / 1.4) + 0.2px), transparent 100%);
+}
 .forge-radio:has(input[type=radio]:disabled) {
   opacity: var(--_radio-disabled-opacity);
 }

package/dist/skip-link/forge-skip-link.css

@@ -28,42 +28,12 @@ a.forge-skip-link {
   --_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(--_skip-link-background);
-  transition-property: opacity, transform;
-  transition-duration: var(--_skip-link-transition-duration);
-  transition-timing-function: var(--_skip-link-transition-timing-function);
-  display: block;
-  position: fixed;
-  inset: var(--_skip-link-inset);
-  z-index: var(--_skip-link-z-index);
-  block-size: fit-content;
-  inline-size: fit-content;
-  opacity: 0;
-  transform: translateY(-100%);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
-  font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));
-  font-weight: var(--forge-typography-body2-font-weight, 400);
-  line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));
-  letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);
-  text-transform: var(--forge-typography-body2-text-transform, inherit);
-  text-decoration: var(--forge-typography-body2-text-decoration, inherit);
-  display: block;
-  outline: none;
-  box-shadow: var(--_skip-link-elevation);
-  border-radius: var(--_skip-link-shape);
-  background: var(--_skip-link-background);
-  padding-block: var(--_skip-link-padding-block);
-  padding-inline: var(--_skip-link-padding-inline);
-  cursor: pointer;
-  color: var(--_skip-link-color);
-  text-decoration: underline;
 }
 a.forge-skip-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;
@@ -81,6 +51,9 @@ a.forge-skip-link:active::before {
   transition-duration: var(--_state-layer-pressed-duration);
   --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
 }
+a.forge-skip-link {
+  outline: none;
+}
 a.forge-skip-link: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));
@@ -119,6 +92,39 @@ a.forge-skip-link:focus-visible::after {
   content: "";
   display: block;
 }
+a.forge-skip-link {
+  --forge-focus-indicator-color: var(--_skip-link-background);
+  transition-property: opacity, transform;
+  transition-duration: var(--_skip-link-transition-duration);
+  transition-timing-function: var(--_skip-link-transition-timing-function);
+  display: block;
+  position: fixed;
+  inset: var(--_skip-link-inset);
+  z-index: var(--_skip-link-z-index);
+  block-size: fit-content;
+  inline-size: fit-content;
+  opacity: 0;
+  transform: translateY(-100%);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
+  font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));
+  font-weight: var(--forge-typography-body2-font-weight, 400);
+  line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));
+  letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);
+  text-transform: var(--forge-typography-body2-text-transform, inherit);
+  text-decoration: var(--forge-typography-body2-text-decoration, inherit);
+  display: block;
+  outline: none;
+  box-shadow: var(--_skip-link-elevation);
+  border-radius: var(--_skip-link-shape);
+  background: var(--_skip-link-background);
+  padding-block: var(--_skip-link-padding-block);
+  padding-inline: var(--_skip-link-padding-inline);
+  cursor: pointer;
+  color: var(--_skip-link-color);
+  text-decoration: underline;
+}
 a.forge-skip-link:where(:focus-within, .forge-skip-link--persistent) {
   transition-property: opacity, transform;
   transition-duration: var(--_skip-link-transition-duration);

package/dist/state-layer/forge-state-layer.css

@@ -17,6 +17,8 @@
 .forge-state-layer::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;

package/dist/switch/forge-switch.css

@@ -81,11 +81,6 @@
   block-size: max(var(--_switch-handle-height), var(--_switch-track-height), var(--_switch-current-state-layer-height));
   cursor: pointer;
   outline: none;
-  --forge-focus-indicator-shape: var(--_switch-track-shape);
-  --forge-focus-indicator-outward-offset: 0px;
-  --_switch-current-state-layer-width: var(--_switch-state-layer-width);
-  --_switch-current-state-layer-height: var(--_switch-state-layer-height);
-  display: inline flex;
 }
 .forge-switch:has(input[type=checkbox][switch]:focus-visible)::after {
   --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
@@ -125,6 +120,13 @@
   content: "";
   display: block;
 }
+.forge-switch {
+  --forge-focus-indicator-shape: var(--_switch-track-shape);
+  --forge-focus-indicator-outward-offset: 0px;
+  --_switch-current-state-layer-width: var(--_switch-state-layer-width);
+  --_switch-current-state-layer-height: var(--_switch-state-layer-height);
+  display: inline flex;
+}
 .forge-switch input[type=checkbox][switch] {
   display: block;
   position: absolute;
@@ -244,6 +246,8 @@
 .forge-switch:has(input[type=checkbox][switch]:not(:disabled)) .forge-switch__thumb::after {
   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;

package/dist/table/forge-table.css

@@ -111,7 +111,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);