@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/dist/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAC;AACjF,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,sEAAsE;IACtE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC7C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACzC,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAgElD"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAC;AACjF,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,sEAAsE;IACtE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC7C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACzC,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAkElD"}

package/dist/Icon.js

@@ -0,0 +1,127 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { Button } from "./Button.js";
+import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
+import { Show, createContext, createMemo, splitProps } from "solid-js";
+//#region src/Icon.tsx
+/**
+* Icon component for solidaria-components
+*
+* Minimal headless Icon that owns ARIA semantics:
+* - Decorative (no label): aria-hidden="true"
+* - Informative (aria-label): role="img" + aria-label
+* - Interactive (onPress): wraps content in headless Button
+*
+* The UI layer consumes this for styling/composition only.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+const IconContext = createContext(null);
+/**
+* An icon wrapper that provides correct ARIA semantics.
+*
+* - **Decorative** (no `aria-label`): renders `<span aria-hidden="true">`
+* - **Informative** (`aria-label` provided): renders `<span role="img" aria-label="...">`
+* - **Interactive** (`onPress` provided): wraps in headless `Button`
+*
+* @example
+* ```tsx
+* // Decorative
+* <Icon><SearchSvg /></Icon>
+*
+* // Informative
+* <Icon aria-label="Search"><SearchSvg /></Icon>
+*
+* // Interactive
+* <Icon onPress={handleSearch} aria-label="Search"><SearchSvg /></Icon>
+* ```
+*/
+function Icon(props) {
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"onPress",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	const hasLabel = () => !!(local["aria-label"] || local["aria-labelledby"]);
+	const isInteractive = () => !!local.onPress;
+	const isDecorative = () => !hasLabel();
+	const renderValues = createMemo(() => ({
+		isDecorative: isDecorative(),
+		isInteractive: isInteractive()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Icon"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return createComponent(Show, {
+		get when() {
+			return isInteractive();
+		},
+		get fallback() {
+			return (() => {
+				var _el$ = getNextElement(_tmpl$);
+				spread(_el$, mergeProps(domProps, {
+					get role() {
+						return hasLabel() ? "img" : void 0;
+					},
+					get ["aria-hidden"]() {
+						return isDecorative() ? "true" : void 0;
+					},
+					get ["aria-label"]() {
+						return local["aria-label"];
+					},
+					get ["aria-labelledby"]() {
+						return local["aria-labelledby"];
+					},
+					get ["class"]() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					"data-interactive": void 0,
+					get ["data-decorative"]() {
+						return isDecorative() || void 0;
+					}
+				}), false, true);
+				insert(_el$, () => renderProps.renderChildren());
+				runHydrationEvents();
+				return _el$;
+			})();
+		},
+		get children() {
+			return createComponent(Button, mergeProps(domProps, {
+				get onPress() {
+					return local.onPress;
+				},
+				get ["aria-label"]() {
+					return local["aria-label"];
+				},
+				get ["aria-labelledby"]() {
+					return local["aria-labelledby"];
+				},
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				"data-interactive": "",
+				get children() {
+					return renderProps.renderChildren();
+				}
+			}));
+		}
+	});
+}
+//#endregion
+export { Icon, IconContext };
+
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["JSX","createContext","createMemo","Show","splitProps","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","Button","PressEvent","IconRenderProps","isDecorative","isInteractive","IconProps","onPress","e","children","class","style","id","IconContext","Icon","props","Element","local","rest","hasLabel","renderValues","renderProps","defaultClassName","domProps","global","_$createComponent","when","fallback","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","role","undefined","aria-hidden","aria-label","aria-labelledby","data-decorative","_$insert","renderChildren","_$runHydrationEvents"],"sources":["../src/Icon.tsx"],"sourcesContent":["/**\n * Icon component for solidaria-components\n *\n * Minimal headless Icon that owns ARIA semantics:\n * - Decorative (no label): aria-hidden=\"true\"\n * - Informative (aria-label): role=\"img\" + aria-label\n * - Interactive (onPress): wraps content in headless Button\n *\n * The UI layer consumes this for styling/composition only.\n */\n\nimport { type JSX, createContext, createMemo, Show, splitProps } from \"solid-js\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { Button } from \"./Button\";\nimport type { PressEvent } from \"@proyecto-viviana/solidaria\";\n\nexport interface IconRenderProps {\n  /** Whether the icon is purely decorative (no label). */\n  isDecorative: boolean;\n  /** Whether the icon is interactive (has onPress). */\n  isInteractive: boolean;\n}\n\nexport interface IconProps extends SlotProps {\n  /** Handler called when the icon is pressed (makes it interactive). */\n  onPress?: (e: PressEvent) => void;\n  /** Accessible label for the icon. When provided, the icon is informative (role=\"img\"). */\n  \"aria-label\"?: string;\n  /** ID of an element that labels this icon. */\n  \"aria-labelledby\"?: string;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<IconRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<IconRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<IconRenderProps>;\n  /** The id of the element. */\n  id?: string;\n}\n\nexport const IconContext = createContext<IconProps | null>(null);\n\n/**\n * An icon wrapper that provides correct ARIA semantics.\n *\n * - **Decorative** (no `aria-label`): renders `<span aria-hidden=\"true\">`\n * - **Informative** (`aria-label` provided): renders `<span role=\"img\" aria-label=\"...\">`\n * - **Interactive** (`onPress` provided): wraps in headless `Button`\n *\n * @example\n * ```tsx\n * // Decorative\n * <Icon><SearchSvg /></Icon>\n *\n * // Informative\n * <Icon aria-label=\"Search\"><SearchSvg /></Icon>\n *\n * // Interactive\n * <Icon onPress={handleSearch} aria-label=\"Search\"><SearchSvg /></Icon>\n * ```\n */\nexport function Icon(props: IconProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"onPress\",\n    \"aria-label\",\n    \"aria-labelledby\",\n  ]);\n\n  const hasLabel = () => !!(local[\"aria-label\"] || local[\"aria-labelledby\"]);\n  const isInteractive = () => !!local.onPress;\n  const isDecorative = () => !hasLabel();\n\n  const renderValues = createMemo<IconRenderProps>(() => ({\n    isDecorative: isDecorative(),\n    isInteractive: isInteractive(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Icon\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  return (\n    <Show\n      when={isInteractive()}\n      fallback={\n        <span\n          {...domProps()}\n          role={hasLabel() ? \"img\" : undefined}\n          aria-hidden={isDecorative() ? \"true\" : undefined}\n          aria-label={local[\"aria-label\"]}\n          aria-labelledby={local[\"aria-labelledby\"]}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-interactive={undefined}\n          data-decorative={isDecorative() || undefined}\n        >\n          {renderProps.renderChildren()}\n        </span>\n      }\n    >\n      <Button\n        {...domProps()}\n        onPress={local.onPress}\n        aria-label={local[\"aria-label\"]}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-interactive=\"\"\n      >\n        {renderProps.renderChildren()}\n      </Button>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA+CA,MAAauB,cAActB,cAAgC,IAAI;;;;;;;;;;;;;;;;;;;;AAqB/D,SAAgBuB,KAAKC,OAA+B;CAClD,MAAM,CAACE,OAAOC,QAAQxB,WAAWqB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,MAAMI,iBAAiB,CAAC,EAAEF,MAAM,iBAAiBA,MAAM;CACvD,MAAMZ,sBAAsB,CAAC,CAACY,MAAMV;CACpC,MAAMH,qBAAqB,CAACe,SAAS;CAErC,MAAMC,eAAe5B,kBAAmC;EACtDY,cAAcA,aAAa;EAC3BC,eAAeA,cAAc;CAC/B,EAAE;CAEF,MAAMgB,cAActB,eAClB;EACE,IAAIU,WAAW;GACb,OAAOQ,MAAMR;EACf;EACAC,OAAOO,MAAMP;EACbC,OAAOM,MAAMN;EACbW,kBAAkB;CACpB,GACAF,YACF;CAEA,MAAMG,WAAW/B,iBAAiBQ,eAAekB,MAAM,EAAEM,QAAQ,KAAK,CAAC,CAAC;CAExE,OAAAC,gBACGhC,MAAI;EAAA,IACHiC,OAAI;GAAA,OAAErB,cAAc;EAAC;EAAA,IACrBsB,WAAQ;GAAA,cAAA;IAAA,IAAAC,OAAAC,eAAAC,MAAA;IAAAC,OAAAH,MAAAI,WAEAT,UAAQ;KAAA,IACZU,OAAI;MAAA,OAAEd,SAAS,IAAI,QAAQe,KAAAA;KAAS;KAAA,KAAA,iBAAA;MAAA,OACvB9B,aAAa,IAAI,SAAS8B,KAAAA;KAAS;KAAA,KAAA,gBAAA;MAAA,OACpCjB,MAAM;KAAa;KAAA,KAAA,qBAAA;MAAA,OACdA,MAAM;KAAkB;KAAA,KAAA,WAAA;MAAA,OAClCI,YAAYX,MAAM;KAAC;KAAA,IAC1BC,QAAK;MAAA,OAAEU,YAAYV,MAAM;KAAC;KAAA,oBACRuB,KAAAA;KAAS,KAAA,qBAAA;MAAA,OACV9B,aAAa,KAAK8B,KAAAA;KAAS;IAAA,CAAA,GAAA,OAAA,IAAA;IAAAK,OAAAX,YAE3CP,YAAYmB,eAAe,CAAC;IAAAC,mBAAA;IAAA,OAAAb;GAAA,EAAA,CAAA;EAAA;EAAA,IAAAnB,WAAA;GAAA,OAAAgB,gBAIhCxB,QAAM+B,WACDT,UAAQ;IAAA,IACZhB,UAAO;KAAA,OAAEU,MAAMV;IAAO;IAAA,KAAA,gBAAA;KAAA,OACVU,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,WAAA;KAAA,OAClCI,YAAYX,MAAM;IAAC;IAAA,IAC1BC,QAAK;KAAA,OAAEU,YAAYV,MAAM;IAAC;IAAA,oBAAA;IAAA,IAAAF,WAAA;KAAA,OAGzBY,YAAYmB,eAAe;IAAC;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIrC"}

package/dist/Icon.jsx

@@ -0,0 +1,72 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Button } from "./Button.jsx";
+import { Show, createContext, createMemo, splitProps } from "solid-js";
+//#region src/Icon.tsx
+/**
+* Icon component for solidaria-components
+*
+* Minimal headless Icon that owns ARIA semantics:
+* - Decorative (no label): aria-hidden="true"
+* - Informative (aria-label): role="img" + aria-label
+* - Interactive (onPress): wraps content in headless Button
+*
+* The UI layer consumes this for styling/composition only.
+*/
+const IconContext = createContext(null);
+/**
+* An icon wrapper that provides correct ARIA semantics.
+*
+* - **Decorative** (no `aria-label`): renders `<span aria-hidden="true">`
+* - **Informative** (`aria-label` provided): renders `<span role="img" aria-label="...">`
+* - **Interactive** (`onPress` provided): wraps in headless `Button`
+*
+* @example
+* ```tsx
+* // Decorative
+* <Icon><SearchSvg /></Icon>
+*
+* // Informative
+* <Icon aria-label="Search"><SearchSvg /></Icon>
+*
+* // Interactive
+* <Icon onPress={handleSearch} aria-label="Search"><SearchSvg /></Icon>
+* ```
+*/
+function Icon(props) {
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"onPress",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	const hasLabel = () => !!(local["aria-label"] || local["aria-labelledby"]);
+	const isInteractive = () => !!local.onPress;
+	const isDecorative = () => !hasLabel();
+	const renderValues = createMemo(() => ({
+		isDecorative: isDecorative(),
+		isInteractive: isInteractive()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Icon"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <Show when={isInteractive()} fallback={<span {...domProps()} role={hasLabel() ? "img" : void 0} aria-hidden={isDecorative() ? "true" : void 0} aria-label={local["aria-label"]} aria-labelledby={local["aria-labelledby"]} class={renderProps.class()} style={renderProps.style()} data-interactive={void 0} data-decorative={isDecorative() || void 0}>
+          {renderProps.renderChildren()}
+        </span>}>
+      <Button {...domProps()} onPress={local.onPress} aria-label={local["aria-label"]} aria-labelledby={local["aria-labelledby"]} class={renderProps.class()} style={renderProps.style()} data-interactive="">
+        {renderProps.renderChildren()}
+      </Button>
+    </Show>;
+}
+//#endregion
+export { Icon, IconContext };
+
+//# sourceMappingURL=Icon.jsx.map

package/dist/Icon.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.jsx","names":[],"sources":["../src/Icon.tsx"],"sourcesContent":["/**\n * Icon component for solidaria-components\n *\n * Minimal headless Icon that owns ARIA semantics:\n * - Decorative (no label): aria-hidden=\"true\"\n * - Informative (aria-label): role=\"img\" + aria-label\n * - Interactive (onPress): wraps content in headless Button\n *\n * The UI layer consumes this for styling/composition only.\n */\n\nimport { type JSX, createContext, createMemo, Show, splitProps } from \"solid-js\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { Button } from \"./Button\";\nimport type { PressEvent } from \"@proyecto-viviana/solidaria\";\n\nexport interface IconRenderProps {\n  /** Whether the icon is purely decorative (no label). */\n  isDecorative: boolean;\n  /** Whether the icon is interactive (has onPress). */\n  isInteractive: boolean;\n}\n\nexport interface IconProps extends SlotProps {\n  /** Handler called when the icon is pressed (makes it interactive). */\n  onPress?: (e: PressEvent) => void;\n  /** Accessible label for the icon. When provided, the icon is informative (role=\"img\"). */\n  \"aria-label\"?: string;\n  /** ID of an element that labels this icon. */\n  \"aria-labelledby\"?: string;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<IconRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<IconRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<IconRenderProps>;\n  /** The id of the element. */\n  id?: string;\n}\n\nexport const IconContext = createContext<IconProps | null>(null);\n\n/**\n * An icon wrapper that provides correct ARIA semantics.\n *\n * - **Decorative** (no `aria-label`): renders `<span aria-hidden=\"true\">`\n * - **Informative** (`aria-label` provided): renders `<span role=\"img\" aria-label=\"...\">`\n * - **Interactive** (`onPress` provided): wraps in headless `Button`\n *\n * @example\n * ```tsx\n * // Decorative\n * <Icon><SearchSvg /></Icon>\n *\n * // Informative\n * <Icon aria-label=\"Search\"><SearchSvg /></Icon>\n *\n * // Interactive\n * <Icon onPress={handleSearch} aria-label=\"Search\"><SearchSvg /></Icon>\n * ```\n */\nexport function Icon(props: IconProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"onPress\",\n    \"aria-label\",\n    \"aria-labelledby\",\n  ]);\n\n  const hasLabel = () => !!(local[\"aria-label\"] || local[\"aria-labelledby\"]);\n  const isInteractive = () => !!local.onPress;\n  const isDecorative = () => !hasLabel();\n\n  const renderValues = createMemo<IconRenderProps>(() => ({\n    isDecorative: isDecorative(),\n    isInteractive: isInteractive(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Icon\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  return (\n    <Show\n      when={isInteractive()}\n      fallback={\n        <span\n          {...domProps()}\n          role={hasLabel() ? \"img\" : undefined}\n          aria-hidden={isDecorative() ? \"true\" : undefined}\n          aria-label={local[\"aria-label\"]}\n          aria-labelledby={local[\"aria-labelledby\"]}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-interactive={undefined}\n          data-decorative={isDecorative() || undefined}\n        >\n          {renderProps.renderChildren()}\n        </span>\n      }\n    >\n      <Button\n        {...domProps()}\n        onPress={local.onPress}\n        aria-label={local[\"aria-label\"]}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-interactive=\"\"\n      >\n        {renderProps.renderChildren()}\n      </Button>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+CA,MAAa,cAAc,cAAgC,IAAI;;;;;;;;;;;;;;;;;;;;AAqB/D,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,CAAC,EAAE,MAAM,iBAAiB,MAAM;CACvD,MAAM,sBAAsB,CAAC,CAAC,MAAM;CACpC,MAAM,qBAAqB,CAAC,SAAS;CAErC,MAAM,eAAe,kBAAmC;EACtD,cAAc,aAAa;EAC3B,eAAe,cAAc;CAC/B,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,OACE,CAAC,KACC,MAAM,cAAc,GACpB,UACE,CAAC,SACK,SAAS,GACb,MAAM,SAAS,IAAI,QAAQ,KAAA,GAC3B,aAAa,aAAa,IAAI,SAAS,KAAA,GACvC,YAAY,MAAM,eAClB,iBAAiB,MAAM,oBACvB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,kBAAkB,KAAA,GAClB,iBAAiB,aAAa,KAAK,KAAA,GACpC;WACE,YAAY,eAAe,EAAE;QAChC,EAAE,OAEL;MACC,CAAC,WACK,SAAS,GACb,SAAS,MAAM,SACf,YAAY,MAAM,eAClB,iBAAiB,MAAM,oBACvB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,oBACD;SACE,YAAY,eAAe,EAAE;MAChC,EAAE,OAAO;IACX,EAAE;AAEN"}

package/dist/Keyboard.js

@@ -0,0 +1,30 @@
+import { getNextElement, insert, runHydrationEvents, spread, template } from "solid-js/web";
+import { createContext, splitProps, useContext } from "solid-js";
+//#region src/Keyboard.tsx
+/**
+* Keyboard primitive for solidaria-components.
+*
+* Displays keyboard key hints with semantic <kbd> markup.
+* Port direction: react-aria-components/src/Keyboard.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<kbd dir=ltr>`);
+const KeyboardContext = createContext(null);
+function Keyboard(props) {
+	const context = useContext(KeyboardContext);
+	const merged = () => ({
+		...context,
+		...props
+	});
+	const [local, domProps] = splitProps(merged(), ["children"]);
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, domProps, false, true);
+		insert(_el$, () => local.children);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+//#endregion
+export { Keyboard, KeyboardContext };
+
+//# sourceMappingURL=Keyboard.js.map

package/dist/Keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.js","names":["JSX","createContext","splitProps","useContext","KeyboardProps","HTMLAttributes","HTMLElement","children","Element","KeyboardContext","Keyboard","props","context","merged","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$insert","_$runHydrationEvents"],"sources":["../src/Keyboard.tsx"],"sourcesContent":["/**\n * Keyboard primitive for solidaria-components.\n *\n * Displays keyboard key hints with semantic <kbd> markup.\n * Port direction: react-aria-components/src/Keyboard.tsx\n */\n\nimport { type JSX, createContext, splitProps, useContext } from \"solid-js\";\n\nexport interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {\n  children?: JSX.Element;\n}\n\nexport const KeyboardContext = createContext<KeyboardProps | null>(null);\n\nexport function Keyboard(props: KeyboardProps): JSX.Element {\n  const context = useContext(KeyboardContext);\n  const merged = () => ({ ...context, ...props });\n  const [local, domProps] = splitProps(merged(), [\"children\"]);\n\n  return (\n    <kbd dir=\"ltr\" {...domProps}>\n      {local.children}\n    </kbd>\n  );\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAaS,kBAAkBR,cAAoC,IAAI;AAEvE,SAAgBS,SAASC,OAAmC;CAC1D,MAAMC,UAAUT,WAAWM,eAAe;CAC1C,MAAMI,gBAAgB;EAAE,GAAGD;EAAS,GAAGD;CAAM;CAC7C,MAAM,CAACG,OAAOC,YAAYb,WAAWW,OAAO,GAAG,CAAC,UAAU,CAAC;CAE3D,cAAA;EAAA,IAAAG,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MACqBD,UAAQ,OAAA,IAAA;EAAAK,OAAAJ,YACxBF,MAAMP,QAAQ;EAAAc,mBAAA;EAAA,OAAAL;CAAA,EAAA,CAAA;AAGrB"}

package/dist/Keyboard.jsx

@@ -0,0 +1,24 @@
+import { createContext, splitProps, useContext } from "solid-js";
+//#region src/Keyboard.tsx
+/**
+* Keyboard primitive for solidaria-components.
+*
+* Displays keyboard key hints with semantic <kbd> markup.
+* Port direction: react-aria-components/src/Keyboard.tsx
+*/
+const KeyboardContext = createContext(null);
+function Keyboard(props) {
+	const context = useContext(KeyboardContext);
+	const merged = () => ({
+		...context,
+		...props
+	});
+	const [local, domProps] = splitProps(merged(), ["children"]);
+	return <kbd dir="ltr" {...domProps}>
+      {local.children}
+    </kbd>;
+}
+//#endregion
+export { Keyboard, KeyboardContext };
+
+//# sourceMappingURL=Keyboard.jsx.map

package/dist/Keyboard.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.jsx","names":[],"sources":["../src/Keyboard.tsx"],"sourcesContent":["/**\n * Keyboard primitive for solidaria-components.\n *\n * Displays keyboard key hints with semantic <kbd> markup.\n * Port direction: react-aria-components/src/Keyboard.tsx\n */\n\nimport { type JSX, createContext, splitProps, useContext } from \"solid-js\";\n\nexport interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {\n  children?: JSX.Element;\n}\n\nexport const KeyboardContext = createContext<KeyboardProps | null>(null);\n\nexport function Keyboard(props: KeyboardProps): JSX.Element {\n  const context = useContext(KeyboardContext);\n  const merged = () => ({ ...context, ...props });\n  const [local, domProps] = splitProps(merged(), [\"children\"]);\n\n  return (\n    <kbd dir=\"ltr\" {...domProps}>\n      {local.children}\n    </kbd>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,kBAAkB,cAAoC,IAAI;AAEvE,SAAgB,SAAS,OAAmC;CAC1D,MAAM,UAAU,WAAW,eAAe;CAC1C,MAAM,gBAAgB;EAAE,GAAG;EAAS,GAAG;CAAM;CAC7C,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO,GAAG,CAAC,UAAU,CAAC;CAE3D,OACE,CAAC,IAAI,cAAc,UAAU;OAC1B,MAAM,SAAS;IAClB,EAAE;AAEN"}

package/dist/Landmark.js

@@ -0,0 +1,134 @@
+import { filterDOMProps } from "./utils.js";
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { createContext, createMemo, createSignal, splitProps } from "solid-js";
+import { createLandmark, getLandmarkController } from "@proyecto-viviana/solidaria";
+//#region src/Landmark.tsx
+/**
+* Landmark component for solidaria-components
+*
+* Pre-wired headless landmark component that combines aria hooks.
+* Enables F6 keyboard navigation between major page sections.
+*/
+const LandmarkContext = createContext(null);
+/**
+* Maps ARIA landmark roles to their semantic HTML elements.
+* Using semantic elements is preferred when possible.
+*/
+const roleToSemanticElement = {
+	main: "main",
+	navigation: "nav",
+	search: "search",
+	banner: "header",
+	contentinfo: "footer",
+	complementary: "aside",
+	form: "form",
+	region: "section"
+};
+/**
+* A landmark is a region of the page that helps screen reader users navigate.
+* Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
+*
+* @example
+* ```tsx
+* // Main content area
+* <Landmark role="main" aria-label="Main content">
+*   <h1>Welcome</h1>
+*   <p>Page content here...</p>
+* </Landmark>
+*
+* // Navigation
+* <Landmark role="navigation" aria-label="Primary navigation">
+*   <nav>...</nav>
+* </Landmark>
+*
+* // Search
+* <Landmark role="search" aria-label="Site search">
+*   <form>...</form>
+* </Landmark>
+*
+* // Custom element type
+* <Landmark role="region" aria-label="Featured content" elementType="div">
+*   ...
+* </Landmark>
+* ```
+*/
+function Landmark(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"elementType"
+	]);
+	const [ref, setRef] = createSignal();
+	const elementType = createMemo(() => {
+		if (local.elementType) return local.elementType;
+		return roleToSemanticElement[ariaProps.role] ?? "div";
+	});
+	const landmarkAria = createLandmark({
+		get role() {
+			return ariaProps.role;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get id() {
+			return ariaProps.id;
+		},
+		get focus() {
+			return ariaProps.focus;
+		}
+	}, ref);
+	const renderValues = createMemo(() => ({ role: ariaProps.role }));
+	const resolvedClass = createMemo(() => {
+		const cls = local.class;
+		if (typeof cls === "function") return cls(renderValues());
+		return cls ?? `solidaria-Landmark solidaria-Landmark--${ariaProps.role}`;
+	});
+	const resolvedStyle = createMemo(() => {
+		const style = local.style;
+		if (typeof style === "function") return style(renderValues());
+		return style;
+	});
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	return createComponent(Dynamic, mergeProps({
+		get component() {
+			return elementType();
+		},
+		ref: setRef
+	}, domProps, () => landmarkAria.landmarkProps, {
+		get ["class"]() {
+			return resolvedClass();
+		},
+		get style() {
+			return resolvedStyle();
+		},
+		get slot() {
+			return local.slot;
+		},
+		get children() {
+			return props.children;
+		}
+	}));
+}
+/**
+* Returns a controller for programmatic landmark navigation.
+*
+* @example
+* ```tsx
+* const controller = useLandmarkController();
+*
+* <button onClick={() => controller.focusMain()}>Skip to main content</button>
+* <button onClick={() => controller.focusNext()}>Next landmark</button>
+* ```
+*/
+function useLandmarkController() {
+	return getLandmarkController();
+}
+//#endregion
+export { Landmark, LandmarkContext, useLandmarkController };
+
+//# sourceMappingURL=Landmark.js.map

package/dist/Landmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Landmark.js","names":["JSX","createContext","createMemo","createSignal","splitProps","Dynamic","createLandmark","getLandmarkController","AriaLandmarkProps","AriaLandmarkRole","LandmarkController","SlotProps","filterDOMProps","LandmarkRenderProps","role","LandmarkProps","elementType","IntrinsicElements","class","renderProps","style","CSSProperties","children","Element","LandmarkContext","roleToSemanticElement","Partial","Record","main","navigation","search","banner","contentinfo","complementary","form","region","Landmark","props","local","ariaProps","ref","setRef","HTMLElement","landmarkAria","aria-label","aria-labelledby","id","focus","renderValues","resolvedClass","cls","resolvedStyle","domProps","global","_$createComponent","_$mergeProps","component","landmarkProps","slot","useLandmarkController"],"sources":["../src/Landmark.tsx"],"sourcesContent":["/**\n * Landmark component for solidaria-components\n *\n * Pre-wired headless landmark component that combines aria hooks.\n * Enables F6 keyboard navigation between major page sections.\n */\n\nimport { type JSX, createContext, createMemo, createSignal, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport {\n  createLandmark,\n  getLandmarkController,\n  type AriaLandmarkProps,\n  type AriaLandmarkRole,\n  type LandmarkController,\n} from \"@proyecto-viviana/solidaria\";\nimport { type SlotProps, filterDOMProps } from \"./utils\";\n\nexport interface LandmarkRenderProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n}\n\nexport interface LandmarkProps extends AriaLandmarkProps, SlotProps {\n  /**\n   * The HTML element type to render.\n   * @default 'div' (or semantic element based on role)\n   */\n  elementType?: keyof JSX.IntrinsicElements;\n  /** The CSS className for the element. A function may be provided to receive render props. */\n  class?: string | ((renderProps: LandmarkRenderProps) => string);\n  /** The inline style for the element. A function may be provided to receive render props. */\n  style?: JSX.CSSProperties | ((renderProps: LandmarkRenderProps) => JSX.CSSProperties);\n  /** Children content. */\n  children?: JSX.Element;\n}\n\nexport type { AriaLandmarkRole, LandmarkController };\n\nexport const LandmarkContext = createContext<LandmarkProps | null>(null);\n\n/**\n * Maps ARIA landmark roles to their semantic HTML elements.\n * Using semantic elements is preferred when possible.\n */\nconst roleToSemanticElement: Partial<Record<AriaLandmarkRole, keyof JSX.IntrinsicElements>> = {\n  main: \"main\",\n  navigation: \"nav\",\n  search: \"search\", // HTML5.3 <search> element\n  banner: \"header\",\n  contentinfo: \"footer\",\n  complementary: \"aside\",\n  form: \"form\",\n  region: \"section\",\n};\n\n/**\n * A landmark is a region of the page that helps screen reader users navigate.\n * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.\n *\n * @example\n * ```tsx\n * // Main content area\n * <Landmark role=\"main\" aria-label=\"Main content\">\n *   <h1>Welcome</h1>\n *   <p>Page content here...</p>\n * </Landmark>\n *\n * // Navigation\n * <Landmark role=\"navigation\" aria-label=\"Primary navigation\">\n *   <nav>...</nav>\n * </Landmark>\n *\n * // Search\n * <Landmark role=\"search\" aria-label=\"Site search\">\n *   <form>...</form>\n * </Landmark>\n *\n * // Custom element type\n * <Landmark role=\"region\" aria-label=\"Featured content\" elementType=\"div\">\n *   ...\n * </Landmark>\n * ```\n */\nexport function Landmark(props: LandmarkProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"children\",\n    \"elementType\",\n  ]);\n\n  // Element ref\n  const [ref, setRef] = createSignal<HTMLElement>();\n\n  // Determine the element type - use semantic element for the role if not specified\n  const elementType = createMemo(() => {\n    if (local.elementType) {\n      return local.elementType;\n    }\n    return roleToSemanticElement[ariaProps.role] ?? \"div\";\n  });\n\n  // Create landmark aria props\n  const landmarkAria = createLandmark(\n    {\n      get role() {\n        return ariaProps.role;\n      },\n      get \"aria-label\"() {\n        return ariaProps[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return ariaProps[\"aria-labelledby\"];\n      },\n      get id() {\n        return ariaProps.id;\n      },\n      get focus() {\n        return ariaProps.focus;\n      },\n    },\n    ref,\n  );\n\n  const renderValues = createMemo<LandmarkRenderProps>(() => ({\n    role: ariaProps.role,\n  }));\n\n  const resolvedClass = createMemo(() => {\n    const cls = local.class;\n    if (typeof cls === \"function\") {\n      return cls(renderValues());\n    }\n    return cls ?? `solidaria-Landmark solidaria-Landmark--${ariaProps.role}`;\n  });\n\n  const resolvedStyle = createMemo(() => {\n    const style = local.style;\n    if (typeof style === \"function\") {\n      return style(renderValues());\n    }\n    return style;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <Dynamic\n      component={elementType()}\n      ref={setRef}\n      {...domProps()}\n      {...landmarkAria.landmarkProps}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    >\n      {props.children}\n    </Dynamic>\n  );\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = useLandmarkController();\n *\n * <button onClick={() => controller.focusMain()}>Skip to main content</button>\n * <button onClick={() => controller.focusNext()}>Next landmark</button>\n * ```\n */\nexport function useLandmarkController(): LandmarkController {\n  return getLandmarkController();\n}\n"],"mappings":";;;;;;;;;;;AAuCA,MAAawB,kBAAkBvB,cAAoC,IAAI;;;;;AAMvE,MAAMwB,wBAAwF;CAC5FG,MAAM;CACNC,YAAY;CACZC,QAAQ;CACRC,QAAQ;CACRC,aAAa;CACbC,eAAe;CACfC,MAAM;CACNC,QAAQ;AACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgBC,SAASC,OAAmC;CAC1D,MAAM,CAACC,OAAOC,aAAanC,WAAWiC,OAAO;EAC3C;EACA;EACA;EACA;EACA;CAAa,CACd;CAGD,MAAM,CAACG,KAAKC,UAAUtC,aAA0B;CAGhD,MAAMa,cAAcd,iBAAiB;EACnC,IAAIoC,MAAMtB,aACR,OAAOsB,MAAMtB;EAEf,OAAOS,sBAAsBc,UAAUzB,SAAS;CAClD,CAAC;CAGD,MAAM6B,eAAerC,eACnB;EACE,IAAIQ,OAAO;GACT,OAAOyB,UAAUzB;EACnB;EACA,IAAI,eAAe;GACjB,OAAOyB,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAOA,UAAU;EACnB;EACA,IAAIO,KAAK;GACP,OAAOP,UAAUO;EACnB;EACA,IAAIC,QAAQ;GACV,OAAOR,UAAUQ;EACnB;CACF,GACAP,GACF;CAEA,MAAMQ,eAAe9C,kBAAuC,EAC1DY,MAAMyB,UAAUzB,KAClB,EAAE;CAEF,MAAMmC,gBAAgB/C,iBAAiB;EACrC,MAAMgD,MAAMZ,MAAMpB;EAClB,IAAI,OAAOgC,QAAQ,YACjB,OAAOA,IAAIF,aAAa,CAAC;EAE3B,OAAOE,OAAO,0CAA0CX,UAAUzB;CACpE,CAAC;CAED,MAAMqC,gBAAgBjD,iBAAiB;EACrC,MAAMkB,QAAQkB,MAAMlB;EACpB,IAAI,OAAOA,UAAU,YACnB,OAAOA,MAAM4B,aAAa,CAAC;EAE7B,OAAO5B;CACT,CAAC;CAED,MAAMgC,WAAWlD,iBAAiBU,eAAe2B,WAAW,EAAEc,QAAQ,KAAK,CAAC,CAAC;CAE7E,OAAAC,gBACGjD,SAAOkD,WAAA;EAAA,IACNC,YAAS;GAAA,OAAExC,YAAY;EAAC;EAAAwB,KACnBC;CAAM,GACPW,gBACAT,aAAac,eAAa;EAAA,KAAA,WAAA;GAAA,OACvBR,cAAc;EAAC;EAAA,IACtB7B,QAAK;GAAA,OAAE+B,cAAc;EAAC;EAAA,IACtBO,OAAI;GAAA,OAAEpB,MAAMoB;EAAI;EAAA,IAAApC,WAAA;GAAA,OAEfe,MAAMf;EAAQ;CAAA,CAAA,CAAA;AAGrB;;;;;;;;;;;;AAaA,SAAgBqC,wBAA4C;CAC1D,OAAOpD,sBAAsB;AAC/B"}

package/dist/Landmark.jsx

@@ -0,0 +1,118 @@
+import { filterDOMProps } from "./utils.jsx";
+import { createContext, createMemo, createSignal, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createLandmark, getLandmarkController } from "@proyecto-viviana/solidaria";
+//#region src/Landmark.tsx
+/**
+* Landmark component for solidaria-components
+*
+* Pre-wired headless landmark component that combines aria hooks.
+* Enables F6 keyboard navigation between major page sections.
+*/
+const LandmarkContext = createContext(null);
+/**
+* Maps ARIA landmark roles to their semantic HTML elements.
+* Using semantic elements is preferred when possible.
+*/
+const roleToSemanticElement = {
+	main: "main",
+	navigation: "nav",
+	search: "search",
+	banner: "header",
+	contentinfo: "footer",
+	complementary: "aside",
+	form: "form",
+	region: "section"
+};
+/**
+* A landmark is a region of the page that helps screen reader users navigate.
+* Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
+*
+* @example
+* ```tsx
+* // Main content area
+* <Landmark role="main" aria-label="Main content">
+*   <h1>Welcome</h1>
+*   <p>Page content here...</p>
+* </Landmark>
+*
+* // Navigation
+* <Landmark role="navigation" aria-label="Primary navigation">
+*   <nav>...</nav>
+* </Landmark>
+*
+* // Search
+* <Landmark role="search" aria-label="Site search">
+*   <form>...</form>
+* </Landmark>
+*
+* // Custom element type
+* <Landmark role="region" aria-label="Featured content" elementType="div">
+*   ...
+* </Landmark>
+* ```
+*/
+function Landmark(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"elementType"
+	]);
+	const [ref, setRef] = createSignal();
+	const elementType = createMemo(() => {
+		if (local.elementType) return local.elementType;
+		return roleToSemanticElement[ariaProps.role] ?? "div";
+	});
+	const landmarkAria = createLandmark({
+		get role() {
+			return ariaProps.role;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get id() {
+			return ariaProps.id;
+		},
+		get focus() {
+			return ariaProps.focus;
+		}
+	}, ref);
+	const renderValues = createMemo(() => ({ role: ariaProps.role }));
+	const resolvedClass = createMemo(() => {
+		const cls = local.class;
+		if (typeof cls === "function") return cls(renderValues());
+		return cls ?? `solidaria-Landmark solidaria-Landmark--${ariaProps.role}`;
+	});
+	const resolvedStyle = createMemo(() => {
+		const style = local.style;
+		if (typeof style === "function") return style(renderValues());
+		return style;
+	});
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	return <Dynamic component={elementType()} ref={setRef} {...domProps()} {...landmarkAria.landmarkProps} class={resolvedClass()} style={resolvedStyle()} slot={local.slot}>
+      {props.children}
+    </Dynamic>;
+}
+/**
+* Returns a controller for programmatic landmark navigation.
+*
+* @example
+* ```tsx
+* const controller = useLandmarkController();
+*
+* <button onClick={() => controller.focusMain()}>Skip to main content</button>
+* <button onClick={() => controller.focusNext()}>Next landmark</button>
+* ```
+*/
+function useLandmarkController() {
+	return getLandmarkController();
+}
+//#endregion
+export { Landmark, LandmarkContext, useLandmarkController };
+
+//# sourceMappingURL=Landmark.jsx.map

package/dist/Landmark.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Landmark.jsx","names":[],"sources":["../src/Landmark.tsx"],"sourcesContent":["/**\n * Landmark component for solidaria-components\n *\n * Pre-wired headless landmark component that combines aria hooks.\n * Enables F6 keyboard navigation between major page sections.\n */\n\nimport { type JSX, createContext, createMemo, createSignal, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport {\n  createLandmark,\n  getLandmarkController,\n  type AriaLandmarkProps,\n  type AriaLandmarkRole,\n  type LandmarkController,\n} from \"@proyecto-viviana/solidaria\";\nimport { type SlotProps, filterDOMProps } from \"./utils\";\n\nexport interface LandmarkRenderProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n}\n\nexport interface LandmarkProps extends AriaLandmarkProps, SlotProps {\n  /**\n   * The HTML element type to render.\n   * @default 'div' (or semantic element based on role)\n   */\n  elementType?: keyof JSX.IntrinsicElements;\n  /** The CSS className for the element. A function may be provided to receive render props. */\n  class?: string | ((renderProps: LandmarkRenderProps) => string);\n  /** The inline style for the element. A function may be provided to receive render props. */\n  style?: JSX.CSSProperties | ((renderProps: LandmarkRenderProps) => JSX.CSSProperties);\n  /** Children content. */\n  children?: JSX.Element;\n}\n\nexport type { AriaLandmarkRole, LandmarkController };\n\nexport const LandmarkContext = createContext<LandmarkProps | null>(null);\n\n/**\n * Maps ARIA landmark roles to their semantic HTML elements.\n * Using semantic elements is preferred when possible.\n */\nconst roleToSemanticElement: Partial<Record<AriaLandmarkRole, keyof JSX.IntrinsicElements>> = {\n  main: \"main\",\n  navigation: \"nav\",\n  search: \"search\", // HTML5.3 <search> element\n  banner: \"header\",\n  contentinfo: \"footer\",\n  complementary: \"aside\",\n  form: \"form\",\n  region: \"section\",\n};\n\n/**\n * A landmark is a region of the page that helps screen reader users navigate.\n * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.\n *\n * @example\n * ```tsx\n * // Main content area\n * <Landmark role=\"main\" aria-label=\"Main content\">\n *   <h1>Welcome</h1>\n *   <p>Page content here...</p>\n * </Landmark>\n *\n * // Navigation\n * <Landmark role=\"navigation\" aria-label=\"Primary navigation\">\n *   <nav>...</nav>\n * </Landmark>\n *\n * // Search\n * <Landmark role=\"search\" aria-label=\"Site search\">\n *   <form>...</form>\n * </Landmark>\n *\n * // Custom element type\n * <Landmark role=\"region\" aria-label=\"Featured content\" elementType=\"div\">\n *   ...\n * </Landmark>\n * ```\n */\nexport function Landmark(props: LandmarkProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"children\",\n    \"elementType\",\n  ]);\n\n  // Element ref\n  const [ref, setRef] = createSignal<HTMLElement>();\n\n  // Determine the element type - use semantic element for the role if not specified\n  const elementType = createMemo(() => {\n    if (local.elementType) {\n      return local.elementType;\n    }\n    return roleToSemanticElement[ariaProps.role] ?? \"div\";\n  });\n\n  // Create landmark aria props\n  const landmarkAria = createLandmark(\n    {\n      get role() {\n        return ariaProps.role;\n      },\n      get \"aria-label\"() {\n        return ariaProps[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return ariaProps[\"aria-labelledby\"];\n      },\n      get id() {\n        return ariaProps.id;\n      },\n      get focus() {\n        return ariaProps.focus;\n      },\n    },\n    ref,\n  );\n\n  const renderValues = createMemo<LandmarkRenderProps>(() => ({\n    role: ariaProps.role,\n  }));\n\n  const resolvedClass = createMemo(() => {\n    const cls = local.class;\n    if (typeof cls === \"function\") {\n      return cls(renderValues());\n    }\n    return cls ?? `solidaria-Landmark solidaria-Landmark--${ariaProps.role}`;\n  });\n\n  const resolvedStyle = createMemo(() => {\n    const style = local.style;\n    if (typeof style === \"function\") {\n      return style(renderValues());\n    }\n    return style;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <Dynamic\n      component={elementType()}\n      ref={setRef}\n      {...domProps()}\n      {...landmarkAria.landmarkProps}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    >\n      {props.children}\n    </Dynamic>\n  );\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = useLandmarkController();\n *\n * <button onClick={() => controller.focusMain()}>Skip to main content</button>\n * <button onClick={() => controller.focusNext()}>Next landmark</button>\n * ```\n */\nexport function useLandmarkController(): LandmarkController {\n  return getLandmarkController();\n}\n"],"mappings":";;;;;;;;;;;AAuCA,MAAa,kBAAkB,cAAoC,IAAI;;;;;AAMvE,MAAM,wBAAwF;CAC5F,MAAM;CACN,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,eAAe;CACf,MAAM;CACN,QAAQ;AACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,CAAC,OAAO,aAAa,WAAW,OAAO;EAC3C;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,CAAC,KAAK,UAAU,aAA0B;CAGhD,MAAM,cAAc,iBAAiB;EACnC,IAAI,MAAM,aACR,OAAO,MAAM;EAEf,OAAO,sBAAsB,UAAU,SAAS;CAClD,CAAC;CAGD,MAAM,eAAe,eACnB;EACE,IAAI,OAAO;GACT,OAAO,UAAU;EACnB;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,KAAK;GACP,OAAO,UAAU;EACnB;EACA,IAAI,QAAQ;GACV,OAAO,UAAU;EACnB;CACF,GACA,GACF;CAEA,MAAM,eAAe,kBAAuC,EAC1D,MAAM,UAAU,KAClB,EAAE;CAEF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,aAAa,CAAC;EAE3B,OAAO,OAAO,0CAA0C,UAAU;CACpE,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,QAAQ,MAAM;EACpB,IAAI,OAAO,UAAU,YACnB,OAAO,MAAM,aAAa,CAAC;EAE7B,OAAO;CACT,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAE7E,OACE,CAAC,QACC,WAAW,YAAY,GACvB,KAAK,YACD,SAAS,OACT,aAAa,eACjB,OAAO,cAAc,GACrB,OAAO,cAAc,GACrB,MAAM,MAAM,MACb;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;;;;;;;;;AAaA,SAAgB,wBAA4C;CAC1D,OAAO,sBAAsB;AAC/B"}

package/dist/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAyC,MAAM,UAAU,CAAC;AAE7F,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAGjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,cAAc,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,SAAS;IAC3F,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC7C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACzC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,OAAO,CAoL/D"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAyC,MAAM,UAAU,CAAC;AAE7F,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAGjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,cAAc,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,SAAS;IAC3F,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC7C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACzC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,OAAO,CAsL/D"}