@mathscan/math-exercise-engine 1.1.2 → 1.1.3

package/dist/style.css

@@ -188,11 +188,6 @@
   padding-bottom: calc(var(--exercise-line-gap) * 0.5);
 }
 
-.exercise-line-arabic {
-  /* RTL layout handled by dir="rtl" attribute on text groups */
-  /* No additional styling needed */
-}
-
 /* Content Styles */
 
 /**
@@ -348,6 +343,107 @@ mark {
   color: var(--exercise-text-light);
 }
 
+/* ========================================
+   VERTICAL OPERATION
+   ======================================== */
+
+.vop {
+  display: inline-grid;
+  grid-template-columns: repeat(var(--vop-cols, 4), minmax(2.2em, auto));
+  justify-content: end;
+  font-variant-numeric: tabular-nums;
+  font-size: 1.5em;
+  color: var(--exercise-text);
+  padding: 0.25em 0.5em;
+  margin: 0.5em 0;
+}
+
+.vop-row {
+  display: contents;
+}
+
+.vop-cell,
+.vop-op-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.6em;
+  padding: 0.1em 0.15em;
+}
+
+.vop-cell-digit {
+  font-weight: 600;
+}
+
+.vop-cell-label {
+  font-weight: 600;
+  font-style: italic;
+}
+
+.vop-cell-color {
+  /* color applied inline via style prop */
+  font-weight: 600;
+}
+
+.vop-cell-bold {
+  font-weight: 700;
+}
+
+.vop-cell-highlight {
+  /* <mark> inside provides the highlight background */
+}
+
+.vop-carry-cell-color {
+  font-weight: 600;
+}
+
+.vop-carry-cell-bold {
+  font-weight: 700;
+}
+
+.vop-carry-cell-highlight {
+  /* <mark> inside provides the highlight background */
+}
+
+.vop-carry-row {
+  font-size: 0.65em;
+  line-height: 1;
+  align-items: flex-end;
+}
+
+.vop-carry-cell-digit,
+.vop-carry-cell-label {
+  font-weight: 600;
+}
+
+.vop-carry-cell-empty {
+  /* blank placeholder in carry row */
+}
+
+.vop-carry-cell-input {
+  /* WidgetRenderer provides inner input box */
+}
+
+.vop-cell-empty {
+  /* blank shift placeholder */
+}
+
+.vop-cell-input {
+  /* WidgetRenderer provides the inner input box */
+}
+
+.vop-op {
+  /* inherit .operator color/size but align within its cell */
+  font-size: 1em;
+}
+
+.vop-sep {
+  grid-column: 1 / -1;
+  height: 0;
+  border-top: 2px solid var(--exercise-text, currentColor);
+  margin: 0.15em 0;
+}
+
 /**
  * Input Styles
  *
@@ -421,6 +517,26 @@ mark {
    DRAG OPTIONS
    ======================================== */
 
+.drag-options-container {
+  /* Container for drag options widget */
+}
+
+/*
+ * Shared base for every widget that sits inline within a text line.
+ *
+ * unicode-bidi: isolate — shields the widget from the surrounding bidi context
+ * so that symbols like > or < are never mirrored when the parent line carries
+ * dir="rtl" (RTL Arabic lines with inline widgets).
+ *
+ * To opt a new inline widget into this protection, simply add the class
+ * "inline-widget" to its root element. No other CSS changes needed.
+ */
+
+.inline-widget {
+  unicode-bidi: isolate;
+  display: inline-block;
+}
+
 .drag-options {
   display: flex;
   justify-content: center;
@@ -824,7 +940,13 @@ th.exercise-table-cell {
   fill: var(--visual-fraction-hover-color);
 }
 
-.visual-fraction-widget__sector[role='button']:focus-visible {
+.visual-fraction-widget__sector[role="button"]:focus {
+  outline: none;
+}
+
+.visual-fraction-widget__sector[role="button"]:focus-visible {
+  /* Keyboard-only focus indicator: a drop-shadow that follows the SVG shape
+     instead of a rectangle, preserving accessibility without the visual glitch. */
   outline: none;
   filter: drop-shadow(0 0 0.18rem var(--exercise-border-focus, var(--exercise-primary, #007acc)));
 }
@@ -1080,8 +1202,22 @@ th.exercise-table-cell {
   --nl-arrow-gap: 8px;
 }
 
-/* Chip zone: push the axis row down so chips overflowing upward
-   stay within the root boundary — no geometry side-effects on the axis */
+/* ========================================
+   VALIDATION FEEDBACK
+   ======================================== */
+
+/* Axis colour: overriding --nl-axis-color on root propagates to track, ticks, arrows and labels. */
+
+.number-line--correct   { --nl-axis-color: #43B925; }
+
+.number-line--incorrect { --nl-axis-color: #D6234D; }
+
+/* Disable track transition for instant colour on submit. */
+
+.number-line--correct .number-line-track,
+.number-line--incorrect .number-line-track { transition: none; }
+
+/* Reserve space above axis for chips overflowing upward. */
 
 .number-line--drag-mode {
   padding-top: var(--nl-chip-zone-height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A DSL parser and validator for math exercises - transforms text-based exercise definitions into structured AST and JSON",
   "main": "dist/index.js",
   "module": "dist/index.mjs",