@intellectif/lk-react 23.2.0 → 23.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @intellectif/lk-react
 
+## 23.2.1
+
+### Patch Changes
+
+- [#111](https://github.com/intellectif/learning-kit/pull/111) [`1742365`](https://github.com/intellectif/learning-kit/commit/1742365ab3a9a16cb279c6a4aae05b0bf82a1b9f) Thanks [@diego28e](https://github.com/diego28e)! - **Readable on any page**: every surface the skin paints now sets the text on it, so AI help, a grade and a question set's passage no longer take the host page's text colour.
+
+  **Action required:** none. Only the skin changes. On a page whose text colour follows the theme, these surfaces change by a shade at most.
+
+  - `<ThemeProvider>` applies the dark tokens when the system prefers dark. On a page that stays light, a surface that painted the theme's background but left the text to the page drew black on near-black, about 1.1:1. That hit the feedback on a draft, a written response's grade, a group's passage in `<ActivitySequence>`, and the AI hints and explanation in a gap select. A dark page under the light theme gave the reverse.
+  - `.lk-ai-panel`, `.lk-ai-hint`, `.lk-stimulus`, `.lk-wr-outcome` and the SDK's audio transport (`.lk-media[data-controls="minimal"]`) now set `color: var(--lk-color-text)` beside their background, as the multiple-choice, dictation and read-aloud cards already did.
+
+- [#109](https://github.com/intellectif/learning-kit/pull/109) [`a2de425`](https://github.com/intellectif/learning-kit/commit/a2de425279b5a05a7fff9bad366fddfd86bd3262) Thanks [@diego28e](https://github.com/diego28e)! - **Written response fits its column**: the answer box no longer runs past the form's edge on a page without a `box-sizing` reset.
+
+  **Action required:** none. Only the skin changes: no markup, prop or string. A page with a global `* { box-sizing: border-box }` reset sees no change.
+
+  - `.lk-wr-textarea` is `width: 100%` with padding and a border, and nothing made it `border-box`, so the padding and border sat outside the 100%: in a 680 px form the box measured 714 px. It is now `box-sizing: border-box`, as the answer fields of the other activity components already were.
+  - Media in a `<WrittenResponse>`, a `<GapSelect>` or a `<StimulusPanel>` ran 2 px past its frame the same way: every embedded player, and an image or video wider than the column. `.lk-media-el` is now `border-box` too; media in the other components already was.
+  - An end-to-end test measures both in a browser, the answer box in light and in dark.
+
 ## 23.2.0
 
 ### Minor Changes

package/dist/theme/skin.css

@@ -49,7 +49,11 @@
     margin: 0 0 var(--lk-spacing-lg);
   }
 
+  /* Border-box of its own: a written response, a gap select and a stimulus
+     panel do not make what they hold border-box, and the border would sit
+     outside the 100% and past the frame's edge. */
   .lk-media-el {
+    box-sizing: border-box;
     display: block;
     max-width: 100%;
     height: auto;
@@ -111,11 +115,14 @@
     cursor: default;
   }
 
-  /* ── Shared stimulus (an item group's passage / recording / image) ──── */
+  /* ── Shared stimulus (an item group's passage / recording / image) ────
+     It paints its own surface, so it sets its own text: the pager around it
+     has no card, and the passage would take the host page's colour. */
   .lk-stimulus {
     margin: 0 0 var(--lk-spacing-lg);
     padding: var(--lk-spacing-md) var(--lk-spacing-lg);
     background: var(--lk-color-surface-raised);
+    color: var(--lk-color-text);
     border: 1px solid var(--lk-color-border);
     border-radius: var(--lk-radius-base);
   }
@@ -578,7 +585,10 @@
     line-height: 1.6;
   }
 
+  /* `.lk-wr` makes nothing it holds border-box, so the answer box does: the
+     padding and border then sit inside the 100%, not past the form's edge. */
   .lk-wr-textarea {
+    box-sizing: border-box;
     width: 100%;
     padding: var(--lk-spacing-sm) var(--lk-spacing-md);
     border: 1px solid var(--lk-color-border);
@@ -659,6 +669,7 @@
     border: 1px solid var(--lk-color-border);
     border-radius: var(--lk-radius-base);
     background: var(--lk-color-surface);
+    color: var(--lk-color-text);
   }
 
   .lk-wr-outcome[data-passed="true"] {
@@ -735,6 +746,7 @@
     margin: 0 0 var(--lk-spacing-md);
     padding: var(--lk-spacing-sm) var(--lk-spacing-md);
     background: var(--lk-color-surface-raised);
+    color: var(--lk-color-text);
     border: 1px solid var(--lk-color-border);
     border-radius: var(--lk-radius-base);
   }
@@ -3382,12 +3394,17 @@
     cursor: progress;
   }
 
+  /* A panel or a hint paints its own surface, so it sets the text on it as
+     well. A component with no card of its own, a written response or a gap
+     select, would otherwise draw the host page's text colour on the theme's
+     surface: black on the dark surface when the page stays light. */
   .lk-ai-panel {
     align-self: stretch;
     padding: var(--lk-spacing-sm) var(--lk-spacing-md);
     border: 1px dashed var(--lk-color-border);
     border-radius: var(--lk-radius-base);
     background: var(--lk-color-surface);
+    color: var(--lk-color-text);
   }
 
   .lk-ai-heading {
@@ -3423,6 +3440,7 @@
     padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
     border-inline-start: 3px dashed var(--lk-color-primary);
     background: var(--lk-color-surface);
+    color: var(--lk-color-text);
   }
 
   .lk-ai-hint-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intellectif/lk-react",
-  "version": "23.2.0",
+  "version": "23.2.1",
   "description": "Accessible React 19 components for every lk-core activity — from multiple choice and dictation to read-aloud with pronunciation feedback and interactive video — with a resumable exam/review pager, theming, and xAPI delivery.",
   "keywords": [
     "react",