@arc-ui/components 12.0.0 → 12.1.0

package/lib/_shared/esm/{ProgressStepper-CujHLQsm.mjs → ProgressStepper-DxZrJR0q.mjs}

@@ -1,9 +1,9 @@
 import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default from 'react';
+import React__default, { useId, forwardRef } from 'react';
 import { g as getDefaultExportFromCjs, c as classNames } from './index-5C0-U8cc.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
-import { c as capitaliseFirstLetter } from './capitalise-first-letter-Cubg2CS1.mjs';
 import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { C as ConditionalWrapper } from './ConditionalWrapper-CbEvXHTj.mjs';
 import { I as Icon } from './Icon-CCUbr_AO.mjs';
 
 var shorterCssColorNames;
@@ -148,7 +148,8 @@ var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w
 
 var ProgressStepperItem = function (_a) {
     var _b;
-    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, isViewing = _a.isViewing, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden", "isViewing"]);
+    var id = useId();
     var statusIcons = {
         todo: undefined,
         completed: Complete,
@@ -161,46 +162,46 @@ var ProgressStepperItem = function (_a) {
         onClick && onClick();
     };
     var statusIcon = statusIcons[status];
-    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+    var accessibleStatusLabel = "".concat(status === "todo" ? "to do" : status).concat(isViewing ? " - currently viewing" : "");
+    return (React__default.createElement("li", __assign({ "data-progress-stepper-item-id": id, className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
                 "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
             },
-            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = onClick || titleHref || status !== "todo",
             _b["arc-ProgressStepperItem--invertLabelPosition"] = direction !== "vertical" && invertLabelPosition,
             _b)) }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
             React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
                 React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
                         "arc-ProgressStepperItem-statusIcon--small": size === "small",
-                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
+                    }) },
+                    status === "todo" && !isViewing ? null : isViewing ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (status !== "current" && (React__default.createElement(Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))),
+                    status === "current" && isViewing === undefined ? (React__default.createElement(Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) })) : null))),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
-            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
-                title,
-                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
-                    ":",
-                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
-                title,
-                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
-                    ":",
-                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))),
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            React__default.createElement(ConditionalWrapper, { condition: Boolean(titleHref || onClick), wrapper: function (children) { return (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler, "aria-label": ariaLabel ||
+                        (status !== "current"
+                            ? "".concat(title, ", ").concat(accessibleStatusLabel)
+                            : undefined), "aria-current": status === "current" && "step" }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                    children,
+                    React__default.createElement(VisuallyHidden, null, " - ".concat(accessibleStatusLabel)))); } }, title),
+            subTitle && (React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle)),
             stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
 };
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
-var ProgressStepper = function (_a) {
-    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+var ProgressStepper = forwardRef(function (_a, ref) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, currentStep = _a.currentStep, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "currentStep"]);
     var items = React__default.Children.toArray(children);
     var getStepStatus = function (item) {
         var _a;
         return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
     };
-    return (React__default.createElement("div", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
+    return (React__default.createElement("ol", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
-        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
-};
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, ariaLabel: item.props.ariaLabel, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, isViewing: currentStep !== undefined ? currentStep === index : undefined, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
+});
 
 export { ProgressStepper as P, ProgressStepperItem as a };

package/lib/_shared/esm/{arc-breakpoints-Br78xe-f.mjs → arc-breakpoints-TEKN0W5t.mjs}

@@ -1,4 +1,4 @@
-import { A as ArcSizeBreakpointsXxl, a as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsL, c as ArcSizeBreakpointsM, d as ArcSizeBreakpointsS, e as ArcSizeBreakpointsXs } from './index.es-f0R-yhhl.mjs';
+import { A as ArcSizeBreakpointsS, a as ArcSizeBreakpointsM, b as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, d as ArcSizeBreakpointsXxl, e as ArcSizeBreakpointsXs } from './index.es-Co1d96HB.mjs';
 
 /**
  * Provides an object of breakpoints for responsive designs.

package/lib/_shared/esm/{index.es-f0R-yhhl.mjs → index.es-Co1d96HB.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 18:15:01 GMT
+ * Generated on Fri, 05 Dec 2025 13:50:26 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -9,4 +9,4 @@ var ArcSizeBreakpointsL = "1024px";
 var ArcSizeBreakpointsXl = "1280px";
 var ArcSizeBreakpointsXxl = "1440px";
 
-export { ArcSizeBreakpointsXxl as A, ArcSizeBreakpointsXl as a, ArcSizeBreakpointsL as b, ArcSizeBreakpointsM as c, ArcSizeBreakpointsS as d, ArcSizeBreakpointsXs as e };
+export { ArcSizeBreakpointsS as A, ArcSizeBreakpointsM as a, ArcSizeBreakpointsL as b, ArcSizeBreakpointsXl as c, ArcSizeBreakpointsXxl as d, ArcSizeBreakpointsXs as e };

package/lib/_shared/esm/{use-media-query-BmsMeo2M.mjs → use-media-query-l6Sou0dd.mjs}

@@ -26,11 +26,11 @@ var useMediaQuery = function (mediaQuery) {
         return window.matchMedia(query).matches;
     };
     var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    // Handles the change event of the media query.
-    var handleChange = function () {
-        setMatches(getMatches(mediaQuery));
-    };
     useEffect(function () {
+        // Handles the change event of the media query.
+        var handleChange = function () {
+            setMatches(getMatches(mediaQuery));
+        };
         var matchMedia = window.matchMedia(mediaQuery);
         // Triggered at the first client-side load and if query changes
         handleChange();