@obosbbl/grunnmuren-react 3.8.1 → 3.8.2

package/dist/__stories__/layout.stories.cjs

@@ -340,8 +340,11 @@ const variants = cva.cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
+                // Break media out to full viewport width — except the VideoLoop wrapper (`:has(video)`), which
+                // stays container-width so its play button anchors to the grid container (see the video rule below).
+                '*:data-[slot=media]:*:not-has-[video]:absolute *:data-[slot=media]:*:not-has-[video]:left-0',
+                // Break only the VideoLoop's video out to full width; the wrapper (and its button) stay in the container.
+                '**:data-[slot=video]:relative **:data-[slot=video]:left-1/2 **:data-[slot=video]:min-w-screen **:data-[slot=video]:-translate-x-1/2',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
                 '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)

package/dist/__stories__/layout.stories.js

@@ -338,8 +338,11 @@ const variants = cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
+                // Break media out to full viewport width — except the VideoLoop wrapper (`:has(video)`), which
+                // stays container-width so its play button anchors to the grid container (see the video rule below).
+                '*:data-[slot=media]:*:not-has-[video]:absolute *:data-[slot=media]:*:not-has-[video]:left-0',
+                // Break only the VideoLoop's video out to full width; the wrapper (and its button) stay in the container.
+                '**:data-[slot=video]:relative **:data-[slot=video]:left-1/2 **:data-[slot=video]:min-w-screen **:data-[slot=video]:-translate-x-1/2',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
                 '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)

package/dist/index.d.mts

@@ -439,7 +439,7 @@ type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<t
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
 declare const headingVariants: (props?: ({
-    size?: "xl" | "l" | "m" | "s" | "xs" | undefined;
+    size?: "s" | "xl" | "l" | "m" | "xs" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;

package/dist/index.mjs

@@ -426,6 +426,16 @@ const translations$1 = {
         nb: 'Fullført',
         sv: 'Slutförd',
         en: 'Completed'
+    },
+    playAnimation: {
+        nb: 'Spill av animasjon',
+        sv: 'Spela upp animation',
+        en: 'Play animation'
+    },
+    pauseAnimation: {
+        nb: 'Pause animasjon',
+        sv: 'Pausa animation',
+        en: 'Pause animation'
     }
 };
 
@@ -1238,8 +1248,11 @@ const variants = cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
+                // Break media out to full viewport width — except the VideoLoop wrapper (`:has(video)`), which
+                // stays container-width so its play button anchors to the grid container (see the video rule below).
+                '*:data-[slot=media]:*:not-has-[video]:absolute *:data-[slot=media]:*:not-has-[video]:left-0',
+                // Break only the VideoLoop's video out to full width; the wrapper (and its button) stay in the container.
+                '**:data-[slot=video]:relative **:data-[slot=video]:left-1/2 **:data-[slot=video]:min-w-screen **:data-[slot=video]:-translate-x-1/2',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
                 '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
@@ -3639,19 +3652,23 @@ const VideoLoop = ({ src, format, alt, className })=>{
     }, [
         shouldPlay
     ]);
+    const togglePlayback = ()=>setShouldPlay((prevState)=>!prevState);
+    const locale = _useLocale();
     return /*#__PURE__*/ jsxs("div", {
-        className: cx(className, 'relative', prefersReducedMotion === null && 'opacity-0'),
+        className: cx(className, // group: hover anywhere reveals the button. @container: corner placement only when large.
+        'group @container relative', prefersReducedMotion === null && 'opacity-0'),
         "data-slot": "video-loop",
         children: [
             /*#__PURE__*/ jsx("video", {
                 "aria-hidden": true,
                 ref: videoRef,
-                // cursor-pointer is not working on the button below, so we add it here for the same effect
+                // Click anywhere on the video to toggle playback (in addition to the button)
                 className: "size-full max-h-[inherit] cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
                 loop: prefersReducedMotion === false,
                 autoPlay: prefersReducedMotion === false,
                 muted: true,
+                onClick: togglePlayback,
                 onEnded: (event)=>{
                     if (prefersReducedMotion) {
                         // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
@@ -3666,27 +3683,25 @@ const VideoLoop = ({ src, format, alt, className })=>{
                     type: `video/${format}`
                 })
             }),
-            prefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
-                "data-slot": "video-loop-button",
-                // oxlint-disable-next-line jsx-a11y/no-aria-hidden-on-focusable
-                "aria-hidden": true,
-                type: "button",
-                onClick: ()=>setShouldPlay((prevState)=>!prevState),
-                className: cx('absolute inset-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', 'rounded-[inherit]', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+            alt && /*#__PURE__*/ jsx("p", {
+                className: "sr-only",
+                children: alt
+            }),
+            prefersReducedMotion !== null && /*#__PURE__*/ jsx(Button, {
+                "aria-label": isPlaying ? translations$1.pauseAnimation[locale] : translations$1.playAnimation[locale],
+                isIconOnly: true,
+                variant: "primary",
+                color: "white",
+                onPress: togglePlayback,
+                className: cx(// Centered in small containers; moved to the bottom-left corner in larger ones
+                'absolute inset-0 m-auto size-fit', '@md:inset-auto @md:bottom-4 @md:left-4', // Opacity-only transition; overrides Button's `transition-colors` so the focus outline doesn't flash black→white
+                'transition-opacity duration-200', // Start hidden so the button fades in once the video plays
                 shouldPlay && 'opacity-0', isPlaying && [
-                    'transition-opacity duration-200',
                     // Only show the pause button when the video is hovered or focused
                     'focus-visible:opacity-100',
-                    'hover:opacity-100'
+                    'group-hover:opacity-100'
                 ]),
-                children: /*#__PURE__*/ jsx("span", {
-                    className: "grid size-12 place-items-center rounded-full bg-white outline-hidden",
-                    children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
-                })
-            }),
-            alt && /*#__PURE__*/ jsx("p", {
-                className: "sr-only",
-                children: alt
+                children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
             })
         ]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {