@reykjavik/hanna-react 0.10.99 → 0.10.101

package/WizardLayoutClose.js

@@ -4,6 +4,8 @@ exports.WizardLayoutClose = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _Button_js_1 = require("./_abstract/_Button.js");
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const WizardLayoutClose = (props) => (react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "WizardLayoutClose" }, props)));
 exports.WizardLayoutClose = WizardLayoutClose;
 exports.default = exports.WizardLayoutClose;

package/WizardStepper.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from './utils.js';
 export type WizardStepperStep = {
     label: string;
     /**
@@ -31,6 +32,6 @@ export type WizardStepperProps = {
     /** By default, clickable steps after the active step are not immediately clickable */
     allowForwardSkip?: boolean;
     onClick: (clickedIndex: number) => void;
-};
+} & WrapperElmProps;
 export declare const WizardStepper: (props: WizardStepperProps) => JSX.Element;
 export default WizardStepper;

package/WizardStepper.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const WizardStepper = (props) => {
-    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick, wrapperProps, } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('WizardStepper', activeStep === -1 && 'preview', (wrapperProps || {}).className) }), steps.map((step, i) => {
         const { clickable, done, neutral } = step;
         const label = step.label || '…';
         const stepClass = (0, classUtils_1.modifiedClass)('WizardStepper__step', [

package/_abstract/_AbstractCarousel.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { SSRSupportProps } from '../utils.js';
+import { SSRSupportProps, WrapperElmProps } from '../utils.js';
 import { SeenProp } from '../utils/seenEffect.js';
 import { BemProps } from '../utils/types.js';
 export type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
@@ -20,7 +20,7 @@ export type CarouselProps<I extends Record<string, unknown> = {}, P extends Reco
      * `<Fragment />` or some such.
      */
     itemCount?: number;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
     title?: string;
 };

package/_abstract/_AbstractCarousel.js

@@ -23,15 +23,16 @@ const scrollXBy = (elm, deltaX) => {
     // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
     // while Firefox is more smooth. Haven't found a way around that.
 };
+// eslint-disable-next-line complexity
 const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
+    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, className, wrapperProps, } = props;
     const children = !props.children
         ? undefined
         : Array.isArray(props.children)
             ? props.children.filter(hanna_utils_1.notNully)
             : [props.children];
     const [leftOffset, setLeftOffset] = (0, react_1.useState)();
-    const itemCount = props.itemCount || (children || items).length;
+    const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
     const listRef = (0, react_1.useRef)(null);
     const [activeItem, setActiveItem] = (0, react_1.useState)(0);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
@@ -96,7 +97,9 @@ const AbstractCarousel = (props) => {
         items.map((item, i) => (
         // @ts-expect-error  (Can't be arsed...)
         react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), ref: outerRef, "data-sprinkled": isBrowser }),
         title && react_1.default.createElement("h2", { className: bem + '__title' }, title),
         isBrowser ? (react_1.default.createElement("div", { className: bem + '__itemlist-wrapper' },
             itemList,

package/_abstract/_Block.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from '../utils.js';
 import { SeenProp } from '../utils/seenEffect.js';
 import { BemModifierProps } from '../utils/types.js';
 import { ButtonProps } from './_Button.js';
@@ -15,7 +16,7 @@ export type ContentBlock = {
     content: Array<BlockItem>;
     image?: undefined;
 } & SeenProp;
-export type BlockProps = BemModifierProps & (ContentBlock | ContentImageBlock);
+export type BlockProps = (ContentBlock | ContentImageBlock) & BemModifierProps & WrapperElmProps;
 export declare const Block: (props: BlockProps & {
     bem: string;
 }) => JSX.Element;

package/_abstract/_Block.js

@@ -8,10 +8,10 @@ const seenEffect_js_1 = require("../utils/seenEffect.js");
 const _Button_js_1 = require("./_Button.js");
 const _Image_js_1 = require("./_Image.js");
 const Block = (props) => {
-    const { image, modifier, bem, content, startSeen } = props;
+    const { image, modifier, bem, content, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const contentItems = Array.isArray(content) ? content : [content];
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, (wrapperProps || {}).className), ref: ref }),
         contentItems.map(({ title, summary, buttons = [] }, i) => {
             const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
             return (react_1.default.createElement("div", { key: i, className: `${bem}__content` },
@@ -23,6 +23,6 @@ const Block = (props) => {
                         react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
                         ' ')))))));
         }),
-        image && react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image))));
+        image && react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: `${bem}__image` }, image))));
 };
 exports.Block = Block;

package/_abstract/_Button.js

@@ -25,8 +25,11 @@ const icons = {
     // TODO: insert icons
     edit: 'edit',
 };
+// NOTE: As this component already accepts all `<button/>` and `<a/>` props
+// directly, it makes little sense to add support for `wrapperProps` on top.
 const Button = (props) => {
-    const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const { bem, small, // eslint-disable-line deprecation/deprecation
+    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
         (0, classUtils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };

package/_abstract/_CardList.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { WrapperElmProps } from '../utils.js';
+import { BemModifierProps } from '../utils/types.js';
 import { ImageProps } from './_Image.js';
 export type TextCardProps = {
     title: string;
@@ -28,6 +30,6 @@ type _CardListProps = EitherObj<ImageCardListProps, TextCardListProps> & CardLis
     bemPrefix: string;
     children?: ReactNode;
     standalone?: boolean;
-};
+} & WrapperElmProps<'ul'> & BemModifierProps;
 export declare const CardList: (props: _CardListProps) => JSX.Element;
 export {};

package/_abstract/_CardList.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardList = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Button_js_1 = require("./_Button.js");
 const _Image_js_1 = require("./_Image.js");
 const Card = (props) => {
@@ -11,7 +12,7 @@ const Card = (props) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href, target: target },
             ' ',
-            !!(image || imgPlaceholder) && (react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
+            !!(image || imgPlaceholder) && (react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
             react_1.default.createElement("span", { className: `${cardClass}__title` }, title),
             ' ',
             meta && react_1.default.createElement("span", { className: `${cardClass}__meta` }, meta),
@@ -21,7 +22,7 @@ const Card = (props) => {
         ' '));
 };
 const CardList = (props) => {
-    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
+    const { bemPrefix, modifier, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, wrapperProps, } = props;
     const TitleTag = titleTag;
     const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
     const fallbackImageStyle = fallbackImageUrl
@@ -33,7 +34,9 @@ const CardList = (props) => {
         summaryElement ? (react_1.default.createElement("div", { className: bemPrefix + '__summary' },
             title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
             summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
-        react_1.default.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
+        react_1.default.createElement("ul", Object.assign({}, wrapperProps, { className: props.standalone
+                ? (0, classUtils_1.modifiedClass)(bemPrefix, modifier, (wrapperProps || {}).className)
+                : bemPrefix + '__list', style: fallbackImageStyle }), cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
             react_1.default.createElement(Card
             /* Assert as `ImageCardProps` to silence the imgPlaceholder false-positive */
             , Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),

package/_abstract/_Image.d.ts

@@ -1,3 +1,5 @@
+import { WrapperElmProps } from '../utils.js';
+import { BemProps } from '../utils/types.js';
 export type Source = {
     srcset: string;
     media: string;
@@ -23,14 +25,15 @@ export type ImagePropsInlinedSvg = {
 };
 export type ImageProps = ImagePropsLinked | ImagePropsInlinedSvg;
 type _ImageProps = {
-    /** container className */
-    className: string | undefined;
     /** Controls if the container is rendered when image is missing/undefined.
      * (With a `--missing` className modifier added.)
      *
      * Accepts a function that defines a default content for the container.
      */
     placeholder?: boolean | (() => JSX.Element);
-};
+    /** Extra, custom className in addition to the `bem` base */
+    className?: string | undefined;
+    bem: string | undefined;
+} & BemProps & WrapperElmProps;
 export declare const Image: (props: ImageProps & _ImageProps) => JSX.Element | null;
 export {};

package/_abstract/_Image.js

@@ -7,19 +7,26 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const useGetSVGtext_js_1 = require("../utils/useGetSVGtext.js");
 // eslint-disable-next-line complexity
 const Image = (props) => {
-    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, focalPoint, } = props;
+    const { src, altText = '', sources = [], preloadSrc, modifier, bem, inline, placeholder, focalPoint, className, wrapperProps = {}, } = props;
     const _src = (sources.length && preloadSrc) || src;
     const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
     const imgLoading = preloadSrc ? 'eager' : 'lazy';
     const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(inline ? imageSrc : undefined, altText);
+    const extraClasses = (0, classUtils_1.classes)(className, wrapperProps.className) || undefined;
+    const classNames = bem
+        ? (0, classUtils_1.modifiedClass)(bem, [modifier, !imageSrc && 'missing'], extraClasses)
+        : extraClasses;
     if (!imageSrc) {
-        return placeholder ? (react_1.default.createElement("span", { className: className && (0, classUtils_1.modifiedClass)(className, 'missing') }, placeholder !== true && placeholder())) : null;
+        return placeholder ? (react_1.default.createElement("span", Object.assign({}, props.wrapperProps, { className: classNames }), placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return react_1.default.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
+        return (react_1.default.createElement("span", Object.assign({}, props.wrapperProps, { className: classNames, dangerouslySetInnerHTML: { __html } })));
     }
-    return (react_1.default.createElement("picture", { className: className, style: focalPoint ? { '--focalPoint': focalPoint } : undefined },
+    const wrapperStyles = wrapperProps.style;
+    return (react_1.default.createElement("picture", Object.assign({}, props.wrapperProps, { className: classNames, style: focalPoint
+            ? Object.assign(Object.assign({}, wrapperStyles), { '--focalPoint': focalPoint })
+            : wrapperStyles }),
         ' ',
         sources.map((source, i) => (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),

package/_abstract/_Quote.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { WrapperElmProps } from '../utils.js';
 export type QuoteProps = {
     children: ReactNode;
-} & EitherObj<object, {
+} & WrapperElmProps & EitherObj<object, {
     by: string | JSX.Element;
     byHref?: string;
 }>;

package/_abstract/_Quote.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._Quote = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Link_js_1 = require("./_Link.js");
 const _Quote = (props) => {
-    const { bem, children, by, byHref } = props;
-    return (react_1.default.createElement("figure", { className: bem },
+    const { bem, children, by, byHref, wrapperProps } = props;
+    return (react_1.default.createElement("figure", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, null, (wrapperProps || {}).className) }),
         react_1.default.createElement("blockquote", { className: bem + '__quote' }, children),
         by && (react_1.default.createElement("figcaption", { className: bem + '__by' }, byHref ? (react_1.default.createElement(_Link_js_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
 };

package/_abstract/_TogglerGroup.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hooks_1 = require("@hugsmidjan/react/hooks");
 const utils_js_1 = require("../utils.js");
 const TogglerGroup = (props) => {
     const { 

package/_abstract/_TogglerGroupField.js

@@ -4,18 +4,18 @@ exports.TogglerGroupField = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const FormField_js_1 = tslib_1.__importDefault(require("../FormField.js"));
+const FormField_js_1 = tslib_1.__importStar(require("../FormField.js"));
 const _TogglerGroup_js_1 = require("./_TogglerGroup.js");
 const TogglerGroupField = (props) => {
-    const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value, defaultValue } = props, togglerGroupProps = tslib_1.__rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value", "defaultValue"]);
+    const _a = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { bem, Toggler, modifier, value, defaultValue, fieldWrapperProps } = _a, togglerGroupProps = tslib_1.__rest(_a, ["bem", "Toggler", "modifier", "value", "defaultValue", "fieldWrapperProps"]);
     const _value = (0, react_1.useMemo)(() => (value == null ? undefined : typeof value === 'string' ? [value] : value), [value]);
     const _defaultValue = (0, react_1.useMemo)(() => defaultValue == null
         ? undefined
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: !!disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
-            return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
-        } }));
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)(bem, modifier), group: true }, fieldWrapperProps, { renderInput: (className, inputProps) => {
+            return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: props.disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
+        } })));
 };
 exports.TogglerGroupField = TogglerGroupField;

package/_abstract/_TogglerInput.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from '../utils.js';
 import { BemModifierProps } from '../utils/types.js';
 export type TogglerInputProps = {
     label: string | JSX.Element;
@@ -13,9 +14,8 @@ export type TogglerInputProps = {
     reqText?: string | false;
     errorMessage?: string | JSX.Element;
     Wrapper?: 'div' | 'li';
-    wrapperProps?: JSX.IntrinsicElements['div'];
     inputProps?: JSX.IntrinsicElements['input'];
-} & BemModifierProps & Omit<JSX.IntrinsicElements['input'], 'type'>;
+} & BemModifierProps & WrapperElmProps & Omit<JSX.IntrinsicElements['input'], 'type'>;
 type _TogglerInputProps = {
     bem: string;
     type: 'radio' | 'checkbox';

package/_abstract/_TogglerInput.js

@@ -10,7 +10,7 @@ const TogglerInput = (props) => {
     const domid = (0, hooks_1.useDomid)(id);
     const errorId = errorMessage && 'error' + domid;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
-        // TODO: add mo-better i18n thinking
+        // FIXME: add mo-better i18n thinking
         title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
     const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
@@ -19,7 +19,9 @@ const TogglerInput = (props) => {
         " ",
         label,
         ' '));
-    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, className) }),
+    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className) }),
         react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
         ' ',
         react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },

package/esm/AccordionList.d.ts

@@ -1,5 +1,5 @@
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type AccordionListItemProps = {
     title: string | JSX.Element;
     content: string | JSX.Element | undefined;
@@ -19,6 +19,6 @@ export type AccordionListProps = {
     /** Index of those items that should start open (uncontrolled use) */
     defaultOpen?: Array<number>;
     wide?: boolean;
-} & SSRSupportProps & SeenProp;
+} & WrapperElmProps & SSRSupportProps & SeenProp;
 export declare const AccordionList: (props: AccordionListProps) => JSX.Element;
 export default AccordionList;

package/esm/AccordionList.js

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useDomid } from '@hugsmidjan/react/hooks';
 import { useSeenEffect } from './utils/seenEffect.js';
-import { useIsBrowserSide, useMixedControlState } from './utils.js';
+import { useIsBrowserSide, useMixedControlState, } from './utils.js';
 const AccordionListItem = (props) => {
     const { title, content, id, disabled = false, ssr, open, onToggle } = props;
     const defaultOpen = useRef(props.defaultOpen);
@@ -14,7 +14,7 @@ const AccordionListItem = (props) => {
         React.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
 export const AccordionList = (props) => {
-    const { items, ssr, wide, startSeen, defaultOpen } = props;
+    const { items, ssr, wide, startSeen, defaultOpen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
     const [open, setOpenArray, mode] = useMixedControlState(props, 'open', []);
     const onToggle = (index) => {
@@ -27,6 +27,6 @@ export const AccordionList = (props) => {
             return newOpen;
         });
     };
-    return (React.createElement("div", { className: modifiedClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('AccordionList', [wide && 'wide'], (wrapperProps || {}).className), ref: ref }), items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
 };
 export default AccordionList;

package/esm/ActionCards.d.ts

@@ -1,6 +1,7 @@
 import { CardListSummaryProps, TextCardListProps, TextCardProps } from './_abstract/_CardList.js';
 import { SeenProp } from './utils/seenEffect.js';
-export type ActionCardsProps = TextCardListProps & CardListSummaryProps & SeenProp;
+import { WrapperElmProps } from './utils.js';
+export type ActionCardsProps = TextCardListProps & CardListSummaryProps & WrapperElmProps & SeenProp;
 export type ActionCardsItemProps = TextCardProps;
 export declare const ActionCards: (props: ActionCardsProps) => JSX.Element;
 export default ActionCards;

package/esm/ActionCards.js

@@ -4,6 +4,6 @@ import { useSeenEffect } from './utils/seenEffect.js';
 export const ActionCards = (props) => {
     const [ref] = useSeenEffect(props.startSeen);
     return (React.createElement("div", { className: "ActionCards", ref: ref },
-        React.createElement(CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
+        React.createElement(CardList, Object.assign({ bemPrefix: "ActionCards" }, props, { wrapperProps: undefined }))));
 };
 export default ActionCards;

package/esm/Alert.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type AlertI18n = {
     closeLabel: string;
     closeLabelLong?: string;
@@ -42,6 +42,6 @@ export type AlertProps = {
     onClose?(event: MouseEvent): void | boolean;
     /** Callback that fires after the alert has closed/transitoned out */
     onClosed?(): void;
-}>;
+}> & WrapperElmProps<null, 'role' | 'hidden'>;
 export declare const Alert: (props: AlertProps) => JSX.Element;
 export default Alert;

package/esm/Alert.js

@@ -3,21 +3,31 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Button } from './_abstract/_Button.js';
 import { isPreact } from './utils/env.js';
-import { useIsBrowserSide } from './utils.js';
+import { useIsBrowserSide, } from './utils.js';
 // FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
-const useAutoClosing = (autoClose) => {
+const useAutoClosing = (autoClose, props) => {
     const [temp, setTemp] = useState(0);
     if (!autoClose) {
         return { autoClosing: false };
     }
-    const thaw = () => setTemp((temp) => temp + 1);
-    const freeze = () => setTemp((temp) => temp - 1);
+    const thaw = (e) => {
+        setTemp((temp) => temp + 1);
+        const handler = props[e.type.startsWith('blur') ? 'onBlur' : 'onMouseLeave'];
+        // @ts-expect-error  (Proper fix ends up as too much code for this extreme edge case)
+        handler && handler(e);
+    };
+    const freeze = (e) => {
+        setTemp((temp) => temp - 1);
+        const handler = props[e.type.startsWith('focus') ? 'onFocus' : 'onMouseEnter'];
+        // @ts-expect-error  (Resolving ends up as too much code for this extreme edge case)
+        handler && handler(e);
+    };
     return {
         autoClosing: temp === 0,
         autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (isPreact && {
-            onfocusin: (e) => e.currentTarget !== e.target && freeze(),
-            onfocusout: (e) => e.currentTarget !== e.target && thaw(),
+            onfocusin: (e) => e.currentTarget !== e.target && freeze(e),
+            onfocusout: (e) => e.currentTarget !== e.target && thaw(e),
         })),
     };
 };
@@ -33,7 +43,8 @@ export const alertTypes = {
     critical: 1,
 };
 export const Alert = (props) => {
-    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, } = props;
+    const { type, childrenHTML, children, onClose, // eslint-disable-line deprecation/deprecation
+    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = useRef();
     const [open, setOpen] = useState(!!ssr);
@@ -46,7 +57,7 @@ export const Alert = (props) => {
     const closeAlert = useCallback((event) => {
         const ret = onClose &&
             // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.11)
-            onClose(event);
+            onClose(event); // eslint-disable-line deprecation/deprecation
         if (ret !== false) {
             setOpen(false);
             if (closing.current) {
@@ -58,7 +69,7 @@ export const Alert = (props) => {
             }, AlertCloseTransitionDuration);
         }
     }, [onClose, onClosed]);
-    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose);
+    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose, props);
     useEffect(() => {
         if (autoClosing) {
             let autoCloseTimeout;
@@ -77,10 +88,7 @@ export const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (React.createElement("div", Object.assign({ className: modifiedClass('Alert', [
-            !!alertTypes[type] && type,
-            closable && 'closable',
-        ]), role: "alert", hidden: !open || undefined }, autoClosingProps),
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Alert', [!!alertTypes[type] && type, closable && 'closable'], (wrapperProps || {}).className), role: "alert", hidden: !open || undefined }, autoClosingProps),
         childrenHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
         ' ',
         showCloseButton && (React.createElement(Button, Object.assign({ bem: "Alert__close" }, (closeUrl != null ? { href: closeUrl } : { type: 'button' }), { onClick: (e) => {

package/esm/ArticleCards.d.ts

@@ -1,7 +1,10 @@
 import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList.js';
+import { WrapperElmProps } from './utils.js';
 export type ArticleCardsItemProps = ImageCardProps;
 /** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
 export type ArticleCardProps = ArticleCardsItemProps;
-export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>;
+export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'> & {
+    size?: 'large' | 'normal';
+} & WrapperElmProps<'ul'>;
 export declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
 export default ArticleCards;

package/esm/ArticleCards.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CardList } from './_abstract/_CardList.js';
-export const ArticleCards = (props) => (React.createElement(CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
+export const ArticleCards = (props) => (React.createElement(CardList, { bemPrefix: "ArticleCards", modifier: props.size === 'large' ? 'large' : undefined, standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true, wrapperProps: props.wrapperProps }));
 export default ArticleCards;

package/esm/ArticleCarousel/_ArticleCarouselCard.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
 import { Image } from '../_abstract/_Image.js';
 import { Link } from '../_abstract/_Link.js';
@@ -11,7 +10,7 @@ export const ArticleCarouselCard = (props) => {
     return (React.createElement("div", { className: "ArticleCarouselCard", "data-color": color && colorFamilies[color], "data-color-theme": !color ? theme && themeOptions[theme] : undefined },
         React.createElement(Link, { className: "ArticleCarouselCard__link", href: href, target: target },
             ' ',
-            React.createElement(Image, Object.assign({ placeholder: true, className: modifiedClass('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            React.createElement(Image, Object.assign({ bem: "ArticleCarouselCard__illustration", modifier: photo && 'photo', placeholder: true }, imageProps)),
             React.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
             ' '),
         ' ',

package/esm/ArticleCarousel.d.ts

@@ -1,11 +1,11 @@
 import { ArticleCarouselCardProps, ArticleCarouselImageProps } from './ArticleCarousel/_ArticleCarouselCard.js';
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ArticleCarouselProps = {
     items: Array<ArticleCarouselCardProps>;
     title?: string;
     moreLabel?: string;
-} & SSRSupportProps & SeenProp;
+} & WrapperElmProps & SSRSupportProps & SeenProp;
 export type { ArticleCarouselCardProps, ArticleCarouselImageProps };
 export declare const ArticleCarousel: (props: ArticleCarouselProps) => JSX.Element;
 export default ArticleCarousel;

package/esm/ArticleCarousel.js

@@ -3,6 +3,6 @@ import { AbstractCarousel } from './_abstract/_AbstractCarousel.js';
 import { ArticleCarouselCard, } from './ArticleCarousel/_ArticleCarouselCard.js';
 export const ArticleCarousel = (props) => {
     const { title, items, moreLabel, ssr, startSeen } = props;
-    return (React.createElement(AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen }));
+    return (React.createElement(AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen, wrapperProps: props.wrapperProps }));
 };
 export default ArticleCarousel;

package/esm/ArticleMeta.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from './utils.js';
 export type ArticleMetaItem = {
     label: string;
     href?: string;
@@ -5,6 +6,6 @@ export type ArticleMetaItem = {
 export type ArticleMetaProps = {
     items: Array<ArticleMetaItem>;
     small?: boolean;
-};
+} & WrapperElmProps;
 export declare const ArticleMeta: (props: ArticleMetaProps) => JSX.Element | null;
 export default ArticleMeta;

package/esm/ArticleMeta.js

@@ -2,11 +2,11 @@ import React, { Fragment } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Link } from './_abstract/_Link.js';
 export const ArticleMeta = (props) => {
-    const { items, small } = props;
+    const { items, small, wrapperProps } = props;
     if (items.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: modifiedClass('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ArticleMeta', small && 'small', (wrapperProps || {}).className) }), items.map(({ label, href }, i) => (React.createElement(Fragment, { key: i },
         href == null ? (React.createElement("span", { className: "ArticleMeta__item" },
             " ",
             label,

package/esm/Attention.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type AttentionProps = {
     small?: boolean;
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const Attention: (props: AttentionProps) => JSX.Element;
 export default Attention;