@proyecto-viviana/ui 0.5.0 → 0.6.0

package/dist/steplist/index.js

@@ -0,0 +1,300 @@
+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";
+import { Step as Step$1, StepList as StepList$1 } from "@proyecto-viviana/solidaria-components";
+import { createId } from "@proyecto-viviana/solid-stately";
+//#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><!$><!/>`);
+const StepListSizeContext = createContext({
+	size: "md",
+	count: 0
+});
+const listStyles = " sd151 ed151";
+const bespokeStepItemStyles = " sd151 eb151 _ub151 Na151 St151 Rt151";
+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";
+	return rules;
+};
+const indicatorStyles = 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";
+	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";
+	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.isSelected) {
+		rules += " xc151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	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 += " pHKLAu151";
+	else if (props.isCompleted) rules += " pHKLAu151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	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";
+	return rules;
+};
+/**
+* StepList displays a sequence of steps with visual indicators and connector lines.
+*
+*/
+function StepList(props) {
+	const mergedProps = useProviderProps(props);
+	const [local, headlessProps] = splitProps(mergedProps, [
+		"size",
+		"class",
+		"children"
+	]);
+	const size = () => local.size ?? "md";
+	const customClass = () => local.class ?? "";
+	const renderStep = (item, renderProps) => {
+		if (local.children) return local.children(item, renderProps);
+		return createComponent(DefaultStep, {
+			item,
+			get stepNumber() {
+				return renderProps.stepNumber;
+			},
+			renderProps
+		});
+	};
+	return createComponent(StepListSizeContext.Provider, {
+		value: {
+			get size() {
+				return size();
+			},
+			get count() {
+				return mergedProps.items?.length ?? 0;
+			}
+		},
+		get children() {
+			return createComponent(StepList$1, mergeProps(headlessProps, {
+				get ["class"]() {
+					return [listStyles, customClass()].filter(Boolean).join(" ");
+				},
+				children: renderStep
+			}));
+		}
+	});
+}
+/**
+* State prefix included in the step's accessible name, mirroring
+* `@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".
+*/
+function stepStateLabel(renderProps) {
+	if (renderProps.isSelected) return "Current: ";
+	if (renderProps.isCompleted) return "Completed: ";
+	return "Not completed: ";
+}
+function DefaultStep(props) {
+	const ctx = useContext(StepListSizeContext);
+	const [isFocusVisible, setIsFocusVisible] = createSignal(false);
+	const markerId = createId();
+	const stateId = createId();
+	const labelId = createId();
+	const state = () => ({
+		size: ctx.size,
+		isSelected: props.renderProps.isSelected,
+		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({
+				...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$;
+	})();
+}
+/**
+* Step represents an individual styled step within a StepList.
+* Use this when providing custom step rendering via StepList children.
+*/
+function Step(props) {
+	const [local, headlessProps] = splitProps(props, ["class"]);
+	return createComponent(Step$1, mergeProps(headlessProps, { get ["class"]() {
+		return [bespokeStepItemStyles, local.class].filter(Boolean).join(" ");
+	} }));
+}
+StepList.Step = Step;
+const Item = Step;
+delegateEvents(["click"]);
+//#endregion
+export { Item, Step, StepList };
+
+//# sourceMappingURL=index.js.map

package/dist/steplist/index.js.map

@@ -0,0 +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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"}

package/dist/steplist/index.jsx

@@ -0,0 +1,259 @@
+import { useProviderProps } from "../provider/index.jsx";
+import { Show, createContext, createSignal, splitProps, useContext } from "solid-js";
+import { Step as Step$1, StepList as StepList$1 } from "@proyecto-viviana/solidaria-components";
+import { createId } from "@proyecto-viviana/solid-stately";
+//#region src/steplist/index.tsx
+const StepListSizeContext = createContext({
+	size: "md",
+	count: 0
+});
+const listStyles = " sd151 ed151";
+const stepItemStyles = " sd151 eb151 _ub151 Na151";
+const bespokeStepItemStyles = " sd151 eb151 _ub151 Na151 St151 Rt151";
+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";
+	return rules;
+};
+const indicatorStyles = 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";
+	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";
+	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.isSelected) {
+		rules += " xc151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	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 += " pHKLAu151";
+	else if (props.isCompleted) rules += " pHKLAu151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	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";
+	return rules;
+};
+/**
+* StepList displays a sequence of steps with visual indicators and connector lines.
+*
+*/ function StepList(props) {
+	const mergedProps = useProviderProps(props);
+	const [local, headlessProps] = splitProps(mergedProps, [
+		"size",
+		"class",
+		"children"
+	]);
+	const size = () => local.size ?? "md";
+	const customClass = () => local.class ?? "";
+	const renderStep = (item, renderProps) => {
+		if (local.children) return local.children(item, renderProps);
+		return <DefaultStep item={item} stepNumber={renderProps.stepNumber} renderProps={renderProps} />;
+	};
+	return <StepListSizeContext.Provider value={{
+		get size() {
+			return size();
+		},
+		get count() {
+			return mergedProps.items?.length ?? 0;
+		}
+	}}>
+      <StepList$1 {...headlessProps} class={[listStyles, customClass()].filter(Boolean).join(" ")} children={renderStep} />
+    </StepListSizeContext.Provider>;
+}
+/**
+* State prefix included in the step's accessible name, mirroring
+* `@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".
+*/ function stepStateLabel(renderProps) {
+	if (renderProps.isSelected) return "Current: ";
+	if (renderProps.isCompleted) return "Completed: ";
+	return "Not completed: ";
+}
+function DefaultStep(props) {
+	const ctx = useContext(StepListSizeContext);
+	const [isFocusVisible, setIsFocusVisible] = createSignal(false);
+	const markerId = createId();
+	const stateId = createId();
+	const labelId = createId();
+	const state = () => ({
+		size: ctx.size,
+		isSelected: props.renderProps.isSelected,
+		isCompleted: props.renderProps.isCompleted,
+		isDisabled: !props.renderProps.isSelectable
+	});
+	return <li class={stepItemStyles} data-selected={props.renderProps.isSelected || void 0} data-completed={props.renderProps.isCompleted || void 0} data-disabled={!props.renderProps.isSelectable || void 0}>
+      <a role="link" aria-current={props.renderProps.isSelected ? "step" : void 0} aria-disabled={!props.renderProps.isSelectable ? true : void 0} aria-labelledby={`${markerId} ${stateId} ${labelId}`} tabIndex={props.renderProps.isSelectable ? 0 : void 0} class={stepLinkStyles({
+		...state(),
+		isFocusVisible: isFocusVisible()
+	})} style={{ cursor: props.renderProps.isSelectable ? "pointer" : "default" }} onClick={(e) => {
+		e.preventDefault();
+	}} onFocus={(e) => setIsFocusVisible(e.currentTarget.matches(":focus-visible"))} onBlur={() => setIsFocusVisible(false)}>
+        {}
+        <span id={markerId} aria-hidden="true" class={indicatorStyles(state())}>
+          {props.stepNumber}
+        </span>
+        {}
+        <span id={stateId} 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"
+	}}>
+          {stepStateLabel(props.renderProps)}
+        </span>
+        <span id={labelId} aria-hidden="true" class={labelStyles(state())}>
+          {props.item.label}
+        </span>
+      </a>
+      {}
+      <Show when={props.stepNumber < ctx.count}>
+        <div class={connectorStyles(state())} aria-hidden="true" />
+      </Show>
+    </li>;
+}
+/**
+* Step represents an individual styled step within a StepList.
+* Use this when providing custom step rendering via StepList children.
+*/ function Step(props) {
+	const [local, headlessProps] = splitProps(props, ["class"]);
+	return <Step$1 {...headlessProps} class={[bespokeStepItemStyles, local.class].filter(Boolean).join(" ")} />;
+}
+StepList.Step = Step;
+const Item = Step;
+//#endregion
+export { Item, Step, StepList };
+
+//# sourceMappingURL=index.jsx.map

package/dist/steplist/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","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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"}

package/dist/story-utils/ErrorBoundary.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from "solid-js";
+export interface StoryErrorBoundaryProps {
+    /** The content to render. */
+    children?: JSX.Element;
+    /** Custom fallback component. */
+    fallback?: (err: Error, reset: () => void) => JSX.Element;
+}
+/**
+ * A styled error boundary that catches and displays errors in stories.
+ */
+export declare function StoryErrorBoundary(props: StoryErrorBoundaryProps): JSX.Element;
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/story-utils/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/story-utils/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAuC,MAAM,UAAU,CAAC;AAGzE,MAAM,WAAW,uBAAuB;IACtC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3D;AAwCD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAoB9E"}

package/dist/story-utils/generatePowerset.d.ts

@@ -0,0 +1,32 @@
+/**
+ * generatePowerset - Prop combination generator for component testing
+ *
+ * Generates all combinations of prop values for visual regression testing.
+ */
+export type PropValues<T> = {
+    [K in keyof T]?: T[K][];
+};
+export interface PowersetItem<T> {
+    /** Human-readable label for this combination. */
+    label: string;
+    /** The prop values for this combination. */
+    props: Partial<T>;
+}
+/**
+ * Generates all combinations of the given prop values.
+ *
+ * @param propValues - An object mapping prop names to arrays of possible values.
+ * @returns An array of all prop combinations.
+ *
+ * @example
+ * ```ts
+ * const combos = generatePowerset({
+ *   size: ['sm', 'md', 'lg'],
+ *   variant: ['primary', 'secondary'],
+ *   isDisabled: [false, true],
+ * });
+ * // Returns 12 combinations (3 * 2 * 2)
+ * ```
+ */
+export declare function generatePowerset<T extends Record<string, unknown>>(propValues: PropValues<T>): PowersetItem<T>[];
+//# sourceMappingURL=generatePowerset.d.ts.map