@obosbbl/grunnmuren-react 3.8.1 → 3.9.0

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/__stories__/typography.stories.cjs

@@ -106,6 +106,10 @@ const Lead = ()=>/*#__PURE__*/ jsxRuntime.jsx("p", {
         className: "lead",
         children: "Dokumentavgift er en avgift som du må betale til staten når du kjøper en fast eiendom."
     });
+const LeadSm = ()=>/*#__PURE__*/ jsxRuntime.jsx("p", {
+        className: "lead-sm",
+        children: "Dokumentavgift er en avgift som du må betale til staten når du kjøper en fast eiendom."
+    });
 const Body = ()=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
@@ -219,6 +223,7 @@ exports.Default = Default;
 exports.Description = Description;
 exports.Headings = Headings;
 exports.Lead = Lead;
+exports.LeadSm = LeadSm;
 exports.Prose = Prose;
 exports.ProseWhite = ProseWhite;
 exports.default = meta;

package/dist/__stories__/typography.stories.d.cts

@@ -4,6 +4,7 @@ import { Meta } from '@storybook/react-vite';
 declare const Default: () => react.JSX.Element;
 declare const Headings: () => react.JSX.Element;
 declare const Lead: () => react.JSX.Element;
+declare const LeadSm: () => react.JSX.Element;
 declare const Body: () => react.JSX.Element;
 declare const Blockquote: () => react.JSX.Element;
 declare const Description: () => react.JSX.Element;
@@ -11,4 +12,4 @@ declare const Prose: () => react.JSX.Element;
 declare const ProseWhite: () => react.JSX.Element;
 declare const meta: Meta;
 
-export { Blockquote, Body, Default, Description, Headings, Lead, Prose, ProseWhite, meta as default };
+export { Blockquote, Body, Default, Description, Headings, Lead, LeadSm, Prose, ProseWhite, meta as default };

package/dist/__stories__/typography.stories.d.ts

@@ -4,6 +4,7 @@ import { Meta } from '@storybook/react-vite';
 declare const Default: () => react.JSX.Element;
 declare const Headings: () => react.JSX.Element;
 declare const Lead: () => react.JSX.Element;
+declare const LeadSm: () => react.JSX.Element;
 declare const Body: () => react.JSX.Element;
 declare const Blockquote: () => react.JSX.Element;
 declare const Description: () => react.JSX.Element;
@@ -11,4 +12,4 @@ declare const Prose: () => react.JSX.Element;
 declare const ProseWhite: () => react.JSX.Element;
 declare const meta: Meta;
 
-export { Blockquote, Body, Default, Description, Headings, Lead, Prose, ProseWhite, meta as default };
+export { Blockquote, Body, Default, Description, Headings, Lead, LeadSm, Prose, ProseWhite, meta as default };

package/dist/__stories__/typography.stories.js

@@ -104,6 +104,10 @@ const Lead = ()=>/*#__PURE__*/ jsx("p", {
         className: "lead",
         children: "Dokumentavgift er en avgift som du må betale til staten når du kjøper en fast eiendom."
     });
+const LeadSm = ()=>/*#__PURE__*/ jsx("p", {
+        className: "lead-sm",
+        children: "Dokumentavgift er en avgift som du må betale til staten når du kjøper en fast eiendom."
+    });
 const Body = ()=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -211,4 +215,4 @@ const meta = {
     title: 'Typography'
 };
 
-export { Blockquote, Body, Default, Description, Headings, Lead, Prose, ProseWhite, meta as default };
+export { Blockquote, Body, Default, Description, Headings, Lead, LeadSm, Prose, ProseWhite, meta as default };

package/dist/index.d.mts

@@ -31,7 +31,7 @@ import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps a
 import { TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components/TagGroup';
 import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components/TextField';
 import { PopoverProps } from 'react-aria-components/Popover';
-import { HeaderProps } from 'react-aria-components/Header';
+import { HeaderProps as HeaderProps$1 } from 'react-aria-components/Header';
 import { ListBoxItemProps, ListBoxSectionProps } from 'react-aria-components/ListBox';
 export { ListBoxItemProps as ComboboxItemProps, ListBoxItemProps as SelectItemProps } from 'react-aria-components/ListBox';
 
@@ -400,7 +400,7 @@ declare const ListBoxSection: <T extends object>({ className, ...restProps }: Li
 /**
  * This component can be used to label grouped items in a `ListBoxSection` with a heading
  */
-declare const ListBoxHeader: (props: HeaderProps) => react.JSX.Element;
+declare const ListBoxHeader: (props: HeaderProps$1) => react.JSX.Element;
 
 type ComboboxProps<T extends object> = {
     children: React.ReactNode;
@@ -481,6 +481,34 @@ type CaptionProps = HTMLProps<HTMLDivElement> & {
 };
 declare const Caption: ({ className, ...restProps }: CaptionProps) => react.JSX.Element;
 declare const Footer: (props: FooterProps) => react.JSX.Element;
+type HeaderProps = HTMLProps<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+type HeaderProviderValues = [
+    [
+        typeof HeadingContext,
+        ContextValue<Partial<HeadingProps>, HTMLHeadingElement>
+    ],
+    [
+        typeof ButtonContext,
+        ContextValue<ButtonProps, HTMLButtonElement | HTMLAnchorElement>
+    ]
+];
+declare const HeaderContext: react.Context<{
+    /** @private Set by Modal/Drawer with the contexts to wrap the header content in */
+    _providerValues?: HeaderProviderValues;
+}>;
+/**
+ * Wraps the title of a Modal/Drawer (and, optionally, a `<Button slot="close" />`).
+ *
+ * Renders a `data-slot="header"` element consumers can style freely, e.g.
+ * `className="sticky top-0 bg-white"`. Inside a Modal/Drawer the dialog provides
+ * (via `HeaderContext`) the contexts to wrap the content in — wiring the title's
+ * accessible name (`aria-labelledby`) and the close button's appearance — so the
+ * consumer only writes a `Heading` and a bare `<Button slot="close" />`, with no
+ * `slot="title"` needed.
+ */
+declare const Header: ({ children, ...props }: HeaderProps) => react.JSX.Element;
 
 type DateFormatterProps = {
     value: Date | string;
@@ -991,5 +1019,5 @@ type VideoLoopProps = {
 };
 declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react.JSX.Element;
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Hero, HeroContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Pagination as UNSAFE_Pagination, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Toggletip as UNSAFE_Toggletip, ToggletipContent as UNSAFE_ToggletipContent, ToggletipTrigger as UNSAFE_ToggletipTrigger, VideoLoop, _useLocale as useLocale };
-export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, HeroContextValue, HeroProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, LinkProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DrawerProps as UNSAFE_DrawerProps, FileUploadProps as UNSAFE_FileUploadProps, ModalProps as UNSAFE_ModalProps, PaginationProps as UNSAFE_PaginationProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, ToggletipContentProps as UNSAFE_ToggletipContentProps, ToggletipProps as UNSAFE_ToggletipProps, ToggletipTriggerProps as UNSAFE_ToggletipTriggerProps };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Header, HeaderContext, Heading, HeadingContext, Hero, HeroContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Pagination as UNSAFE_Pagination, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Toggletip as UNSAFE_Toggletip, ToggletipContent as UNSAFE_ToggletipContent, ToggletipTrigger as UNSAFE_ToggletipTrigger, VideoLoop, _useLocale as useLocale };
+export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeaderProps, HeadingProps, HeroContextValue, HeroProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, LinkProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DrawerProps as UNSAFE_DrawerProps, FileUploadProps as UNSAFE_FileUploadProps, ModalProps as UNSAFE_ModalProps, PaginationProps as UNSAFE_PaginationProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, ToggletipContentProps as UNSAFE_ToggletipContentProps, ToggletipProps as UNSAFE_ToggletipProps, ToggletipTriggerProps as UNSAFE_ToggletipTriggerProps };

package/dist/index.mjs

@@ -24,6 +24,7 @@ import useEmblaCarousel from 'embla-carousel-react';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import { GroupContext, Group } from 'react-aria-components/Group';
 import { Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, OverlayTriggerStateContext } from 'react-aria-components/Dialog';
+import { HeadingContext as HeadingContext$1 } from 'react-aria-components/Heading';
 import { Modal as Modal$1, ModalOverlay } from 'react-aria-components/Modal';
 import { CheckboxContext, Checkbox as Checkbox$1 } from 'react-aria-components/Checkbox';
 import { Text } from 'react-aria-components/Text';
@@ -33,7 +34,7 @@ import { Label as Label$1, LabelContext } from 'react-aria-components/Label';
 import { ComboBox } from 'react-aria-components/ComboBox';
 import { Input, InputContext } from 'react-aria-components/Input';
 import { Popover, OverlayArrow } from 'react-aria-components/Popover';
-import { Header } from 'react-aria-components/Header';
+import { Header as Header$1 } from 'react-aria-components/Header';
 import { ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1 } from 'react-aria-components/ListBox';
 import { useDateFormatter } from 'react-aria/useDateFormatter';
 import { FormContext } from 'react-aria-components/Form';
@@ -132,6 +133,27 @@ const Footer = (props)=>/*#__PURE__*/ jsx("div", {
         ...props,
         "data-slot": "footer"
     });
+const HeaderContext = /*#__PURE__*/ createContext({});
+/**
+ * Wraps the title of a Modal/Drawer (and, optionally, a `<Button slot="close" />`).
+ *
+ * Renders a `data-slot="header"` element consumers can style freely, e.g.
+ * `className="sticky top-0 bg-white"`. Inside a Modal/Drawer the dialog provides
+ * (via `HeaderContext`) the contexts to wrap the content in — wiring the title's
+ * accessible name (`aria-labelledby`) and the close button's appearance — so the
+ * consumer only writes a `Heading` and a bare `<Button slot="close" />`, with no
+ * `slot="title"` needed.
+ */ const Header = ({ children, ...props })=>{
+    const { _providerValues } = useContext(HeaderContext);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "header",
+        children: _providerValues ? /*#__PURE__*/ jsx(Provider, {
+            values: _providerValues,
+            children: children
+        }) : children
+    });
+};
 
 const disclosureButtonVariants = cva({
     base: [
@@ -426,6 +448,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 +1270,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.)
@@ -1337,55 +1372,68 @@ const _ModalOverlay = ({ style = {}, zIndex = 10, fullscreen, ...restProps })=>/
             ...style
         }
     });
-const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex, fullscreen = false, ...restProps })=>{
+const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex, fullscreen = false, ...restProps })=>/*#__PURE__*/ jsx(_ModalOverlay, {
+        isOpen: isOpen,
+        onOpenChange: onOpenChange,
+        defaultOpen: defaultOpen,
+        isDismissable: isDismissable,
+        isKeyboardDismissDisabled: !isDismissable,
+        zIndex: zIndex,
+        fullscreen: fullscreen,
+        children: /*#__PURE__*/ jsx(Modal$1, {
+            ...restProps,
+            className: ({ isEntering, isExiting })=>cx(className, 'overflow-auto bg-white text-left shadow-xl', fullscreen ? 'fixed inset-0' : 'w-full max-w-md rounded-2xl align-middle', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+                'motion-reduce:animate-none')
+        })
+    });
+/**
+ * Rendered inside RACDialog (where React Aria exposes the generated title id via
+ * its HeadingContext). Builds the contexts the header content needs and hands them
+ * to `Header` through `HeaderContext`, so `Header` only has to render a `Provider`
+ * around its own children — no knowledge of the dialog, close icon or locale.
+ */ const HeaderTitle = ({ children })=>{
+    const racTitle = useSlottedContext(HeadingContext$1, 'title');
     const locale = _useLocale();
     return /*#__PURE__*/ jsx(Provider, {
         values: [
             [
-                HeadingContext,
+                HeaderContext,
                 {
-                    slots: {
-                        [DEFAULT_SLOT]: {},
-                        title: {
-                            className: 'heading-s',
-                            _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
-                                    className: "flex items-center justify-between gap-x-2",
-                                    children: [
-                                        children,
-                                        isDismissable && /*#__PURE__*/ jsx(Button, {
-                                            slot: "close",
-                                            variant: "tertiary",
-                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
-                                            "aria-label": translations$1.close[locale],
-                                            onPress: ()=>onOpenChange?.(false),
-                                            children: /*#__PURE__*/ jsx(Close, {})
-                                        })
-                                    ]
-                                })
-                        }
-                    }
+                    _providerValues: [
+                        [
+                            HeadingContext,
+                            {
+                                className: 'heading-s',
+                                id: racTitle?.id
+                            }
+                        ],
+                        [
+                            ButtonContext,
+                            {
+                                slots: {
+                                    [DEFAULT_SLOT]: {},
+                                    // Appearance for a bare `<Button slot="close" />`; the close
+                                    // behaviour (onPress) comes from the Dialog's ButtonContext below.
+                                    close: {
+                                        variant: 'tertiary',
+                                        'aria-label': translations$1.close[locale],
+                                        className: 'data-focus-visible:outline-focus-inset px-2.5!',
+                                        children: /*#__PURE__*/ jsx(Close, {})
+                                    }
+                                }
+                            }
+                        ]
+                    ]
                 }
             ]
         ],
-        children: /*#__PURE__*/ jsx(_ModalOverlay, {
-            isOpen: isOpen,
-            onOpenChange: onOpenChange,
-            defaultOpen: defaultOpen,
-            isDismissable: isDismissable,
-            isKeyboardDismissDisabled: !isDismissable,
-            zIndex: zIndex,
-            fullscreen: fullscreen,
-            children: /*#__PURE__*/ jsx(Modal$1, {
-                ...restProps,
-                className: ({ isEntering, isExiting })=>cx(className, 'overflow-auto bg-white text-left shadow-xl', fullscreen ? 'fixed inset-0' : 'w-full max-w-md rounded-2xl align-middle', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
-                    'motion-reduce:animate-none')
-            })
-        })
+        children: children
     });
 };
 const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
         ...restProps,
-        className: cx(className, 'relative flex flex-col gap-y-5 p-4 outline-none', // Footer
+        className: cx(className, 'relative flex flex-col gap-y-5 p-4 outline-none', // Header
+        '**:data-[slot="header"]:flex **:data-[slot="header"]:items-center **:data-[slot="header"]:justify-between **:data-[slot="header"]:gap-x-2', // Footer
         '**:data-[slot="footer"]:flex **:data-[slot="footer"]:gap-x-2'),
         children: ({ close })=>/*#__PURE__*/ jsx(Provider, {
                 values: [
@@ -1406,7 +1454,9 @@ const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog
                         }
                     ]
                 ],
-                children: children
+                children: /*#__PURE__*/ jsx(HeaderTitle, {
+                    children: children
+                })
             })
     });
 /**
@@ -2002,7 +2052,7 @@ const ListBoxItem = (props)=>{
     });
 /**
  * This component can be used to label grouped items in a `ListBoxSection` with a heading
- */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
+ */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header$1, {
         ...props,
         className: cx(props.className, 'text-blue-dark mx-6 cursor-default py-2 leading-6 font-medium')
     });
@@ -2137,60 +2187,28 @@ const drawerVariants = cva({
         }
     ]
 });
-const Drawer = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex = 10, placement = 'right', style = {}, ...restProps })=>{
-    const locale = _useLocale();
-    return /*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                HeadingContext,
-                {
-                    slots: {
-                        [DEFAULT_SLOT]: {},
-                        title: {
-                            className: 'heading-s',
-                            _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
-                                    className: "flex items-center justify-between gap-x-2",
-                                    children: [
-                                        children,
-                                        isDismissable && /*#__PURE__*/ jsx(Button, {
-                                            slot: "close",
-                                            variant: "tertiary",
-                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
-                                            "aria-label": translations$1.close[locale],
-                                            onPress: ()=>onOpenChange?.(false),
-                                            children: /*#__PURE__*/ jsx(Close, {})
-                                        })
-                                    ]
-                                })
-                        }
-                    }
-                }
-            ]
-        ],
-        children: /*#__PURE__*/ jsx(ModalOverlay, {
-            isOpen: isOpen,
-            onOpenChange: onOpenChange,
-            defaultOpen: defaultOpen,
-            isDismissable: isDismissable,
-            isKeyboardDismissDisabled: !isDismissable,
-            style: {
-                zIndex,
-                ...style
-            },
-            className: ({ isEntering, isExiting })=>cx('fixed inset-0 bg-black/25 backdrop-blur-sm', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
-                'motion-reduce:animate-none'),
-            children: /*#__PURE__*/ jsx(Modal$1, {
-                ...restProps,
-                className: ({ isEntering, isExiting })=>drawerVariants({
-                        placement,
-                        isEntering,
-                        isExiting,
-                        className
-                    })
-            })
+const Drawer = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex = 10, placement = 'right', style = {}, ...restProps })=>/*#__PURE__*/ jsx(ModalOverlay, {
+        isOpen: isOpen,
+        onOpenChange: onOpenChange,
+        defaultOpen: defaultOpen,
+        isDismissable: isDismissable,
+        isKeyboardDismissDisabled: !isDismissable,
+        style: {
+            zIndex,
+            ...style
+        },
+        className: ({ isEntering, isExiting })=>cx('fixed inset-0 bg-black/25 backdrop-blur-sm', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+            'motion-reduce:animate-none'),
+        children: /*#__PURE__*/ jsx(Modal$1, {
+            ...restProps,
+            className: ({ isEntering, isExiting })=>drawerVariants({
+                    placement,
+                    isEntering,
+                    isExiting,
+                    className
+                })
         })
     });
-};
 
 /**
  * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
@@ -3639,19 +3657,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,30 +3688,28 @@ 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, {})
             })
         ]
     });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Hero, HeroContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Pagination as UNSAFE_Pagination, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Toggletip as UNSAFE_Toggletip, ToggletipContent as UNSAFE_ToggletipContent, ToggletipTrigger as UNSAFE_ToggletipTrigger, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Header, HeaderContext, Heading, HeadingContext, Hero, HeroContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Pagination as UNSAFE_Pagination, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Toggletip as UNSAFE_Toggletip, ToggletipContent as UNSAFE_ToggletipContent, ToggletipTrigger as UNSAFE_ToggletipTrigger, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "react-aria-components": "^1.17.0",
     "react-stately": "^3.46.0",
     "use-debounce": "^10.0.4",
-    "@obosbbl/grunnmuren-icons-react": "^2.2.1"
+    "@obosbbl/grunnmuren-icons-react": "^2.3.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "react": "^19",
-    "@obosbbl/grunnmuren-tailwind": "^2.4.12"
+    "@obosbbl/grunnmuren-tailwind": "^2.5.0"
   },
   "scripts": {
     "build": "bunchee"