@kolkrabbi/kol-component 0.69.1 → 0.70.0

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.69.1",
+  "version": "0.70.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
   "main": "./src/index.js",
   "module": "./src/index.js",
   "exports": {
@@ -15,24 +14,13 @@
     "./utilities/*": "./src/utilities/*.jsx",
     "./hooks/*": "./src/hooks/*.js"
   },
-  "files": [
-    "src",
-    "README.md"
-  ],
-  "keywords": [
-    "kol",
-    "kolkrabbi",
-    "design-system",
-    "react",
-    "components"
-  ],
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.18.0"
+    "react-syntax-highlighter": "^16.1.1"
   },
   "peerDependencies": {
+    "@kolkrabbi/kol-icons": ">=0.18.0",
     "framer-motion": "^12.0.0",
     "gsap": "^3.13.0",
     "hls.js": "^1.6.0",
@@ -41,14 +29,20 @@
     "react-dom": "^18.3.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
-  "peerDependenciesMeta": {
-    "react-router-dom": {
-      "optional": true
-    },
-    "opentype.js": {
-      "optional": true
-    }
+  "devDependencies": {
+    "@kolkrabbi/kol-icons": "^0.18.0"
   },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "kol",
+    "kolkrabbi",
+    "design-system",
+    "react",
+    "components"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Tor-Grimsson/kol-ds.git",
@@ -56,5 +50,14 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "sideEffects": false,
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    },
+    "opentype.js": {
+      "optional": true
+    }
   }
 }

package/src/atoms/HlsVideo.jsx

@@ -15,10 +15,20 @@ import Hls from 'hls.js'
  * @param {string}   poster    native poster frame shown before playback
  * @param {string}   className all layout/sizing/positioning (consumer-supplied)
  * @param {Function} onEnded   end-of-playback callback; its presence disables `loop`
+ * @param {boolean}  active    plays only while true (default true) — an
+ *   off-stage carousel slide pauses instead of autoplaying beside the
+ *   active one (FeaturedCarouselFullWidth, 2026-08-26)
  */
-export default function HlsVideo({ src, poster, className, onEnded, ...props }) {
+export default function HlsVideo({ src, poster, className, onEnded, active = true, ...props }) {
   const videoRef = useRef(null)
 
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+    if (active) video.play?.()?.catch?.(() => {})
+    else video.pause()
+  }, [active])
+
   useEffect(() => {
     const video = videoRef.current
     if (!video || !src) return
@@ -40,7 +50,7 @@ export default function HlsVideo({ src, poster, className, onEnded, ...props })
       poster={poster}
       className={className}
       style={{ pointerEvents: 'none' }}
-      autoPlay
+      autoPlay={active}
       loop={!onEnded}
       muted
       onEnded={onEnded}

package/src/organisms/FeaturedCarousel.jsx

@@ -1,4 +1,4 @@
-import { isValidElement, useCallback, useEffect, useState } from 'react'
+import { isValidElement, useCallback, useEffect, useRef, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import Image from '../atoms/Image.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
@@ -14,7 +14,21 @@ import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
  * `onTimeUpdate` attach to video elements only — they drive the active slide's
  * auto-advance and the progress bar; images ignore them.
  */
-function SlideMedia({ media, onEnded, onTimeUpdate }) {
+/* The plain (non-HLS) video plays only while its slide is on stage
+ * (FeaturedCarouselFullWidth, 2026-08-26): every slide's video used to
+ * autoplay, so the peeking neighbours ran beside the active one. */
+function InertVideo({ active, ...props }) {
+  const ref = useRef(null)
+  useEffect(() => {
+    const v = ref.current
+    if (!v) return
+    if (active) v.play?.()?.catch?.(() => {})
+    else v.pause()
+  }, [active])
+  return <video ref={ref} autoPlay={active} {...props} />
+}
+
+function SlideMedia({ media, active = true, onEnded, onTimeUpdate }) {
   if (!media) return null
   if (isValidElement(media)) return media
 
@@ -27,12 +41,12 @@ function SlideMedia({ media, onEnded, onTimeUpdate }) {
     // wired so the active slide plays once, then advances.
     if (src && !src.endsWith('.m3u8')) {
       return (
-        <video
+        <InertVideo
+          active={active}
           src={src}
           poster={poster}
           className="kol-featured-carousel-media"
           style={{ pointerEvents: 'none' }}
-          autoPlay
           loop={!onEnded}
           muted
           playsInline
@@ -46,6 +60,7 @@ function SlideMedia({ media, onEnded, onTimeUpdate }) {
       <HlsVideo
         src={src}
         poster={poster}
+        active={active}
         className="kol-featured-carousel-media"
         onEnded={onEnded}
         onTimeUpdate={onTimeUpdate}
@@ -110,8 +125,10 @@ function SlideMedia({ media, onEnded, onTimeUpdate }) {
  * @param {boolean}  showTitle        global title visibility; per-item `showTitle` overrides (default true)
  * @param {boolean}  showDescription  global description visibility; per-item overrides (default true)
  * @param {boolean}  showCta          global CTA visibility; per-item `showCta` overrides (default true)
- * @param {boolean}  fullWidth        drop the section's own vertical padding — the
- *                                    slide frame spans its container (default false)
+ * @param {boolean}  fullWidth        the slide FILLS the container (`.is-full`,
+ *                                    kol-framework.css ≥0.25.0) and the section
+ *                                    drops its own vertical padding; default false
+ *                                    keeps the 72vw peek
  * @param {boolean}  rounded          frame border + radius (default true)
  * @param {'stack'|'header'} navPosition  prev/next under the viewport, or in the
  *                                    header row beside the counter (default 'stack')
@@ -223,7 +240,7 @@ export default function FeaturedCarousel({
 
   return (
     <section
-      className={`kol-featured-carousel w-full ${fullWidth ? '' : 'py-16'} ${className}`.trim()}
+      className={`kol-featured-carousel w-full ${fullWidth ? 'is-full' : 'py-16'} ${className}`.trim()}
       onMouseEnter={autoPlay ? () => setPaused(true) : undefined}
       onMouseLeave={autoPlay ? () => setPaused(false) : undefined}
     >
@@ -260,6 +277,7 @@ export default function FeaturedCarousel({
                     >
                       <SlideMedia
                         media={item.media}
+                        active={active}
                         onEnded={autoPlay && items.length > 1 && active ? advance : undefined}
                         onTimeUpdate={autoPlay && active ? handleVideoTime : undefined}
                       />