@intellectif/lk-react 15.0.0 → 16.1.0

package/dist/theme/skin.css

@@ -2101,11 +2101,19 @@
 
   /* ── Captions ──────────────────────────────────────────────────────────
      Drawn by the player, sized to the player (not the page), and lifted
-     clear of the controls while they show. */
-  .lk-iv-caption {
+     clear of the controls while they show. One line, or two: the first
+     language, and under it the second — smaller and in its own colour, so it
+     differs by position and size as well as colour (WCAG 1.4.1). The
+     container is what sits over the video and rises with the controls; the
+     lines stack inside it and share its width. */
+  .lk-iv-captions {
     z-index: 1;
     align-self: end;
     justify-self: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--lk-iv-caption-gap);
     max-inline-size: min(88%, 42em);
     margin-block-end: max(16px, 4cqw);
     font-size: clamp(14px, 2.4cqw, 30px);
@@ -2115,22 +2123,30 @@
     transition: margin-block-end var(--lk-transition-base);
   }
 
-  .lk-iv-caption[data-size="small"] {
+  .lk-iv-captions[data-size="small"] {
     font-size: clamp(12px, 1.9cqw, 24px);
   }
 
-  .lk-iv-caption[data-size="large"] {
+  .lk-iv-captions[data-size="large"] {
     font-size: clamp(16px, 3.1cqw, 38px);
   }
 
-  .lk-iv[data-chrome="shown"] .lk-iv-caption {
+  .lk-iv[data-chrome="shown"] .lk-iv-captions {
     margin-block-end: 84px;
   }
 
+  .lk-iv-caption {
+    max-inline-size: 100%;
+  }
+
+  .lk-iv-caption[data-role="secondary"] {
+    font-size: calc(var(--lk-iv-caption-secondary-scale) * 1em);
+  }
+
   .lk-iv-caption span {
     padding: 0.1em 0.4em;
     border-radius: 4px;
-    color: #fff;
+    color: var(--lk-iv-caption-color);
     text-shadow:
       0 0 4px rgb(0 0 0 / 0.9),
       0 1px 2px #000;
@@ -2138,6 +2154,10 @@
     box-decoration-break: clone;
   }
 
+  .lk-iv-caption[data-role="secondary"] span {
+    color: var(--lk-iv-caption-secondary-color);
+  }
+
   .lk-iv-caption[data-background] span {
     background: rgb(0 0 0 / 0.75);
     text-shadow: none;
@@ -2855,6 +2875,13 @@
     color: var(--lk-color-text-muted);
   }
 
+  /* Why Finish waits: an answer is still being stored or graded. */
+  .lk-iv-end-pending {
+    margin: 0;
+    color: var(--lk-color-text-muted);
+    font-size: var(--lk-font-size-sm);
+  }
+
   .lk-iv-end-list,
   .lk-iv-contents {
     margin: 0;
@@ -3062,6 +3089,24 @@
     color: inherit;
   }
 
+  /* With a second language chosen, its words sit under the first language's
+     in each row: smaller, set in from the start, and in the theme's muted
+     text colour. Not the caption colour — that one is chosen for the dark
+     caption box over the video, and on this panel it would fail contrast. */
+  .lk-iv-line-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-inline-size: 0;
+  }
+
+  .lk-iv-line-secondary {
+    padding-inline-start: 8px;
+    border-inline-start: 2px solid var(--lk-color-border);
+    color: var(--lk-color-text-muted);
+    font-size: calc(var(--lk-iv-caption-secondary-scale) * 1em);
+  }
+
   .lk-iv-empty {
     margin: 0;
     padding: var(--lk-spacing-md);
@@ -3069,6 +3114,15 @@
     font-size: var(--lk-font-size-sm);
   }
 
+  /* A host question's popovers (`portalContainer`). Out of the flow, so it
+     adds no gap to the player, and left at its static place in the shell,
+     which is inside every scroller the player is; last in the shell and
+     lifted, so it paints above the stage and the quiz on it. */
+  .lk-iv-portal {
+    position: absolute;
+    z-index: 1;
+  }
+
   .lk-iv-live {
     position: absolute;
     inline-size: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intellectif/lk-react",
-  "version": "15.0.0",
+  "version": "16.1.0",
   "description": "Accessible React 19 assessment components — multiple choice, fill-in-the-blanks, written response — with a resumable exam/review pager, theming, and xAPI delivery.",
   "keywords": [
     "react",
@@ -217,7 +217,7 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "@intellectif/lk-core": "^0.15.0"
+    "@intellectif/lk-core": "^0.16.0"
   },
   "devDependencies": {
     "@axe-core/react": "^4.10.0",
@@ -236,7 +236,7 @@
     "tsup": "^8.3.0",
     "vitest": "^4.1.6",
     "vitest-axe": "^0.1.0",
-    "@intellectif/lk-core": "0.15.0"
+    "@intellectif/lk-core": "0.16.0"
   },
   "license": "MIT",
   "engines": {