@arc-ui/community-components 3.8.0 → 3.8.1

package/lib/index.d.cts

@@ -561,7 +561,7 @@ interface ProductNavigationProps extends Omit<SectionHeadingProps, "isPadded"> {
      */
     productList: ListProps[];
     /**
-     * Include "show more" or "show less" buttons.
+     * Hide "show more" or "show less" button controls.
      */
     hideButton?: boolean;
     /**
@@ -642,6 +642,8 @@ declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
 interface InlineLinkGroupProps {
     /** Optional overline label displayed above the link group */
     label?: string;
+    /** Heading level for the label, defaults to "2" for proper heading hierarchy */
+    headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
     /** Array of link items to display */
     links: InlineLinkGroupItem[];
 }

package/lib/index.d.mts

@@ -561,7 +561,7 @@ interface ProductNavigationProps extends Omit<SectionHeadingProps, "isPadded"> {
      */
     productList: ListProps[];
     /**
-     * Include "show more" or "show less" buttons.
+     * Hide "show more" or "show less" button controls.
      */
     hideButton?: boolean;
     /**
@@ -642,6 +642,8 @@ declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
 interface InlineLinkGroupProps {
     /** Optional overline label displayed above the link group */
     label?: string;
+    /** Heading level for the label, defaults to "2" for proper heading hierarchy */
+    headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
     /** Array of link items to display */
     links: InlineLinkGroupItem[];
 }

package/lib/index.mjs

@@ -1,4 +1,4 @@
-import React, { useId, useState, useEffect, Suspense, useRef } from 'react';
+import React, { useId, useState, useEffect, Suspense, useRef, useContext } from 'react';
 import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
@@ -27,10 +27,10 @@ import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
 import { Tag } from '@arc-ui/components/Tag';
 import { Toast, ToastNotification } from '@arc-ui/components/Toast';
 import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
+import { SurfaceContext, Surface } from '@arc-ui/components/Surface';
 import { Visible } from '@arc-ui/components/Visible';
 import { Spacing } from '@arc-ui/components/Spacing';
 import ReactPlayer from 'react-player';
-import { Surface } from '@arc-ui/components/Surface';
 import { ContentSwitcher, ContentSwitcherList, ContentSwitcherTab, ContentSwitcherContent } from '@arc-ui/components/ContentSwitcher';
 import { ContentSwitcherDropdown, ContentSwitcherDropdownContent } from '@arc-ui/components/ContentSwitcherDropdown';
 
@@ -961,7 +961,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";
@@ -3895,6 +3895,7 @@ var ProductNavigation = function (_a) {
     var _g = useState(false), hideLessButton = _g[0], setHideLessButton = _g[1];
     var _h = useState(cardsToDisplay), skipLinkCard = _h[0], setSkipLinkCard = _h[1];
     var _j = useState(productList.slice(0, cardsToDisplay)), displayList = _j[0], setDisplayList = _j[1];
+    var _k = useState(false), displaySkipButton = _k[0], setDisplaySkipButton = _k[1];
     var cardRef = useRef(null);
     useEffect(function () {
         if (defaultExpanded) {
@@ -3906,6 +3907,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)
@@ -3939,8 +3941,8 @@ var ProductNavigation = function (_a) {
             !hideButton && !hideLessButton && (React.createElement(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, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
             React.createElement(VisuallyHidden, null,
                 React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
@@ -3977,10 +3979,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: 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: 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"};
@@ -3998,10 +4000,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, { size: "xxs", fontStyle: "overline" }, label))),
+            React.createElement(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, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
@@ -4010,14 +4012,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 = useContext(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, __assign({}, img)))),
@@ -4026,7 +4031,7 @@ var ThumbnailSignpost = function (_a) {
             React.createElement(VerticalSpace, { size: "8" }),
             text,
             buttonLabel && onClick && (React.createElement(React.Fragment, null,
-                React.createElement(VerticalSpace, { size: "8" }),
+                React.createElement(VerticalSpace, { size: "32" }),
                 React.createElement("div", { className: styles$8.thumbnailButton },
                     React.createElement("span", { className: styles$8.buttonIcon, role: "img", style: {
                             height: 24,