@arc-ui/community-components 3.13.1 → 3.14.0

package/lib/VideoHeroCard/VideoHeroCard.mjs

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mj
 import React__default, { useId } from 'react';
 import { Visible } from '@arc-ui/components/Visible';
 import { Spacing } from '@arc-ui/components/Spacing';
-import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-K6eHIeAM.mjs';
+import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-B8JS-s6O.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Icon } from '@arc-ui/components/Icon';
 import { Text } from '@arc-ui/components/Text';
@@ -37,7 +37,7 @@ const BtIconClock =
 var styles = {"mainText--lightBackground":"VideoHeroCardContent-module_mainText--lightBackground__nGl6W","statContainer--lightBackground":"VideoHeroCardContent-module_statContainer--lightBackground__7hXAf","statContainer--darkBackground":"VideoHeroCardContent-module_statContainer--darkBackground__X3-r2","mainText--darkBackground":"VideoHeroCardContent-module_mainText--darkBackground__Pfizt","statContainer":"VideoHeroCardContent-module_statContainer__q21g9","stat":"VideoHeroCardContent-module_stat__iIcoq"};
 
 var VideoHeroCardContent = function (_a) {
-    var title = _a.title, label = _a.label, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
+    var title = _a.title, label = _a.label, _b = _a.titleLevel, titleLevel = _b === void 0 ? "3" : _b, labelLevel = _a.labelLevel, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
     var id = useId();
     var metaItems = [
         { icon: BtIconCalendar, text: videoDate },
@@ -50,9 +50,9 @@ var VideoHeroCardContent = function (_a) {
     var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
     return (React__default.createElement("div", { className: styles["".concat(background, "Background")] },
         React__default.createElement("div", { className: classNames(styles.mainText, styles["mainText--".concat(background, "Background")]) },
-            React__default.createElement(Heading, { fontStyle: "overline" }, label),
+            React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
             React__default.createElement(VerticalSpace, { size: "8", sizeM: "4" }),
-            React__default.createElement(Heading, { level: "3", isWordWrap: false, size: "xl" }, title),
+            React__default.createElement(Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
             React__default.createElement(VerticalSpace, { size: "16" }),
             React__default.createElement(Text, null, description)),
         hasMeta && (React__default.createElement(React__default.Fragment, null,

package/lib/VideoPortraitCard/VideoPortraitCard.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var Heading = require('@arc-ui/components/Heading');
 var Surface = require('@arc-ui/components/Surface');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
-var VideoCardThumbnail = require('../_shared/cjs/VideoCardThumbnail-BM3GwyWR.cjs');
+var VideoCardThumbnail = require('../_shared/cjs/VideoCardThumbnail-DhdbNf5c.cjs');
 require('../_shared/cjs/index-B7Z7sgRq.cjs');
 require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('@arc-ui/components/Icon');
@@ -15,9 +15,9 @@ var VideoPortraitCard = function (_a) {
     var thumbnail = _a.thumbnail, player = _a.player, props = tslib_es6.__rest(_a, ["thumbnail", "player"]);
     return (React.createElement(VideoCardThumbnail.VideoCardPlayer, tslib_es6.__assign({ thumbnail: thumbnail && (React.createElement(VideoCardThumbnail.VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
             React.createElement(Surface.Surface, { isTransparent: true, background: "dark-black" },
-                React.createElement(Heading.Heading, { fontStyle: "overline" }, thumbnail.label),
+                React.createElement(Heading.Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, thumbnail.label),
                 React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
-                React.createElement(Heading.Heading, { level: "3", isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
+                React.createElement(Heading.Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
 };
 
 exports.VideoPortraitCard = VideoPortraitCard;

package/lib/VideoPortraitCard/VideoPortraitCard.mjs

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { Heading } from '@arc-ui/components/Heading';
 import { Surface } from '@arc-ui/components/Surface';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
-import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-K6eHIeAM.mjs';
+import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-B8JS-s6O.mjs';
 import '../_shared/esm/index-BSO2EFem.mjs';
 import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '@arc-ui/components/Icon';
@@ -13,9 +13,9 @@ var VideoPortraitCard = function (_a) {
     var thumbnail = _a.thumbnail, player = _a.player, props = __rest(_a, ["thumbnail", "player"]);
     return (React__default.createElement(VideoCardPlayer, __assign({ thumbnail: thumbnail && (React__default.createElement(VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
             React__default.createElement(Surface, { isTransparent: true, background: "dark-black" },
-                React__default.createElement(Heading, { fontStyle: "overline" }, thumbnail.label),
+                React__default.createElement(Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, thumbnail.label),
                 React__default.createElement(VerticalSpace, { size: "8" }),
-                React__default.createElement(Heading, { level: "3", isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
+                React__default.createElement(Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
 };
 
 export { VideoPortraitCard };

package/lib/_shared/cjs/{VideoCardThumbnail-BM3GwyWR.cjs → VideoCardThumbnail-DhdbNf5c.cjs}

@@ -421,12 +421,20 @@ var styles$1 = {"container":"VideoCardPlayer-module_container__G-Uta","player":"
 var VideoCardPlayer = function (_a) {
     var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = tslib_es6.__rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
     var _b = React.useState(false), isClient = _b[0], setIsClient = _b[1];
+    var playerWrapperRef = React.useRef(null);
     React.useEffect(function () {
         setIsClient(true);
     }, []);
-    var playerProps = tslib_es6.__assign(tslib_es6.__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%" });
+    var handleClickPreview = React.useCallback(function () {
+        // Restore focus to the player wrapper after preview is clicked.
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }, []);
+    var playerProps = tslib_es6.__assign(tslib_es6.__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%", onClickPreview: handleClickPreview });
     return (React.createElement("div", tslib_es6.__assign({ className: styles$1.container }, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { "data-testid": "arc-video-card", className: index.classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(src_default, tslib_es6.__assign({}, playerProps))),
+        React.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: index.classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(src_default, tslib_es6.__assign({}, playerProps))),
         children));
 };
 

package/lib/_shared/cjs/{index.es-DcJ01c8P.cjs → index.es-5qmN4ppJ.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 23 Jul 2026 08:25:27 GMT
+ * Generated on Thu, 20 Aug 2026 14:34:09 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/esm/{VideoCardThumbnail-K6eHIeAM.mjs → VideoCardThumbnail-B8JS-s6O.mjs}

@@ -419,12 +419,20 @@ var styles$1 = {"container":"VideoCardPlayer-module_container__G-Uta","player":"
 var VideoCardPlayer = function (_a) {
     var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
     var _b = useState(false), isClient = _b[0], setIsClient = _b[1];
+    var playerWrapperRef = useRef(null);
     useEffect(function () {
         setIsClient(true);
     }, []);
-    var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React__default.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%" });
+    var handleClickPreview = useCallback(function () {
+        // Restore focus to the player wrapper after preview is clicked.
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }, []);
+    var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React__default.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%", onClickPreview: handleClickPreview });
     return (React__default.createElement("div", __assign({ className: styles$1.container }, filterAttrs(props)),
-        React__default.createElement("div", { "data-testid": "arc-video-card", className: classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React__default.createElement(src_default, __assign({}, playerProps))),
+        React__default.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React__default.createElement(src_default, __assign({}, playerProps))),
         children));
 };
 

package/lib/_shared/esm/{index.es-C76rXaZz.mjs → index.es-Cis5MKaa.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 23 Jul 2026 08:25:27 GMT
+ * Generated on Thu, 20 Aug 2026 14:34:09 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";