@arc-ui/community-components 3.8.0 → 3.8.1

package/lib/index.cjs

@@ -29,10 +29,10 @@ var TabbedBanner = require('@arc-ui/components/TabbedBanner');
 var Tag = require('@arc-ui/components/Tag');
 var Toast = require('@arc-ui/components/Toast');
 var VisuallyHidden = require('@arc-ui/components/VisuallyHidden');
+var Surface = require('@arc-ui/components/Surface');
 var Visible = require('@arc-ui/components/Visible');
 var Spacing = require('@arc-ui/components/Spacing');
 var ReactPlayer = require('react-player');
-var Surface = require('@arc-ui/components/Surface');
 var ContentSwitcher = require('@arc-ui/components/ContentSwitcher');
 var ContentSwitcherDropdown = require('@arc-ui/components/ContentSwitcherDropdown');
 
@@ -963,7 +963,7 @@ var SectionHeading = function (_a) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 21 Apr 2026 10:23:52 GMT
+ * Generated on Wed, 13 May 2026 07:47:26 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -3897,6 +3897,7 @@ var ProductNavigation = function (_a) {
     var _g = React.useState(false), hideLessButton = _g[0], setHideLessButton = _g[1];
     var _h = React.useState(cardsToDisplay), skipLinkCard = _h[0], setSkipLinkCard = _h[1];
     var _j = React.useState(productList.slice(0, cardsToDisplay)), displayList = _j[0], setDisplayList = _j[1];
+    var _k = React.useState(false), displaySkipButton = _k[0], setDisplaySkipButton = _k[1];
     var cardRef = React.useRef(null);
     React.useEffect(function () {
         if (defaultExpanded) {
@@ -3908,6 +3909,7 @@ var ProductNavigation = function (_a) {
         (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var clickController = function () {
+        setDisplaySkipButton(true);
         // show more / current list length + increment
         if (displayList.length < productList.length) {
             if (onClickMore)
@@ -3941,8 +3943,8 @@ var ProductNavigation = function (_a) {
             !hideButton && !hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
                     ? "Show more"
                     : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
-            displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
-                React.createElement("div", { id: "skip-link", className: classNames(styles$d["productNavigation-skipLink"]), tabIndex: -1 },
+            hideButton ||
+                (displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$d["productNavigation-skipLink"]), tabIndex: -1 },
                     React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
             React.createElement(VisuallyHidden.VisuallyHidden, null,
                 React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
@@ -3979,10 +3981,10 @@ var ActionTile = function (_a) {
         React.createElement("div", { className: styles$b["action-tile-content"] },
             displayIcon && (React.createElement("div", { className: styles$b["action-tile-icon"] },
                 React.createElement(Icon.Icon, { icon: displayIcon, size: 48 }))),
-            React.createElement("h3", { className: styles$b["action-tile-heading"] }, heading)),
+            React.createElement("span", { className: styles$b["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles$b["action-tile-tick"] },
             React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
-    return (React.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
+    return (React.createElement("button", __assign({ type: "button", className: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
 var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
@@ -4000,10 +4002,10 @@ var LinkTile = function (_a) {
 var styles$9 = {"quick-help":"InlineLinkGroup-module_quick-help__cMTpB","quick-help-label":"InlineLinkGroup-module_quick-help-label__VLKen","quick-help-container":"InlineLinkGroup-module_quick-help-container__IStTk","quick-help-item":"InlineLinkGroup-module_quick-help-item__QTIMl","quick-help-separator":"InlineLinkGroup-module_quick-help-separator__qJE0q","quick-help-separator-line":"InlineLinkGroup-module_quick-help-separator-line__VbCVI"};
 
 var InlineLinkGroup = function (_a) {
-    var label = _a.label, links = _a.links, props = __rest(_a, ["label", "links"]);
+    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = __rest(_a, ["label", "headingLevel", "links"]);
     return (React.createElement("div", __assign({ className: styles$9["quick-help"] }, filterAttrs(props)),
         label && (React.createElement("div", { className: styles$9["quick-help-label"] },
-            React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label))),
+            React.createElement(Heading.Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
         React.createElement("ul", { className: styles$9["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
             React.createElement("li", { className: styles$9["quick-help-item"] },
                 React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
@@ -4012,14 +4014,17 @@ var InlineLinkGroup = function (_a) {
                 React.createElement("div", { className: styles$9["quick-help-separator-line"] }))))); }))));
 };
 
-var styles$8 = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","content":"ThumbnailSignpost-module_content__XG9oj","heading":"ThumbnailSignpost-module_heading__mTrpJ","image":"ThumbnailSignpost-module_image__syGZj","thumbnailButton":"ThumbnailSignpost-module_thumbnailButton__Nn-NR","buttonIcon":"ThumbnailSignpost-module_buttonIcon__ydmza"};
+var styles$8 = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","onDarkSurface":"ThumbnailSignpost-module_onDarkSurface__F2jUk","content":"ThumbnailSignpost-module_content__XG9oj","heading":"ThumbnailSignpost-module_heading__mTrpJ","image":"ThumbnailSignpost-module_image__syGZj","thumbnailButton":"ThumbnailSignpost-module_thumbnailButton__Nn-NR","buttonIcon":"ThumbnailSignpost-module_buttonIcon__ydmza"};
 
 /** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
 var ThumbnailSignpost = function (_a) {
     var _b;
     var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
+    var surface = React.useContext(Surface.SurfaceContext).surface;
+    var isDarkSurface = surface === "dark";
     return (React.createElement("div", __assign({ className: classNames(styles$8.thumbnailSignpost, (_b = {},
             _b[styles$8.isLink] = onClick,
+            _b[styles$8.onDarkSurface] = isDarkSurface,
             _b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
         img && (React.createElement("div", { className: styles$8.image },
             React.createElement(Image$2.Image, __assign({}, img)))),
@@ -4028,7 +4033,7 @@ var ThumbnailSignpost = function (_a) {
             React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
             text,
             buttonLabel && onClick && (React.createElement(React.Fragment, null,
-                React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
                 React.createElement("div", { className: styles$8.thumbnailButton },
                     React.createElement("span", { className: styles$8.buttonIcon, role: "img", style: {
                             height: 24,