@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/steplist/index.js

@@ -1,170 +1,139 @@
-import { useProviderProps } from "../provider/index.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, template } from "solid-js/web";
-import { Show, createContext, createSignal, splitProps, useContext } from "solid-js";
+/*
+* Copyright 2023 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/steplist/StepList.tsx
+import { a as useProviderProps } from "../_chunk/provider.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, mergeProps, readShallow, runHydrationEvents, scope, setAttribute, setStyleProperty, style, template } from "@solidjs/web";
+import { Show, createContext, createSignal, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { Step as Step$1, StepList as StepList$1 } from "@proyecto-viviana/solidaria-components";
 import { createId } from "@proyecto-viviana/solid-stately";
+import { visuallyHiddenStyles } from "@proyecto-viviana/solidaria/visually-hidden";
 //#region src/steplist/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<li class=" sd151 eb151 _ub151 Na151"><a role=link><span aria-hidden=true></span><span style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"></span><span aria-hidden=true></span></a><!$><!/>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li class=" sd17 eb17 _ub17 Na17"><a role=link><span aria-hidden=true></span><span></span><span></span><span aria-hidden=true></span></a><!$><!/>`);
 const StepListSizeContext = createContext({
 	size: "md",
 	count: 0
 });
-const listStyles = " sd151 ed151";
-const bespokeStepItemStyles = " sd151 eb151 _ub151 Na151 St151 Rt151";
+const listStyles = " sd17 ed17";
+const bespokeStepItemStyles = " sd17 eb17 _ub17 Na17 St17 Rt17";
 const stepLinkStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " of151";
-	rules += " nf151";
-	rules += " kf151";
-	rules += " jf151";
-	rules += " sd151";
-	rules += " _ta151";
-	rules += " eb151";
-	if (props.size === "lg") rules += " Ue151";
-	else if (props.size === "md") rules += " U1DOfn151";
-	else if (props.size === "sm") rules += " Ub151";
-	if (props.size === "lg") rules += " qe151";
-	else if (props.size === "md") rules += " q1DOfn151";
-	else if (props.size === "sm") rules += " qb151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " of17";
+	rules += " nf17";
+	rules += " kf17";
+	rules += " jf17";
+	rules += " sd17";
+	rules += " _ta17";
+	rules += " eb17";
+	if (props.size === "lg") rules += " Ue17";
+	else if (props.size === "md") rules += " U1DOfn17";
+	else if (props.size === "sm") rules += " Ub17";
+	if (props.size === "lg") rules += " qe17";
+	else if (props.size === "md") rules += " q1DOfn17";
+	else if (props.size === "sm") rules += " qb17";
 	return rules;
 };
-const indicatorStyles = function anonymous(props) {
+const markStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	rules += " _jf151";
-	if (props.size === "lg") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "md") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "sm") {
-		rules += " xb151";
-		rules += " _xa151";
-	}
-	rules += " _va151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.size === "lg") rules += " Zw151";
-	else if (props.size === "md") rules += " ZC151";
-	else if (props.size === "sm") rules += " Zo151";
-	if (props.size === "lg") rules += " Fv151";
-	else if (props.size === "md") rules += " Fx151";
-	else if (props.size === "sm") rules += " Fp151";
-	if (props.size === "lg") rules += " uxe7h4151";
-	else if (props.size === "md") rules += " uxe7h4151";
-	else if (props.size === "sm") rules += " uxe7h4151";
-	if (props.size === "lg") {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
-	} else if (props.size === "md") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
-	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
-	}
-	if (props.size === "lg") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "md") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "sm") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	}
-	if (props.isSelected) rules += " px151";
-	else if (props.isCompleted) rules += " px151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	if (props.isSelected) rules += " gdeCgNc151";
-	else if (props.isCompleted) rules += " gfkXLC151";
-	else if (props.isDisabled) rules += " gkDWoNd151";
-	else rules += " g9ORGnd151";
-	if (props.isSelected) rules += " iA151";
-	else if (props.isCompleted) rules += " iA151";
-	else if (props.isDisabled) rules += " iA151";
-	else rules += " iUvnvv151";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " _va17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.size === "lg") rules += " Zo17";
+	else if (props.size === "md") rules += " Zm17";
+	else if (props.size === "sm") rules += " Zu17";
+	if (props.size === "lg") rules += " Fp17";
+	else if (props.size === "md") rules += " Fn17";
+	else if (props.size === "sm") rules += " Ft17";
+	rules += " uxe7h417";
+	rules += " xg17";
+	rules += " _xa17";
+	rules += " _F2mU17";
+	if (props.size === "lg") rules += " vxmrurc17";
+	else if (props.size === "md") rules += " vpNqurc17";
+	else if (props.size === "sm") rules += " vhequrc17";
+	if (props.isSelected) rules += " psfU9i17";
+	else if (props.isCompleted) rules += " pJiWtKd17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " picq5417";
 	return rules;
 };
 const labelStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.size === "lg") rules += " uxe7h4151";
-	else if (props.size === "md") rules += " uxe7h4151";
-	else if (props.size === "sm") rules += " uxe7h4151";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " uxe7h417";
 	if (props.size === "lg") {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	} else if (props.size === "md") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	}
 	if (props.isSelected) {
-		rules += " xc151";
-		rules += " _xa151";
+		rules += " xg17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "lg") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "md") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "sm") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isSelected) rules += " pHKLAu151";
-	else if (props.isCompleted) rules += " pHKLAu151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	if (props.isSelected) rules += " pmiKvLd17";
+	else if (props.isCompleted) rules += " ptacXCd17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " phuSu117";
 	return rules;
 };
 const connectorStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " _ub151";
-	rules += " _va151";
-	rules += " _dc151";
-	rules += " NIgU9fe151";
-	rules += " FlAZvq151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isCompleted) rules += " gfkXLC151";
-	else rules += " gfbAdGe151";
+	rules += " _ub17";
+	rules += " _va17";
+	rules += " _dc17";
+	rules += " NIgU9fe17";
+	rules += " FlAZvq17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isCompleted) rules += " g4izmob17";
+	else rules += " gAv83Hb17";
 	return rules;
 };
 /**
 * StepList displays a sequence of steps with visual indicators and connector lines.
 *
-*/
-function StepList(props) {
+*/ function StepList(props) {
 	const mergedProps = useProviderProps(props);
 	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
@@ -183,7 +152,7 @@ function StepList(props) {
 			renderProps
 		});
 	};
-	return createComponent(StepListSizeContext.Provider, {
+	return createComponent(StepListSizeContext, {
 		value: {
 			get size() {
 				return size();
@@ -194,7 +163,7 @@ function StepList(props) {
 		},
 		get children() {
 			return createComponent(StepList$1, mergeProps(headlessProps, {
-				get ["class"]() {
+				get "class"() {
 					return [listStyles, customClass()].filter(Boolean).join(" ");
 				},
 				children: renderStep
@@ -207,7 +176,15 @@ function StepList(props) {
 * `@react-spectrum/steplist`'s `en-US.json` (`"current"`/`"completed"`/
 * `"notCompleted"`). These are referenced through `aria-labelledby` so a screen
 * reader announces e.g. "1 Current: Details".
-*/
+*/ /**
+* Glasselated channel mark for a step: `✓` done, `>` current, `░` not reached.
+* Decorative — the step number and state prefix are announced from the
+* visually-hidden spans the row's `aria-labelledby` points at.
+*/ function stepMark(renderProps) {
+	if (renderProps.isSelected) return ">";
+	if (renderProps.isCompleted) return "✓";
+	return "░";
+}
 function stepStateLabel(renderProps) {
 	if (renderProps.isSelected) return "Current: ";
 	if (renderProps.isCompleted) return "Completed: ";
@@ -217,6 +194,7 @@ function DefaultStep(props) {
 	const ctx = useContext(StepListSizeContext);
 	const [isFocusVisible, setIsFocusVisible] = createSignal(false);
 	const markerId = createId();
+	const numberId = createId();
 	const stateId = createId();
 	const labelId = createId();
 	const state = () => ({
@@ -225,69 +203,89 @@ function DefaultStep(props) {
 		isCompleted: props.renderProps.isCompleted,
 		isDisabled: !props.renderProps.isSelectable
 	});
-	return (() => {
-		var _el$ = getNextElement(_tmpl$2), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$7 = _el$2.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling);
-		_el$2.addEventListener("blur", () => setIsFocusVisible(false));
-		_el$2.addEventListener("focus", (e) => setIsFocusVisible(e.currentTarget.matches(":focus-visible")));
-		_el$2.$$click = (e) => {
-			e.preventDefault();
-		};
-		setAttribute(_el$2, "aria-labelledby", `${markerId} ${stateId} ${labelId}`);
-		setAttribute(_el$3, "id", markerId);
-		insert(_el$3, () => props.stepNumber);
-		setAttribute(_el$4, "id", stateId);
-		insert(_el$4, () => stepStateLabel(props.renderProps));
-		setAttribute(_el$5, "id", labelId);
-		insert(_el$5, () => props.item.label);
-		insert(_el$, createComponent(Show, {
-			get when() {
-				return props.stepNumber < ctx.count;
-			},
-			get children() {
-				var _el$6 = getNextElement(_tmpl$);
-				effect(() => className(_el$6, connectorStyles(state())));
-				return _el$6;
-			}
-		}), _el$8, _co$);
-		effect((_p$) => {
-			var _v$ = props.renderProps.isSelected || void 0, _v$2 = props.renderProps.isCompleted || void 0, _v$3 = !props.renderProps.isSelectable || void 0, _v$4 = props.renderProps.isSelected ? "step" : void 0, _v$5 = !props.renderProps.isSelectable ? true : void 0, _v$6 = props.renderProps.isSelectable ? 0 : void 0, _v$7 = stepLinkStyles({
+	var _el$ = getNextElement(_tmpl$2);
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.nextSibling;
+	var _el$5 = _el$4.nextSibling;
+	var _el$6 = _el$5.nextSibling;
+	var _el$8 = _el$2.nextSibling;
+	var [_el$9, _el$10] = getNextMarker(_el$8.nextSibling);
+	_el$2.addEventListener("blur", () => setIsFocusVisible(false));
+	_el$2.addEventListener("focus", (e) => setIsFocusVisible(e.currentTarget.matches(":focus-visible")));
+	_el$2._$$click = (e) => {
+		e.preventDefault();
+	};
+	setAttribute(_el$2, "aria-labelledby", `${numberId} ${stateId} ${labelId}`);
+	setAttribute(_el$3, "id", markerId);
+	insert(_el$3, scope(() => {
+		return stepMark(props.renderProps);
+	}));
+	setAttribute(_el$4, "id", numberId);
+	insert(_el$4, () => {
+		return props.stepNumber;
+	});
+	setAttribute(_el$5, "id", stateId);
+	insert(_el$5, scope(() => {
+		return stepStateLabel(props.renderProps);
+	}));
+	setAttribute(_el$6, "id", labelId);
+	insert(_el$6, () => {
+		return props.item.label;
+	});
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return props.stepNumber < ctx.count;
+		},
+		get children() {
+			var _el$7 = getNextElement(_tmpl$);
+			effect(() => readShallow(connectorStyles(state())), (_v$, _$p) => {
+				className(_el$7, _v$, _$p);
+			});
+			return _el$7;
+		}
+	}), _el$9, _el$10);
+	effect(() => {
+		return {
+			e: props.renderProps.isSelected || void 0,
+			t: props.renderProps.isCompleted || void 0,
+			a: !props.renderProps.isSelectable || void 0,
+			o: props.renderProps.isSelected ? "step" : void 0,
+			i: !props.renderProps.isSelectable ? "true" : void 0,
+			n: props.renderProps.isSelectable ? 0 : void 0,
+			s: readShallow(stepLinkStyles({
 				...state(),
 				isFocusVisible: isFocusVisible()
-			}), _v$8 = props.renderProps.isSelectable ? "pointer" : "default", _v$9 = indicatorStyles(state()), _v$0 = labelStyles(state());
-			_v$ !== _p$.e && setAttribute(_el$, "data-selected", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "data-completed", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$, "data-disabled", _p$.a = _v$3);
-			_v$4 !== _p$.o && setAttribute(_el$2, "aria-current", _p$.o = _v$4);
-			_v$5 !== _p$.i && setAttribute(_el$2, "aria-disabled", _p$.i = _v$5);
-			_v$6 !== _p$.n && setAttribute(_el$2, "tabindex", _p$.n = _v$6);
-			_v$7 !== _p$.s && className(_el$2, _p$.s = _v$7);
-			_v$8 !== _p$.h && setStyleProperty(_el$2, "cursor", _p$.h = _v$8);
-			_v$9 !== _p$.r && className(_el$3, _p$.r = _v$9);
-			_v$0 !== _p$.d && className(_el$5, _p$.d = _v$0);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0,
-			d: void 0
-		});
-		runHydrationEvents();
-		return _el$;
-	})();
+			})),
+			h: props.renderProps.isSelectable ? "pointer" : "default",
+			r: readShallow(markStyles(state())),
+			d: readShallow(visuallyHiddenStyles),
+			l: readShallow(visuallyHiddenStyles),
+			u: readShallow(labelStyles(state()))
+		};
+	}, ({ e, t, a, o, i, n, s, h, r, d, l, u }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$, "data-selected", e);
+		t !== _p$?.t && setAttribute(_el$, "data-completed", t);
+		a !== _p$?.a && setAttribute(_el$, "data-disabled", a);
+		o !== _p$?.o && setAttribute(_el$2, "aria-current", o);
+		i !== _p$?.i && setAttribute(_el$2, "aria-disabled", i);
+		n !== _p$?.n && setAttribute(_el$2, "tabindex", n);
+		className(_el$2, s, _p$?.s);
+		h !== _p$?.h && setStyleProperty(_el$2, "cursor", h);
+		className(_el$3, r, _p$?.r);
+		style(_el$4, d, _p$?.d);
+		style(_el$5, l, _p$?.l);
+		className(_el$6, u, _p$?.u);
+	});
+	runHydrationEvents();
+	return _el$;
 }
 /**
 * Step represents an individual styled step within a StepList.
 * Use this when providing custom step rendering via StepList children.
-*/
-function Step(props) {
+*/ function Step(props) {
 	const [local, headlessProps] = splitProps(props, ["class"]);
-	return createComponent(Step$1, mergeProps(headlessProps, { get ["class"]() {
+	return createComponent(Step$1, mergeProps(headlessProps, { get "class"() {
 		return [bespokeStepItemStyles, local.class].filter(Boolean).join(" ");
 	} }));
 }

package/dist/steplist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/steplist/index.tsx"],"sourcesContent":["import { type JSX, splitProps, createContext, useContext, createSignal, Show } from \"solid-js\";\nimport {\n  StepList as HeadlessStepList,\n  Step as HeadlessStep,\n  type StepListProps as HeadlessStepListProps,\n  type StepListItemRenderProps,\n  type StepProps as HeadlessStepProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createId, type Key } from \"@proyecto-viviana/solid-stately\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\n\nexport type StepListSize = \"sm\" | \"md\" | \"lg\";\n\ninterface StepListContextValue {\n  size: StepListSize;\n  /** Total number of steps, used to hide the trailing connector. */\n  count: number;\n}\n\nconst StepListSizeContext = createContext<StepListContextValue>({ size: \"md\", count: 0 });\n\nexport interface StepListProps<T extends { key: Key; label: string }> extends Omit<\n  HeadlessStepListProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the step list. */\n  size?: StepListSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Render function for step content, or omit to use default rendering. */\n  children?: (item: T, state: StepListItemRenderProps) => JSX.Element;\n}\n\nexport interface StepProps extends Omit<HeadlessStepProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// All styling flows through the build-time S2 style() macro so the atomic CSS\n// ships in the package bundle for installed consumers, rather than relying on\n// Tailwind utility strings the package ships no CSS for. Step state\n// (selected/completed/disabled) is driven by the collection render props; later\n// keys win, so selected beats completed beats disabled.\n\ntype StepStyleState = {\n  size: StepListSize;\n  isSelected?: boolean;\n  isCompleted?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n};\n\nconst listStyles = style({\n  display: \"flex\",\n  alignItems: \"start\",\n});\n\nconst stepItemStyles = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\n// Escape-hatch (bespoke `Step` children) li layout: same flex row as the\n// default rendering, plus inline padding so adjacent bespoke steps — which\n// have no indicator bubbles or connectors — don't run together.\nconst bespokeStepItemStyles = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  flexGrow: 1,\n  minWidth: 0,\n  paddingX: 8,\n});\n\nconst stepLinkStyles = style<StepStyleState>({\n  ...focusRing(),\n  borderRadius: \"row\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  gap: { size: { sm: 4, md: \"[6px]\", lg: 8 } },\n});\n\nconst indicatorStyles = style<StepStyleState>({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderRadius: \"full\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  fontWeight: \"medium\",\n  flexShrink: 0,\n  transition: \"default\",\n  width: { size: { sm: 24, md: 32, lg: 40 } },\n  height: { size: { sm: 24, md: 32, lg: 40 } },\n  font: { size: { sm: \"ui-xs\", md: \"ui-sm\", lg: \"ui\" } },\n  backgroundColor: {\n    default: \"layer-2\",\n    isDisabled: \"gray-100\",\n    isCompleted: \"positive\",\n    isSelected: \"accent\",\n  },\n  borderColor: {\n    default: \"gray-400\",\n    isDisabled: \"transparent\",\n    isCompleted: \"transparent\",\n    isSelected: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isDisabled: \"disabled\",\n    isCompleted: \"white\",\n    isSelected: \"white\",\n  },\n});\n\nconst labelStyles = style<StepStyleState>({\n  transition: \"default\",\n  font: { size: { sm: \"ui-xs\", md: \"ui-sm\", lg: \"ui\" } },\n  fontWeight: { default: \"normal\", isSelected: \"medium\" },\n  color: {\n    default: \"neutral-subdued\",\n    isDisabled: \"disabled\",\n    isCompleted: \"neutral\",\n    isSelected: \"neutral\",\n  },\n});\n\nconst connectorStyles = style<StepStyleState>({\n  flexGrow: 1,\n  flexShrink: 0,\n  alignSelf: \"center\",\n  minWidth: 16,\n  height: 2,\n  transition: \"default\",\n  backgroundColor: { default: \"gray-300\", isCompleted: \"positive\" },\n});\n\n/**\n * StepList displays a sequence of steps with visual indicators and connector lines.\n *\n */\nexport function StepList<T extends { key: Key; label: string }>(\n  props: StepListProps<T>,\n): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"size\", \"class\", \"children\"]);\n\n  const size = () => local.size ?? \"md\";\n  const customClass = () => local.class ?? \"\";\n\n  const renderStep = (item: T, renderProps: StepListItemRenderProps): JSX.Element => {\n    if (local.children) {\n      return local.children(item, renderProps);\n    }\n\n    return (\n      <DefaultStep item={item} stepNumber={renderProps.stepNumber} renderProps={renderProps} />\n    );\n  };\n\n  return (\n    <StepListSizeContext.Provider\n      value={{\n        get size() {\n          return size();\n        },\n        get count() {\n          return mergedProps.items?.length ?? 0;\n        },\n      }}\n    >\n      <HeadlessStepList\n        {...headlessProps}\n        class={[listStyles, customClass()].filter(Boolean).join(\" \")}\n        children={renderStep}\n      />\n    </StepListSizeContext.Provider>\n  );\n}\n\n/**\n * State prefix included in the step's accessible name, mirroring\n * `@react-spectrum/steplist`'s `en-US.json` (`\"current\"`/`\"completed\"`/\n * `\"notCompleted\"`). These are referenced through `aria-labelledby` so a screen\n * reader announces e.g. \"1 Current: Details\".\n */\nfunction stepStateLabel(renderProps: StepListItemRenderProps): string {\n  if (renderProps.isSelected) return \"Current: \";\n  if (renderProps.isCompleted) return \"Completed: \";\n  return \"Not completed: \";\n}\n\nfunction DefaultStep<T extends { key: Key; label: string }>(props: {\n  item: T;\n  stepNumber: number;\n  renderProps: StepListItemRenderProps;\n}): JSX.Element {\n  const ctx = useContext(StepListSizeContext);\n  const [isFocusVisible, setIsFocusVisible] = createSignal(false);\n\n  // Accessible name composed from marker + visually-hidden state + label,\n  // matching the vendored `@adobe/react-spectrum` StepListItem\n  // (`aria-labelledby={markerId stateId labelId}`). The hook itself sets no\n  // name — the styled wrapper owns naming.\n  const markerId = createId();\n  const stateId = createId();\n  const labelId = createId();\n\n  const state = (): StepStyleState => ({\n    size: ctx.size,\n    isSelected: props.renderProps.isSelected,\n    isCompleted: props.renderProps.isCompleted,\n    isDisabled: !props.renderProps.isSelectable,\n  });\n\n  return (\n    <li\n      class={stepItemStyles}\n      data-selected={props.renderProps.isSelected || undefined}\n      data-completed={props.renderProps.isCompleted || undefined}\n      data-disabled={!props.renderProps.isSelectable || undefined}\n    >\n      <a\n        role=\"link\"\n        aria-current={props.renderProps.isSelected ? \"step\" : undefined}\n        aria-disabled={!props.renderProps.isSelectable ? true : undefined}\n        aria-labelledby={`${markerId} ${stateId} ${labelId}`}\n        tabIndex={props.renderProps.isSelectable ? 0 : undefined}\n        class={stepLinkStyles({ ...state(), isFocusVisible: isFocusVisible() })}\n        style={{ cursor: props.renderProps.isSelectable ? \"pointer\" : \"default\" }}\n        onClick={(e) => {\n          e.preventDefault();\n        }}\n        onFocus={(e) => setIsFocusVisible(e.currentTarget.matches(\":focus-visible\"))}\n        onBlur={() => setIsFocusVisible(false)}\n      >\n        {/* Marker ALWAYS carries the step number as text — it is referenced by\n            aria-labelledby, so the accessible name stays \"N State: Label\" in\n            every state (mirrors the vendored @adobe/react-spectrum StepListItem,\n            whose marker is `numberFormatter.format(index + 1)` regardless of\n            completion; completion is a color change, not an icon swap). The\n            marker and label are aria-hidden — the accessible name is composed\n            solely through aria-labelledby (which pierces aria-hidden), exactly\n            as the vendored StepListItem hides its marker wrapper + label div. */}\n        <span id={markerId} aria-hidden=\"true\" class={indicatorStyles(state())}>\n          {props.stepNumber}\n        </span>\n        {/* Visually-hidden state prefix, referenced by aria-labelledby only. */}\n        <span\n          id={stateId}\n          style={{\n            border: 0,\n            clip: \"rect(0 0 0 0)\",\n            \"clip-path\": \"inset(50%)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: 0,\n            position: \"absolute\",\n            width: \"1px\",\n            \"white-space\": \"nowrap\",\n          }}\n        >\n          {stepStateLabel(props.renderProps)}\n        </span>\n        <span id={labelId} aria-hidden=\"true\" class={labelStyles(state())}>\n          {props.item.label}\n        </span>\n      </a>\n      {/* Connector line — omitted on the last step. */}\n      <Show when={props.stepNumber < ctx.count}>\n        <div class={connectorStyles(state())} aria-hidden=\"true\" />\n      </Show>\n    </li>\n  );\n}\n\n/**\n * Step represents an individual styled step within a StepList.\n * Use this when providing custom step rendering via StepList children.\n */\nexport function Step(props: StepProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  // The li must keep the flex row layout of the default rendering: the styled\n  // StepList root is a flex <ol>, and a plain list-item li would regenerate\n  // ordered-list ::markers outside its box, colliding with neighboring steps.\n  return (\n    <HeadlessStep\n      {...headlessProps}\n      class={[bespokeStepItemStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n\nStepList.Step = Step;\n\nexport const Item = Step;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/steplist/index.tsx"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/steplist/StepList.tsx\n\n// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/steplist/StepList.tsx.\n\nimport { createContext, useContext, createSignal, Show } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  StepList as HeadlessStepList,\n  Step as HeadlessStep,\n  type StepListProps as HeadlessStepListProps,\n  type StepListItemRenderProps,\n  type StepProps as HeadlessStepProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createId, type Key } from \"@proyecto-viviana/solid-stately\";\nimport { visuallyHiddenStyles } from \"@proyecto-viviana/solidaria/visually-hidden\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing, lightDark } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type StepListSize = \"sm\" | \"md\" | \"lg\";\n\ninterface StepListContextValue {\n  size: StepListSize;\n  /** Total number of steps, used to hide the trailing connector. */\n  count: number;\n}\n\nconst StepListSizeContext = createContext<StepListContextValue>({ size: \"md\", count: 0 });\n\nexport interface StepListProps<T extends { key: Key; label: string }> extends Omit<\n  HeadlessStepListProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the step list. */\n  size?: StepListSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Render function for step content, or omit to use default rendering. */\n  children?: (item: T, state: StepListItemRenderProps) => JSX.Element;\n}\n\nexport interface StepProps extends Omit<HeadlessStepProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// All styling flows through the build-time S2 style() macro so the atomic CSS\n// ships in the package bundle for installed consumers, rather than relying on\n// Tailwind utility strings the package ships no CSS for. Step state\n// (selected/completed/disabled) is driven by the collection render props; later\n// keys win, so selected beats completed beats disabled.\n\ntype StepStyleState = {\n  size: StepListSize;\n  isSelected?: boolean;\n  isCompleted?: boolean;\n  isDisabled?: boolean;\n  isFocusVisible?: boolean;\n};\n\nconst listStyles = style({\n  display: \"flex\",\n  alignItems: \"start\",\n});\n\nconst stepItemStyles = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\n// Escape-hatch (bespoke `Step` children) li layout: same flex row as the\n// default rendering, plus inline padding so adjacent bespoke steps — which\n// have no indicator bubbles or connectors — don't run together.\nconst bespokeStepItemStyles = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  flexGrow: 1,\n  minWidth: 0,\n  paddingX: 8,\n});\n\nconst stepLinkStyles = style<StepStyleState>({\n  ...focusRing(),\n  borderRadius: \"row\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  gap: { size: { sm: 4, md: \"[6px]\", lg: 8 } },\n});\n\n/* Glasselated: the register marks progress with a CHANNEL GLYPH, not a numbered\n * bubble — `✓` for a completed step, `>` for the one you are on, `░` for one not\n * reached yet (the same ✓/>/░ vocabulary the register's channel rows use). The\n * step number stays in the accessible name via a visually-hidden span, so the\n * glyph is purely visual. */\nconst markStyles = style<StepStyleState>({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  transition: \"default\",\n  width: { size: { sm: 16, md: 20, lg: 24 } },\n  height: { size: { sm: 16, md: 20, lg: 24 } },\n  fontFamily: \"code\",\n  fontWeight: \"semi-bold\",\n  lineHeight: \"[1]\",\n  fontSize: { size: { sm: \"[11px]\", md: \"[13px]\", lg: \"[15px]\" } },\n  color: {\n    default: \"[var(--terminal-dim)]\",\n    isDisabled: \"disabled\",\n    isCompleted: lightDark(\"positive-900\", \"positive-1000\"),\n    isSelected: \"[var(--accent-primary)]\",\n  },\n});\n\nconst labelStyles = style<StepStyleState>({\n  transition: \"default\",\n  font: { size: { sm: \"ui-xs\", md: \"ui-sm\", lg: \"ui\" } },\n  /* Glasselated: step labels are nav text — mono, like every other nav row in\n   * the register. `font` above still owns the size ramp. */\n  fontFamily: \"code\",\n  fontWeight: { default: \"normal\", isSelected: \"semi-bold\" },\n  color: {\n    default: \"[var(--text-tertiary)]\",\n    isDisabled: \"disabled\",\n    isCompleted: \"[var(--text-secondary)]\",\n    isSelected: \"neutral\",\n  },\n});\n\nconst connectorStyles = style<StepStyleState>({\n  flexGrow: 1,\n  flexShrink: 0,\n  alignSelf: \"center\",\n  minWidth: 16,\n  height: 2,\n  transition: \"default\",\n  backgroundColor: { default: \"[var(--well-border)]\", isCompleted: \"positive\" },\n});\n\n/**\n * StepList displays a sequence of steps with visual indicators and connector lines.\n *\n */\nexport function StepList<T extends { key: Key; label: string }>(\n  props: StepListProps<T>,\n): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"size\", \"class\", \"children\"]);\n\n  const size = () => local.size ?? \"md\";\n  const customClass = () => local.class ?? \"\";\n\n  const renderStep = (item: T, renderProps: StepListItemRenderProps): JSX.Element => {\n    if (local.children) {\n      return local.children(item, renderProps);\n    }\n\n    return (\n      <DefaultStep item={item} stepNumber={renderProps.stepNumber} renderProps={renderProps} />\n    );\n  };\n\n  return (\n    <StepListSizeContext\n      value={{\n        get size() {\n          return size();\n        },\n        get count() {\n          return mergedProps.items?.length ?? 0;\n        },\n      }}\n    >\n      <HeadlessStepList\n        {...headlessProps}\n        class={[listStyles, customClass()].filter(Boolean).join(\" \")}\n        children={renderStep}\n      />\n    </StepListSizeContext>\n  );\n}\n\n/**\n * State prefix included in the step's accessible name, mirroring\n * `@react-spectrum/steplist`'s `en-US.json` (`\"current\"`/`\"completed\"`/\n * `\"notCompleted\"`). These are referenced through `aria-labelledby` so a screen\n * reader announces e.g. \"1 Current: Details\".\n */\n/**\n * Glasselated channel mark for a step: `✓` done, `>` current, `░` not reached.\n * Decorative — the step number and state prefix are announced from the\n * visually-hidden spans the row's `aria-labelledby` points at.\n */\nfunction stepMark(renderProps: StepListItemRenderProps): string {\n  if (renderProps.isSelected) return \">\";\n  if (renderProps.isCompleted) return \"\\u2713\";\n  return \"\\u2591\";\n}\n\nfunction stepStateLabel(renderProps: StepListItemRenderProps): string {\n  if (renderProps.isSelected) return \"Current: \";\n  if (renderProps.isCompleted) return \"Completed: \";\n  return \"Not completed: \";\n}\n\nfunction DefaultStep<T extends { key: Key; label: string }>(props: {\n  item: T;\n  stepNumber: number;\n  renderProps: StepListItemRenderProps;\n}): JSX.Element {\n  const ctx = useContext(StepListSizeContext);\n  const [isFocusVisible, setIsFocusVisible] = createSignal(false);\n\n  // Accessible name composed from marker + visually-hidden state + label,\n  // matching the vendored `@adobe/react-spectrum` StepListItem\n  // (`aria-labelledby={markerId stateId labelId}`). The hook itself sets no\n  // name — the styled wrapper owns naming.\n  const markerId = createId();\n  const numberId = createId();\n  const stateId = createId();\n  const labelId = createId();\n\n  const state = (): StepStyleState => ({\n    size: ctx.size,\n    isSelected: props.renderProps.isSelected,\n    isCompleted: props.renderProps.isCompleted,\n    isDisabled: !props.renderProps.isSelectable,\n  });\n\n  return (\n    <li\n      class={stepItemStyles}\n      data-selected={props.renderProps.isSelected || undefined}\n      data-completed={props.renderProps.isCompleted || undefined}\n      data-disabled={!props.renderProps.isSelectable || undefined}\n    >\n      <a\n        role=\"link\"\n        aria-current={props.renderProps.isSelected ? \"step\" : undefined}\n        aria-disabled={!props.renderProps.isSelectable ? \"true\" : undefined}\n        aria-labelledby={`${numberId} ${stateId} ${labelId}`}\n        tabindex={props.renderProps.isSelectable ? 0 : undefined}\n        class={stepLinkStyles({ ...state(), isFocusVisible: isFocusVisible() })}\n        style={{ cursor: props.renderProps.isSelectable ? \"pointer\" : \"default\" }}\n        onClick={(e) => {\n          e.preventDefault();\n        }}\n        onFocus={(e) => setIsFocusVisible(e.currentTarget.matches(\":focus-visible\"))}\n        onBlur={() => setIsFocusVisible(false)}\n      >\n        {/* Glasselated: the VISIBLE marker is the channel glyph. The step number\n            it replaces has not left the accessible name — it moved to the\n            visually-hidden `numberId` span below, so `aria-labelledby` still\n            composes \"N State: Label\" exactly as the vendored\n            @adobe/react-spectrum StepListItem does. */}\n        <span id={markerId} aria-hidden=\"true\" class={markStyles(state())}>\n          {stepMark(props.renderProps)}\n        </span>\n        {/* Visually-hidden step number, referenced by aria-labelledby only. */}\n        <span id={numberId} style={visuallyHiddenStyles}>\n          {props.stepNumber}\n        </span>\n        {/* Visually-hidden state prefix, referenced by aria-labelledby only. */}\n        <span id={stateId} style={visuallyHiddenStyles}>\n          {stepStateLabel(props.renderProps)}\n        </span>\n        <span id={labelId} aria-hidden=\"true\" class={labelStyles(state())}>\n          {props.item.label}\n        </span>\n      </a>\n      {/* Connector line — omitted on the last step. */}\n      <Show when={props.stepNumber < ctx.count}>\n        <div class={connectorStyles(state())} aria-hidden=\"true\" />\n      </Show>\n    </li>\n  );\n}\n\n/**\n * Step represents an individual styled step within a StepList.\n * Use this when providing custom step rendering via StepList children.\n */\nexport function Step(props: StepProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  // The li must keep the flex row layout of the default rendering: the styled\n  // StepList root is a flex <ol>, and a plain list-item li would regenerate\n  // ordered-list ::markers outside its box, colliding with neighboring steps.\n  return (\n    <HeadlessStep\n      {...headlessProps}\n      class={[bespokeStepItemStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n\nStepList.Step = Step;\n\nexport const Item = Step;\n"],"mappings":"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"}