@khanacademy/perseus 21.2.0 → 21.2.2

package/dist/es/index.css

@@ -4284,6 +4284,7 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
     --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
     --movable-point-hover-expansion: 2px;
+    --movable-point-focus-ring-offset: 2px;
 
     --movable-line-stroke-color: var(--mafs-blue);
     --movable-line-stroke-weight: 2px;
@@ -4305,7 +4306,13 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     fill: transparent;
 }
 
-.MafsView :is(.movable-point-center, .movable-point-ring, .movable-point-halo) {
+.MafsView
+    :is(
+        .movable-point-center,
+        .movable-point-ring,
+        .movable-point-halo,
+        .movable-point-focus-outline
+    ) {
     transition: r 0.15s ease-out;
 }
 
@@ -4344,7 +4351,24 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     );
 }
 
-.MafsView .movable-point:focus-visible .movable-point-halo {
-    outline: 2px solid blue;
-    border-radius: 99px;
+.MafsView .movable-point .movable-point-focus-outline {
+    visibility: hidden;
+    r: calc(
+        var(--movable-point-halo-radius) +
+            var(--movable-point-focus-ring-offset)
+    );
+    stroke-width: 2px;
+    fill: none;
+    stroke: var(--mafs-blue);
+}
+
+.MafsView .movable-point:hover .movable-point-focus-outline {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-halo-radius) +
+            var(--movable-point-focus-ring-offset)
+    );
+}
+
+.MafsView .movable-point:focus-visible .movable-point-focus-outline {
+    visibility: visible;
 }

package/dist/es/index.js

@@ -24912,6 +24912,7 @@ class Explanation extends React.Component {
     // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
     const buttonStyleOverrides = {
       height: "auto",
+      lineHeight: "inherit",
       marginLeft: "-2px",
       // transfer space on the left side to the padding
       marginRight: "2px",
@@ -24921,7 +24922,8 @@ class Explanation extends React.Component {
 
     const labelStyle = {
       fontSize: "18px",
-      lineHeight: "20px",
+      lineHeight: "inherit",
+      "text-align": "left",
       // The following property adjusts the large space between the button text and the caret icon.
       // Since we are unable to adjust the styling of the icon (where the extra space exists),
       //      we are adjusting it on the text label by using a negative margin.
@@ -28453,6 +28455,10 @@ const StyledMovablePoint = props => {
     className: "movable-point-ring",
     cx: x,
     cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-focus-outline",
+    cx: x,
+    cy: y
   }), /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-center",
     cx: x,
@@ -42341,7 +42347,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.2.0";
+const libVersion = "21.2.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {