origam 2.3.0 → 2.5.0

package/CHANGELOG.md

@@ -13,7 +13,164 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
-_(empty — next features will land here.)_
+### Added
+
+- `OrigamTextMask` — text reveals an animated background via
+  `background-clip: text`. Accepts gradient (raw / `IGradient` /
+  preset name) or image / video URL as `background`. 4 animation
+  types (`pan` / `rotate` / `pulse` / `zoom`) with respect to
+  `prefers-reduced-motion`. Default slot supports rich markup
+  (multi-line headlines, nested elements). Zero JS animation
+  (pure CSS keyframes). SSR-safe. Baseline 2024 browser support
+  documented.
+- Gradient support for `color` / `bgColor` / `textColor` props across
+  the DS. Three input formats: raw CSS gradient string
+  (`color="linear-gradient(...)"`), structured `IGradient` object
+  (`{ from, to, via?, direction?, type? }` or `{ stops: [...] }`), and
+  preset names (`color="gradient-sunset"` resolves to
+  `var(--origam-gradient---sunset)`). 5 built-in semantic presets
+  (`sunset`, `ocean`, `forest`, `fire`, `midnight`) with light + dark
+  variants. Text gradient via `background-clip: text` when applied to
+  `color` (not `bgColor`). 100 % backward compatible.
+- `OrigamChart` + `useChart` — in-house chart component. 8 types
+  (`line` / `area` / `bar` / `column` / `pie` / `donut` / `scatter` /
+  `radar`). Pure SVG rendering (no canvas, no `d3`, no `chart.js`,
+  no `echarts`). Tooltip rendered inline (positioned via mouse move),
+  legend as a `<ul role="list">` with click-to-toggle series
+  visibility. Animated entrance with `prefers-reduced-motion` respect.
+  Custom slots for `tooltip` / `legend-item` / `title` / `empty`.
+  ARIA `role="img"` with `<title>` + `<desc>` for screen readers,
+  every data point is `tabindex="0"` + `role="button"` with a
+  descriptive `aria-label`. Pure-function SVG path utilities
+  (`linePath`, `smoothPath`, `areaPath`, `arcPath`, `polygonPath`,
+  `polarToCartesian`, `pathLength`) — SSR-safe. Scales / ticks /
+  paths produced by the `useChart` composable; reusable on its own
+  outside the component template. New `tokens/component/chart.json`
+  (title, subtitle, axis, grid, tooltip, legend, point, bar, pie,
+  radar, animation groups).
+- `OrigamCalendar` + `useCalendar` — full calendar component. 4 views
+  (month/week/day/agenda), navigation, events with
+  start/end/color/category, range select with drag-to-create, recurring
+  events (RRULE subset: `FREQ=DAILY|WEEKLY|MONTHLY` + `INTERVAL` +
+  `COUNT` + `UNTIL` + `BYDAY`). Built-in toolbar with view switcher.
+  Locale-aware via `Intl.DateTimeFormat`. Custom slots for header,
+  event card, day cell, empty state. Zero external dep — no FullCalendar
+  / Vue-Cal / event-source. Pure date helpers in
+  `src/utils/Calendar/`. ARIA `application/gridcell/toolbar` pattern +
+  keyboard navigation (arrow keys, Page Up / Page Down). SSR-safe (no
+  `window` / `document` at setup).
+- `OrigamSound` + `useAudioPlayer` + `useWaveform` composables —
+  in-house audio player. Wraps native `<audio>` with custom UI
+  (play/pause, scrubber, volume, optional waveform via
+  `OfflineAudioContext`). Media Session API integration for
+  lock-screen controls + metadata (title/artist/album/artwork).
+  Cover image. 3 controls modes (custom/native/none). Respects
+  `prefers-reduced-motion`. Zero external dep — no wavesurfer.js /
+  howler. ARIA: dynamic aria-labels, `role="slider"` on scrubber,
+  `role="img"` on waveform canvas. SSR-safe (Web Audio guarded).
+  New `tokens/component/sound.json` (background, cover, metadata,
+  controls, btn, time, scrubber, volume, waveform groups; aligned
+  with light/dark themes).
+- `OrigamVideo` + `useVideoPlayer` composable — in-house video player.
+  Wraps native `<video>` with custom UI (play/pause, scrubber, volume,
+  fullscreen, PIP, captions). 3 controls modes (custom/native/none).
+  Captions/subtitles via WebVTT tracks with language switcher. Aspect-
+  ratio prop preset (`16/9`, `4/3`, `1/1`, `21/9`, `9/16`, raw values).
+  Respects `prefers-reduced-motion` (auto-disables autoplay + console
+  warn). Zero external dep — no plyr / video.js / hls.js (HLS/DASH
+  stays peer dep optional if needed later). ARIA: dynamic aria-labels
+  on controls, `role="slider"` on scrubber, `role="status"` on
+  loading, `role="alert"` on error. SSR-friendly (composable defers
+  every DOM access to `onMounted`). New `tokens/component/video.json`
+  (background, controls, btn, time, scrubber, volume, loading, error
+  groups; aligned with light/dark themes).
+- `OrigamWatermark` + `useWatermark` composable — diagonal repeating
+  overlay for confidential previews / draft markers / sensitive
+  screenshots. SVG data-URL pattern (no canvas, no images required
+  for text mode). Configurable text or image, opacity, angle, gap,
+  font. Anti-tamper option via MutationObserver (dissuasive, not a
+  security feature). `pointer-events: none` so the wrapped content
+  stays interactive. New `tokens/component/watermark.json`
+  (color, opacity presets low/medium/high, gap presets
+  tight/medium/loose, font-size presets sm/md/lg, z-index).
+  `aria-hidden="true"` on the overlay so screen readers ignore the
+  watermark. SSR-safe (pure-string SVG construction). Programmatic
+  `install(target?)` / `uninstall()` helpers exposed by the
+  composable for non-component use cases.
+- `OrigamQRCode` + `useQRCode` composable — SVG QR code rendering.
+  Powered by `qrcode-generator` (~5 kB, pure JS, no canvas dep). 4
+  error correction levels (L/M/Q/H). Optional logo overlay
+  (auto-padded white background, ~20 % max recommended size).
+  Rounded modules option. SSR-safe (pure JS encoding). ARIA
+  `role="img"` + `aria-label` (defaults to `"QR code for {value}"`,
+  overridable via prop). Module-level LRU cache (16 entries, keyed on
+  value + ECC) so re-renders with the same payload reuse the matrix.
+- `OrigamNumberFormat` + `useNumberFormat` composable — i18n number
+  formatting via `Intl.NumberFormat` (no external dep). 7 formats
+  (`decimal` / `currency` / `percent` / `unit` / `compact` /
+  `scientific` / `engineering`), full locale support with auto
+  resolution chain (`<html lang>` → `navigator.language` → `'en-US'`),
+  currency / unit / sign / notation controls. LRU-cached `Intl`
+  instances (16-entry capacity, keyed on serialised options). Scoped
+  `#default` slot exposes `{ formatted, parts, value }` for custom
+  rendering (e.g. highlight currency symbol). ARIA `aria-label`
+  expansion for compact notation (`1.2M` visible → `"1.2 million"` for
+  screen readers).
+- `OrigamInlineEdit` + `useInlineEdit` composable — edit-in-place
+  pattern. Click the display affordance → an input appears prefilled
+  with the current value → `Enter` confirms / `Escape` cancels. v-model
+  binds to the value, sync or async `validate` callback returns
+  `true | string | Promise<true | string>` and keeps the editor open
+  on error (`role="alert"` for screen readers). Multiline mode renders
+  a `<textarea>` (Cmd/Ctrl+Enter to confirm). Custom slots for
+  `#display` / `#edit` / `#actions`. Loading state during async
+  validation via `aria-busy` + optional CSS hook. New
+  `tokens/component/inline-edit.json` (display + editor + error
+  padding / border / color / focus ring). ARIA `aria-label` on the
+  display button, `aria-invalid` + `aria-describedby` on the input.
+- `OrigamClipboard` + `useClipboard` composable — copy-to-clipboard
+  helper. Wraps any trigger with `navigator.clipboard.writeText` +
+  `execCommand` fallback. Scoped `#default` slot exposes
+  `{ copy, copied, error }`. Auto-resetting feedback state after
+  configurable duration. ARIA `aria-live="polite"` on the feedback
+  overlay. SSR-safe (guards on `typeof navigator` /
+  `typeof document`). New `tokens/component/clipboard.json` (feedback
+  pill color, background, padding, border-radius, transition
+  duration).
+- `OrigamEmptyState` — placeholder for absent data. 5 visual presets
+  (`no-data` / `no-results` / `error` / `offline` / `locked`) with
+  auto icon + intent mapping via `EMPTY_STATE_PRESET_CONFIG`. Slots
+  for `icon` / `title` / `description` / `actions` / `default` (full
+  layout override). Three sizes (`sm` / `md` / `lg`) and two
+  alignments (`center` / `left`). ARIA `role="status"` +
+  `aria-live="polite"` for dynamic empty transitions. New
+  `tokens/component/empty-state.json` (per-size padding / gap /
+  font-size, per-preset intent color).
+- `OrigamBlockquote` — typography component for long citations. 5
+  variants (default / elegant / quoted / minimal / pull). Author +
+  source + cite attribute support. Locale-aware decorative quote
+  marks (fr / en / es / de). Slots for custom author / source
+  rendering. ARIA via native blockquote semantics.
+- `OrigamMasonry` — Pinterest-style masonry layout. CSS-first via
+  `grid-template-rows: masonry` when supported (detected via
+  `useCssSupport` — new `masonry` feature flag in the registry). JS
+  fallback bucket-fill algorithm with `ResizeObserver` (no external
+  dep). Responsive columns via container-query breakpoints
+  (`columnBreakpoints`). Optional `transform` transition on item
+  reposition (`animated`, default `true`). Vertical alignment via
+  `align: 'top' | 'center'` (JS path only). New `useMasonry`
+  composable exporting `pickColumnsForWidth` and `bucketFill` pure
+  helpers; new `tokens/component/masonry.json`
+  (`animation-duration`, `animation-easing`).
+- `OrigamGrid` + `OrigamGridItem` — declarative CSS Grid wrapper. Props
+  for `columns` / `rows` / `areas` / `gap` (token or raw CSS) /
+  `autoFlow` / `align*` / `justify*` and the matching item-level
+  `column` / `row` / `area` / `*Self` shorthands. `GridItem` accepts
+  both object syntax (`{ start: 1, end: 5 }`, `{ start: 1, span: 4 }`)
+  and raw CSS strings (`'1 / 5'`, `'span 2'`) for fine-grained column /
+  row span control. New tokens `--origam-grid---gap-{xs,sm,md,lg,xl}`
+  resolved against `space.*` primitives. CSS Grid is stable since 2017
+  — no fallback needed.
 
 ---