minerva-design 1.12.1 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # minerva-design
 
+## 1.13.0
+
+### Minor Changes
+
+- 827e1d3: New `AnswerSheet` component (答题卡): a question navigator for practice and exam sessions. Numbered pills grouped by section (`groups`), each with a status (`unanswered`, `answered`, `correct`, `wrong`, `skipped`), an optional review flag and the current question marked with `aria-current="step"`. Props: `items`, `groups`, `value` / `onChange`, `size` (`small` / `medium`), `layout` (`wrap` / `scroll`), `columns`, `showLegend`, `showSummary` and `getItemLabel`, with localized labels (en, zh, fr, ja) and roving arrow-key, Home / End navigation on the web. On every renderer: React, React Native, Taro, Vue, Angular (`MnAnswerSheet`), Web Components (`<minerva-answer-sheet>`), uni-app and WeChat. The core adds `answerSheetSections()`, `answerSheetSummary()`, `answerSheetLegend()` and `answerSheetMoveIndex()`, `@minerva/dom` adds `nearestInRow()`, and the styling hooks add the `flagged` and `layout` states.
+- 827e1d3: `CodeBlock` syntax highlighting on every renderer (React, Vue, Angular `MnCodeBlock`, Web Components `<minerva-code-block>`, React Native, Taro, uni-app and WeChat). New props: `language` (javascript / js, typescript / ts, jsx, tsx, json, css / scss / less, html / xml / svg / vue, bash / sh / zsh, python / py, yaml / yml, sql, diff, markdown / md; other names render plain text, and without `language` nothing changes), `highlight` (default `true`; `no-highlight` attribute on the web component), `showLineNumbers` (`show-line-numbers`: an aria-hidden gutter, not part of the selected or copied text) and `showLanguage` (`show-language`: a small label such as "JSON"). The copy button still copies the raw text. Tokens are rendered as text spans (`token-<type>` classes, nested `Text` on native), never as HTML.
+
+  The core adds a dependency-free tokenizer, `highlightCode(code, language)`, with `normalizeCodeLanguage()`, `splitHighlightLines()`, `codeLanguageLabel()`, `supportedCodeLanguages` and `highlightTokenTypes`. The theme adds `--code-token-<type>-color` tokens (GitHub-like light and dark palettes with at least 4.5:1 contrast on every palette), resolved by `resolveTokens()` for React Native and the mini-programs. The styling hooks add the `line-number` part and make `language` a part on every renderer.
+
+  Behavior change: `<minerva-code-block>` and the Taro, uni-app and WeChat code blocks no longer show the language label just because `language` is set; add `show-language` / `showLanguage` to keep it.
+
+- 827e1d3: New `Flashcard` component: a two-sided study card that flips between a front (the prompt) and a back (the answer) for spaced-repetition review, with a 3D `rotateY` / `rotateX` flip (a crossfade under `prefers-reduced-motion`) and a height that fits the taller face. Props: `front` / `back` / `footer`, `frontLabel` / `backLabel` (translated "Question" / "Answer" by default), `hint` / `showHint`, `flipped` / `defaultFlipped` / `onFlippedChange`, `flipOnClick`, `disabled`, `axis`, `variant` (elevated, outline, filled), `size` and `minHeight`. The card is a toggle button (`aria-pressed`, Enter / Space) that ignores clicks on interactive content inside a face; the hidden face is inert and the revealed answer is announced. On every renderer: React, React Native, Taro, Vue (`v-model:flipped`), Angular (`MnFlashcard`, `[(flipped)]`), Web Components (`<minerva-flashcard>`, `minerva-flipped-change`), uni-app and WeChat (`front` / `back` / `footer` slots, `flippedchange`). `@minerva/dom` adds `isInteractiveEventTarget()`.
+- 827e1d3: KanbanBoard / KanbanColumn on every renderer: a horizontally scrolling board of equal-width status columns (columnWidth, fill, gap, height / maxHeight with vertically scrolling column bodies, scroll snapping on narrow screens) and columns with an accent color, a title, a count badge announced with the title, a description, actions, a role=list of cards, translated empty content and a footer. Drag and drop is not built in: move cards with your own actions.
+- 827e1d3: New `MediaPlayer` component: an audio / video player shell with themed custom controls — play / pause, skip back / forward (`skipSeconds`), a seek bar (`role="slider"`, localized `aria-valuetext` "1:23 of 4:56") showing the buffered range, `m:ss` / `h:mm:ss` time, mute and volume, a playback-speed cycle button (`playbackRates`), fullscreen and optional picture-in-picture, a loading spinner and a translated error state. The type is inferred from `mimeType` or the file extension (`type` overrides it); `startTime` resumes once on `loadedmetadata`; `title`, `poster`, `autoPlay`, `loop`, `muted` / `defaultMuted`, `preload`, `crossOrigin`, `controls={false}` (bare media element), `height` / `aspectRatio`. Events: `onTimeUpdate`, `onEnded`, `onPlay`, `onPause`, `onLoadedMetadata`, `onError`, `onRateChange`, `onVolumeChange`; imperative `play()` / `pause()` / `seek()` / `element`. Keyboard on the focused player: Space / K, ← / →, ↑ / ↓, M, F. Video gets a dark translucent overlay that fades while playing, audio a surface bar; dark mode and `prefers-reduced-motion` aware. On React (ref handle), Vue (`defineExpose`), Web Components (`<minerva-media-player>`, `minerva-*` events, `heading` slot, `no-controls`), Angular (`MnMediaPlayer`), and in beta on Taro, uni-app and WeChat (host `video` via `createVideoContext`, audio via `createInnerAudioContext`; mute only for video, device validation pending). React Native has no media element: `minerva-design/native` adds `MediaControls`, the same control bar driven by props, to wrap expo-video / expo-audio. `@minerva/core` adds the media helpers (`formatMediaTime`, `inferMediaType`, `nextPlaybackRate`, `mediaKeyAction`…).
+- 827e1d3: QuadrantChart: quadrant badges, descriptions and counts, selection rings, React header slot and an accessible point layer; readable intra-day Gantt schedules.
+
+  - `QuadrantRegion` gains `badge` (a pill such as "Q1") and `description` (a second line under the title); `showCounts` (boolean or `(count, points) => string`) writes the number of points after each title. Long titles are now cut with … to the quadrant width. Drawn on every renderer (React, Vue, Web Components, Angular, React Native, Taro, uni-app, WeChat; mini-programs take a boolean `showCounts`).
+  - `selectedIndex` / `selectedIndices` draw a ring around the selected dots on every renderer.
+  - React only: `renderQuadrantHeader(corner, { count, points, indices, region })` replaces the drawn title with React content in the outer corner of each quadrant; `accessiblePoints` (on by default) adds a visually hidden list of buttons per quadrant (Enter / Space → `onPointClick`, Shift + arrow keys → `onPointDrop` to the next quadrant, announced in a polite live region) and draws a focus ring around the focused dot; every dot gets an invisible anchor with `data-point-index` / `data-label` (`getPointProps` adds attributes such as `data-testid`) for end-to-end tests.
+  - Engine: `quadrantGroups`, `quadrantLabels` and `quadrantCountText` are exported from `minerva-design/charts/core`; rect annotations accept `badge`, `detail` and `description`; scatter series accept `stroke` (ring width, hollow with `opacity: 0`).
+  - GanttChart: schedules of a day or two snap the time range to whole hours (quarter hours under 3 hours) and keep at least four hour:minute ticks on narrow charts (2-hour steps available), so swimlanes such as priority lanes over 08:00–22:00 read cleanly.
+
+- 827e1d3: Add `SegmentedControl`, a single-choice segmented switch for modes and filters (iOS / Ant Design "Segmented" style), on every renderer: React (generic value type), Vue (`v-model`), web components (`<minerva-segmented-control>`, form-associated), Angular (`mn-segmented-control`, `[(value)]` / ControlValueAccessor), React Native, Taro, uni-app and WeChat mini programs. Options are strings or `{ value, label, icon, disabled, aria-label }` objects; supports `size`, `color` (`neutral` / `primary`), `fullWidth`, `disabled`, `name` and an animated sliding thumb (instant with reduced motion). Accessible as a `radiogroup` of `radio` segments with a roving tab stop, arrow keys that move and select (skipping disabled segments, RTL-aware) and Home / End. New styling hooks and `--segmented-control-*` CSS variables.
+- 827e1d3: Slider on every renderer (React, React Native, Vue, Web Components, Angular, Taro, uni-app and WeChat): one thumb or a two-thumb range that cannot cross, min / max / step or marks-only snapping, step or labelled marks, `onChange` while dragging and `onChangeEnd` on release (save there), five colors, three sizes, value label, tooltip, `formatValue` / `getAriaValueText`, FormControl integration and hidden form inputs. DOM thumbs are `role="slider"` with arrow / PageUp / PageDown / Home / End keys (mirrored in RTL) and pointer capture; React Native thumbs are adjustable; the mini-program renderers use a custom touch implementation. Shared value math lives in `@minerva/core` (`slider.ts`), with `slider` styling hooks and i18n strings.
+
 ## 1.12.1
 
 ### Patch Changes