@proyecto-viviana/solidaria-components 0.4.1 → 0.5.1

package/dist/ElementTag.js

@@ -0,0 +1,220 @@
+import { Dynamic, createComponent, getNextElement, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
+import { createMemo, splitProps } from "solid-js";
+//#region src/ElementTag.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<a>`), _tmpl$3 = /*#__PURE__*/ template(`<p>`), _tmpl$4 = /*#__PURE__*/ template(`<label>`), _tmpl$5 = /*#__PURE__*/ template(`<strong>`), _tmpl$6 = /*#__PURE__*/ template(`<em>`), _tmpl$7 = /*#__PURE__*/ template(`<small>`), _tmpl$8 = /*#__PURE__*/ template(`<div>`), _tmpl$9 = /*#__PURE__*/ template(`<hr>`), _tmpl$0 = /*#__PURE__*/ template(`<li>`), _tmpl$1 = /*#__PURE__*/ template(`<ul>`), _tmpl$10 = /*#__PURE__*/ template(`<ol>`), _tmpl$11 = /*#__PURE__*/ template(`<figure>`), _tmpl$12 = /*#__PURE__*/ template(`<blockquote>`), _tmpl$13 = /*#__PURE__*/ template(`<address>`), _tmpl$14 = /*#__PURE__*/ template(`<h1>`), _tmpl$15 = /*#__PURE__*/ template(`<h2>`), _tmpl$16 = /*#__PURE__*/ template(`<h3>`), _tmpl$17 = /*#__PURE__*/ template(`<h4>`), _tmpl$18 = /*#__PURE__*/ template(`<h5>`), _tmpl$19 = /*#__PURE__*/ template(`<h6>`), _tmpl$20 = /*#__PURE__*/ template(`<main>`), _tmpl$21 = /*#__PURE__*/ template(`<nav>`), _tmpl$22 = /*#__PURE__*/ template(`<header>`), _tmpl$23 = /*#__PURE__*/ template(`<footer>`), _tmpl$24 = /*#__PURE__*/ template(`<aside>`), _tmpl$25 = /*#__PURE__*/ template(`<section>`), _tmpl$26 = /*#__PURE__*/ template(`<article>`), _tmpl$27 = /*#__PURE__*/ template(`<form>`), _tmpl$28 = /*#__PURE__*/ template(`<search>`);
+/**
+* Renders a string tag as a *statically compiled* element.
+*
+* A drop-in replacement for `<Dynamic component={someString}>`, which is unsafe
+* anywhere that can render after hydration settles. Solid's `createDynamic`
+* string branch calls `getNextElement()` with **no** `template` argument
+* (solid-js 1.9.14, `web/dist/dev.js:771`). `getNextElement(template)` only
+* reaches the registry while `isHydrating()` holds; once `sharedConfig.done` is
+* set — hydration finished, but `sharedConfig.context` still live — it falls
+* through to `return template()` and throws `TypeError: template is not a
+* function`. Any deferred child lands on exactly that path: a `<Show>` that
+* flips, a Suspense resolution, a portal, a container that defers its children.
+*
+* Each branch below is real JSX, so the compiler emits a `template()` of its own
+* and hands it to `getNextElement(template)` — which adopts the SSR node from the
+* registry during hydration and clones the template afterwards. Both phases work.
+*
+* Props other than `tag` are spread through untouched, `children` included, so
+* this matches `<Dynamic>`'s behaviour exactly (`Dynamic` likewise splits only
+* `component` and spreads the rest onto the element).
+*/
+function ElementTag(props) {
+	const [local, rest] = splitProps(props, ["tag"]);
+	const cached = createMemo(() => local.tag);
+	return createMemo(() => {
+		switch (cached()) {
+			case "span": return (() => {
+				var _el$ = getNextElement(_tmpl$);
+				spread(_el$, rest, false, false);
+				runHydrationEvents();
+				return _el$;
+			})();
+			case "a": return (() => {
+				var _el$2 = getNextElement(_tmpl$2);
+				spread(_el$2, rest, false, false);
+				runHydrationEvents();
+				return _el$2;
+			})();
+			case "p": return (() => {
+				var _el$3 = getNextElement(_tmpl$3);
+				spread(_el$3, rest, false, false);
+				runHydrationEvents();
+				return _el$3;
+			})();
+			case "label": return (() => {
+				var _el$4 = getNextElement(_tmpl$4);
+				spread(_el$4, rest, false, false);
+				runHydrationEvents();
+				return _el$4;
+			})();
+			case "strong": return (() => {
+				var _el$5 = getNextElement(_tmpl$5);
+				spread(_el$5, rest, false, false);
+				runHydrationEvents();
+				return _el$5;
+			})();
+			case "em": return (() => {
+				var _el$6 = getNextElement(_tmpl$6);
+				spread(_el$6, rest, false, false);
+				runHydrationEvents();
+				return _el$6;
+			})();
+			case "small": return (() => {
+				var _el$7 = getNextElement(_tmpl$7);
+				spread(_el$7, rest, false, false);
+				runHydrationEvents();
+				return _el$7;
+			})();
+			case "div": return (() => {
+				var _el$8 = getNextElement(_tmpl$8);
+				spread(_el$8, rest, false, false);
+				runHydrationEvents();
+				return _el$8;
+			})();
+			case "hr": return (() => {
+				var _el$9 = getNextElement(_tmpl$9);
+				spread(_el$9, rest, false, false);
+				runHydrationEvents();
+				return _el$9;
+			})();
+			case "li": return (() => {
+				var _el$0 = getNextElement(_tmpl$0);
+				spread(_el$0, rest, false, false);
+				runHydrationEvents();
+				return _el$0;
+			})();
+			case "ul": return (() => {
+				var _el$1 = getNextElement(_tmpl$1);
+				spread(_el$1, rest, false, false);
+				runHydrationEvents();
+				return _el$1;
+			})();
+			case "ol": return (() => {
+				var _el$10 = getNextElement(_tmpl$10);
+				spread(_el$10, rest, false, false);
+				runHydrationEvents();
+				return _el$10;
+			})();
+			case "figure": return (() => {
+				var _el$11 = getNextElement(_tmpl$11);
+				spread(_el$11, rest, false, false);
+				runHydrationEvents();
+				return _el$11;
+			})();
+			case "blockquote": return (() => {
+				var _el$12 = getNextElement(_tmpl$12);
+				spread(_el$12, rest, false, false);
+				runHydrationEvents();
+				return _el$12;
+			})();
+			case "address": return (() => {
+				var _el$13 = getNextElement(_tmpl$13);
+				spread(_el$13, rest, false, false);
+				runHydrationEvents();
+				return _el$13;
+			})();
+			case "h1": return (() => {
+				var _el$14 = getNextElement(_tmpl$14);
+				spread(_el$14, rest, false, false);
+				runHydrationEvents();
+				return _el$14;
+			})();
+			case "h2": return (() => {
+				var _el$15 = getNextElement(_tmpl$15);
+				spread(_el$15, rest, false, false);
+				runHydrationEvents();
+				return _el$15;
+			})();
+			case "h3": return (() => {
+				var _el$16 = getNextElement(_tmpl$16);
+				spread(_el$16, rest, false, false);
+				runHydrationEvents();
+				return _el$16;
+			})();
+			case "h4": return (() => {
+				var _el$17 = getNextElement(_tmpl$17);
+				spread(_el$17, rest, false, false);
+				runHydrationEvents();
+				return _el$17;
+			})();
+			case "h5": return (() => {
+				var _el$18 = getNextElement(_tmpl$18);
+				spread(_el$18, rest, false, false);
+				runHydrationEvents();
+				return _el$18;
+			})();
+			case "h6": return (() => {
+				var _el$19 = getNextElement(_tmpl$19);
+				spread(_el$19, rest, false, false);
+				runHydrationEvents();
+				return _el$19;
+			})();
+			case "main": return (() => {
+				var _el$20 = getNextElement(_tmpl$20);
+				spread(_el$20, rest, false, false);
+				runHydrationEvents();
+				return _el$20;
+			})();
+			case "nav": return (() => {
+				var _el$21 = getNextElement(_tmpl$21);
+				spread(_el$21, rest, false, false);
+				runHydrationEvents();
+				return _el$21;
+			})();
+			case "header": return (() => {
+				var _el$22 = getNextElement(_tmpl$22);
+				spread(_el$22, rest, false, false);
+				runHydrationEvents();
+				return _el$22;
+			})();
+			case "footer": return (() => {
+				var _el$23 = getNextElement(_tmpl$23);
+				spread(_el$23, rest, false, false);
+				runHydrationEvents();
+				return _el$23;
+			})();
+			case "aside": return (() => {
+				var _el$24 = getNextElement(_tmpl$24);
+				spread(_el$24, rest, false, false);
+				runHydrationEvents();
+				return _el$24;
+			})();
+			case "section": return (() => {
+				var _el$25 = getNextElement(_tmpl$25);
+				spread(_el$25, rest, false, false);
+				runHydrationEvents();
+				return _el$25;
+			})();
+			case "article": return (() => {
+				var _el$26 = getNextElement(_tmpl$26);
+				spread(_el$26, rest, false, false);
+				runHydrationEvents();
+				return _el$26;
+			})();
+			case "form": return (() => {
+				var _el$27 = getNextElement(_tmpl$27);
+				spread(_el$27, rest, false, false);
+				runHydrationEvents();
+				return _el$27;
+			})();
+			case "search": return (() => {
+				var _el$28 = getNextElement(_tmpl$28);
+				spread(_el$28, rest, false, false);
+				runHydrationEvents();
+				return _el$28;
+			})();
+			default: return createComponent(Dynamic, mergeProps({ get component() {
+				return local.tag;
+			} }, rest));
+		}
+	});
+}
+//#endregion
+export { ElementTag };
+
+//# sourceMappingURL=ElementTag.js.map

package/dist/ElementTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementTag.js","names":["JSX","createMemo","splitProps","Dynamic","ElementTagProps","Record","tag","children","Element","ElementTag","props","local","rest","cached","_el$","_$getNextElement","_tmpl$","_$spread","_$runHydrationEvents","_el$2","_tmpl$2","_el$3","_tmpl$3","_el$4","_tmpl$4","_el$5","_tmpl$5","_el$6","_tmpl$6","_el$7","_tmpl$7","_el$8","_tmpl$8","_el$9","_tmpl$9","_el$0","_tmpl$0","_el$1","_tmpl$1","_el$10","_tmpl$10","_el$11","_tmpl$11","_el$12","_tmpl$12","_el$13","_tmpl$13","_el$14","_tmpl$14","_el$15","_tmpl$15","_el$16","_tmpl$16","_el$17","_tmpl$17","_el$18","_tmpl$18","_el$19","_tmpl$19","_el$20","_tmpl$20","_el$21","_tmpl$21","_el$22","_tmpl$22","_el$23","_tmpl$23","_el$24","_tmpl$24","_el$25","_tmpl$25","_el$26","_tmpl$26","_el$27","_tmpl$27","_el$28","_tmpl$28","_$createComponent","_$mergeProps","component"],"sources":["../src/ElementTag.tsx"],"sourcesContent":["import { type JSX, createMemo, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nexport interface ElementTagProps extends Record<string, unknown> {\n  /** The HTML tag name to render. */\n  tag: string;\n  children?: JSX.Element;\n}\n\n/**\n * Renders a string tag as a *statically compiled* element.\n *\n * A drop-in replacement for `<Dynamic component={someString}>`, which is unsafe\n * anywhere that can render after hydration settles. Solid's `createDynamic`\n * string branch calls `getNextElement()` with **no** `template` argument\n * (solid-js 1.9.14, `web/dist/dev.js:771`). `getNextElement(template)` only\n * reaches the registry while `isHydrating()` holds; once `sharedConfig.done` is\n * set — hydration finished, but `sharedConfig.context` still live — it falls\n * through to `return template()` and throws `TypeError: template is not a\n * function`. Any deferred child lands on exactly that path: a `<Show>` that\n * flips, a Suspense resolution, a portal, a container that defers its children.\n *\n * Each branch below is real JSX, so the compiler emits a `template()` of its own\n * and hands it to `getNextElement(template)` — which adopts the SSR node from the\n * registry during hydration and clones the template afterwards. Both phases work.\n *\n * Props other than `tag` are spread through untouched, `children` included, so\n * this matches `<Dynamic>`'s behaviour exactly (`Dynamic` likewise splits only\n * `component` and spreads the rest onto the element).\n */\nexport function ElementTag(props: ElementTagProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"tag\"]);\n  // Two memos, layered exactly as `<Dynamic>` layers them, and for the same reason.\n  // Reading a single key off a merged-props proxy forces the dynamic spread behind\n  // it to evaluate (to settle key precedence), which subscribes the reader to every\n  // signal that spread touches. Absorbing that read in `cached` keeps it off the memo\n  // below: `cached` re-runs freely, but its *value* only moves when the tag really\n  // changes, so the element is rebuilt only then. Inline the read into the memo below\n  // instead and any prop change recreates the DOM node — blowing away focus, and\n  // looping where an ancestor counts the children it just rendered.\n  const cached = createMemo(() => local.tag);\n  return createMemo(() => {\n    switch (cached()) {\n      // Text / inline\n      case \"span\":\n        return <span {...rest} />;\n      case \"a\":\n        return <a {...rest} />;\n      case \"p\":\n        return <p {...rest} />;\n      case \"label\":\n        return <label {...rest} />;\n      case \"strong\":\n        return <strong {...rest} />;\n      case \"em\":\n        return <em {...rest} />;\n      case \"small\":\n        return <small {...rest} />;\n      // Flow\n      case \"div\":\n        return <div {...rest} />;\n      case \"hr\":\n        return <hr {...rest} />;\n      case \"li\":\n        return <li {...rest} />;\n      case \"ul\":\n        return <ul {...rest} />;\n      case \"ol\":\n        return <ol {...rest} />;\n      case \"figure\":\n        return <figure {...rest} />;\n      case \"blockquote\":\n        return <blockquote {...rest} />;\n      case \"address\":\n        return <address {...rest} />;\n      // Headings\n      case \"h1\":\n        return <h1 {...rest} />;\n      case \"h2\":\n        return <h2 {...rest} />;\n      case \"h3\":\n        return <h3 {...rest} />;\n      case \"h4\":\n        return <h4 {...rest} />;\n      case \"h5\":\n        return <h5 {...rest} />;\n      case \"h6\":\n        return <h6 {...rest} />;\n      // Landmarks\n      case \"main\":\n        return <main {...rest} />;\n      case \"nav\":\n        return <nav {...rest} />;\n      case \"header\":\n        return <header {...rest} />;\n      case \"footer\":\n        return <footer {...rest} />;\n      case \"aside\":\n        return <aside {...rest} />;\n      case \"section\":\n        return <section {...rest} />;\n      case \"article\":\n        return <article {...rest} />;\n      case \"form\":\n        return <form {...rest} />;\n      case \"search\":\n        return <search {...rest} />;\n      default:\n        // A tag no component in this package emits. Kept on `<Dynamic>` rather\n        // than hand-built so hydration still adopts the SSR node; it inherits\n        // the post-hydration caveat above, which is why every tag the library\n        // itself renders is listed explicitly.\n        return <Dynamic component={local.tag} {...rest} />;\n    }\n  }) as unknown as JSX.Element;\n}\n"],"mappings":"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"}

package/dist/ElementTag.jsx

@@ -0,0 +1,67 @@
+import { createMemo, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+//#region src/ElementTag.tsx
+/**
+* Renders a string tag as a *statically compiled* element.
+*
+* A drop-in replacement for `<Dynamic component={someString}>`, which is unsafe
+* anywhere that can render after hydration settles. Solid's `createDynamic`
+* string branch calls `getNextElement()` with **no** `template` argument
+* (solid-js 1.9.14, `web/dist/dev.js:771`). `getNextElement(template)` only
+* reaches the registry while `isHydrating()` holds; once `sharedConfig.done` is
+* set — hydration finished, but `sharedConfig.context` still live — it falls
+* through to `return template()` and throws `TypeError: template is not a
+* function`. Any deferred child lands on exactly that path: a `<Show>` that
+* flips, a Suspense resolution, a portal, a container that defers its children.
+*
+* Each branch below is real JSX, so the compiler emits a `template()` of its own
+* and hands it to `getNextElement(template)` — which adopts the SSR node from the
+* registry during hydration and clones the template afterwards. Both phases work.
+*
+* Props other than `tag` are spread through untouched, `children` included, so
+* this matches `<Dynamic>`'s behaviour exactly (`Dynamic` likewise splits only
+* `component` and spreads the rest onto the element).
+*/
+function ElementTag(props) {
+	const [local, rest] = splitProps(props, ["tag"]);
+	const cached = createMemo(() => local.tag);
+	return createMemo(() => {
+		switch (cached()) {
+			case "span": return <span {...rest} />;
+			case "a": return <a {...rest} />;
+			case "p": return <p {...rest} />;
+			case "label": return <label {...rest} />;
+			case "strong": return <strong {...rest} />;
+			case "em": return <em {...rest} />;
+			case "small": return <small {...rest} />;
+			case "div": return <div {...rest} />;
+			case "hr": return <hr {...rest} />;
+			case "li": return <li {...rest} />;
+			case "ul": return <ul {...rest} />;
+			case "ol": return <ol {...rest} />;
+			case "figure": return <figure {...rest} />;
+			case "blockquote": return <blockquote {...rest} />;
+			case "address": return <address {...rest} />;
+			case "h1": return <h1 {...rest} />;
+			case "h2": return <h2 {...rest} />;
+			case "h3": return <h3 {...rest} />;
+			case "h4": return <h4 {...rest} />;
+			case "h5": return <h5 {...rest} />;
+			case "h6": return <h6 {...rest} />;
+			case "main": return <main {...rest} />;
+			case "nav": return <nav {...rest} />;
+			case "header": return <header {...rest} />;
+			case "footer": return <footer {...rest} />;
+			case "aside": return <aside {...rest} />;
+			case "section": return <section {...rest} />;
+			case "article": return <article {...rest} />;
+			case "form": return <form {...rest} />;
+			case "search": return <search {...rest} />;
+			default: return <Dynamic component={local.tag} {...rest} />;
+		}
+	});
+}
+//#endregion
+export { ElementTag };
+
+//# sourceMappingURL=ElementTag.jsx.map

package/dist/ElementTag.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementTag.jsx","names":[],"sources":["../src/ElementTag.tsx"],"sourcesContent":["import { type JSX, createMemo, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nexport interface ElementTagProps extends Record<string, unknown> {\n  /** The HTML tag name to render. */\n  tag: string;\n  children?: JSX.Element;\n}\n\n/**\n * Renders a string tag as a *statically compiled* element.\n *\n * A drop-in replacement for `<Dynamic component={someString}>`, which is unsafe\n * anywhere that can render after hydration settles. Solid's `createDynamic`\n * string branch calls `getNextElement()` with **no** `template` argument\n * (solid-js 1.9.14, `web/dist/dev.js:771`). `getNextElement(template)` only\n * reaches the registry while `isHydrating()` holds; once `sharedConfig.done` is\n * set — hydration finished, but `sharedConfig.context` still live — it falls\n * through to `return template()` and throws `TypeError: template is not a\n * function`. Any deferred child lands on exactly that path: a `<Show>` that\n * flips, a Suspense resolution, a portal, a container that defers its children.\n *\n * Each branch below is real JSX, so the compiler emits a `template()` of its own\n * and hands it to `getNextElement(template)` — which adopts the SSR node from the\n * registry during hydration and clones the template afterwards. Both phases work.\n *\n * Props other than `tag` are spread through untouched, `children` included, so\n * this matches `<Dynamic>`'s behaviour exactly (`Dynamic` likewise splits only\n * `component` and spreads the rest onto the element).\n */\nexport function ElementTag(props: ElementTagProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"tag\"]);\n  // Two memos, layered exactly as `<Dynamic>` layers them, and for the same reason.\n  // Reading a single key off a merged-props proxy forces the dynamic spread behind\n  // it to evaluate (to settle key precedence), which subscribes the reader to every\n  // signal that spread touches. Absorbing that read in `cached` keeps it off the memo\n  // below: `cached` re-runs freely, but its *value* only moves when the tag really\n  // changes, so the element is rebuilt only then. Inline the read into the memo below\n  // instead and any prop change recreates the DOM node — blowing away focus, and\n  // looping where an ancestor counts the children it just rendered.\n  const cached = createMemo(() => local.tag);\n  return createMemo(() => {\n    switch (cached()) {\n      // Text / inline\n      case \"span\":\n        return <span {...rest} />;\n      case \"a\":\n        return <a {...rest} />;\n      case \"p\":\n        return <p {...rest} />;\n      case \"label\":\n        return <label {...rest} />;\n      case \"strong\":\n        return <strong {...rest} />;\n      case \"em\":\n        return <em {...rest} />;\n      case \"small\":\n        return <small {...rest} />;\n      // Flow\n      case \"div\":\n        return <div {...rest} />;\n      case \"hr\":\n        return <hr {...rest} />;\n      case \"li\":\n        return <li {...rest} />;\n      case \"ul\":\n        return <ul {...rest} />;\n      case \"ol\":\n        return <ol {...rest} />;\n      case \"figure\":\n        return <figure {...rest} />;\n      case \"blockquote\":\n        return <blockquote {...rest} />;\n      case \"address\":\n        return <address {...rest} />;\n      // Headings\n      case \"h1\":\n        return <h1 {...rest} />;\n      case \"h2\":\n        return <h2 {...rest} />;\n      case \"h3\":\n        return <h3 {...rest} />;\n      case \"h4\":\n        return <h4 {...rest} />;\n      case \"h5\":\n        return <h5 {...rest} />;\n      case \"h6\":\n        return <h6 {...rest} />;\n      // Landmarks\n      case \"main\":\n        return <main {...rest} />;\n      case \"nav\":\n        return <nav {...rest} />;\n      case \"header\":\n        return <header {...rest} />;\n      case \"footer\":\n        return <footer {...rest} />;\n      case \"aside\":\n        return <aside {...rest} />;\n      case \"section\":\n        return <section {...rest} />;\n      case \"article\":\n        return <article {...rest} />;\n      case \"form\":\n        return <form {...rest} />;\n      case \"search\":\n        return <search {...rest} />;\n      default:\n        // A tag no component in this package emits. Kept on `<Dynamic>` rather\n        // than hand-built so hydration still adopts the SSR node; it inherits\n        // the post-hydration caveat above, which is why every tag the library\n        // itself renders is listed explicitly.\n        return <Dynamic component={local.tag} {...rest} />;\n    }\n  }) as unknown as JSX.Element;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO,CAAC,KAAK,CAAC;CAS/C,MAAM,SAAS,iBAAiB,MAAM,GAAG;CACzC,OAAO,iBAAiB;EACtB,QAAQ,OAAO,GAAf;GAEE,KAAK,QACH,OAAO,CAAC,SAAS;GACnB,KAAK,KACH,OAAO,CAAC,MAAM;GAChB,KAAK,KACH,OAAO,CAAC,MAAM;GAChB,KAAK,SACH,OAAO,CAAC,UAAU;GACpB,KAAK,UACH,OAAO,CAAC,WAAW;GACrB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,SACH,OAAO,CAAC,UAAU;GAEpB,KAAK,OACH,OAAO,CAAC,QAAQ;GAClB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,UACH,OAAO,CAAC,WAAW;GACrB,KAAK,cACH,OAAO,CAAC,eAAe;GACzB,KAAK,WACH,OAAO,CAAC,YAAY;GAEtB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GACjB,KAAK,MACH,OAAO,CAAC,OAAO;GAEjB,KAAK,QACH,OAAO,CAAC,SAAS;GACnB,KAAK,OACH,OAAO,CAAC,QAAQ;GAClB,KAAK,UACH,OAAO,CAAC,WAAW;GACrB,KAAK,UACH,OAAO,CAAC,WAAW;GACrB,KAAK,SACH,OAAO,CAAC,UAAU;GACpB,KAAK,WACH,OAAO,CAAC,YAAY;GACtB,KAAK,WACH,OAAO,CAAC,YAAY;GACtB,KAAK,QACH,OAAO,CAAC,SAAS;GACnB,KAAK,UACH,OAAO,CAAC,WAAW;GACrB,SAKE,OAAO,CAAC,QAAQ,WAAW,MAAM,SAAS;EAC9C;CACF,CAAC;AACH"}

package/dist/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAC/D,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,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,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,MAAM,WAAW,SACf,SACE,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,EACrF,SAAS;IACX,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACvE,mFAAmF;IACnF,YAAY,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC;IACvE,mEAAmE;IACnE,OAAO,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7D,qCAAqC;IACrC,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,eAAe,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AA+BjE,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA6ClD"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAC/D,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,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,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,MAAM,WAAW,SACf,SACE,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,EACrF,SAAS;IACX,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACvE,mFAAmF;IACnF,YAAY,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC;IACvE,mEAAmE;IACnE,OAAO,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7D,qCAAqC;IACrC,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,eAAe,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AA+BjE,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA8DlD"}

package/dist/Form.js

@@ -58,6 +58,7 @@ function Form(props) {
 		defaultClassName: "solidaria-Form"
 	}, () => ({ validationBehavior }));
 	const filteredDomProps = filterFormDOMProps(domProps);
+	const formContextValue = { validationBehavior };
 	return (() => {
 		var _el$ = getNextElement(_tmpl$);
 		use((el) => assignRef(local.ref, el), _el$);
@@ -74,12 +75,7 @@ function Form(props) {
 			}
 		}), false, true);
 		insert(_el$, createComponent(FormContext.Provider, {
-			get value() {
-				return {
-					...props,
-					validationBehavior
-				};
-			},
+			value: formContextValue,
 			get children() {
 				return createComponent(FormValidationContext.Provider, {
 					value: errors,

package/dist/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["JSX","createContext","splitProps","FormValidationContext","ValidationErrors","ValidationBehavior","ClassNameOrFunction","StyleOrFunction","RenderChildren","SlotProps","useRenderProps","filterDOMProps","RefLike","el","T","current","assignRef","ref","FormRenderProps","validationBehavior","FormProps","Omit","FormHTMLAttributes","HTMLFormElement","validationErrors","acceptCharset","autoCapitalize","HTMLAttributes","autoComplete","encType","children","class","style","FormContext","formDOMPropNames","Set","filterFormDOMProps","props","Record","filtered","global","key","Object","prototype","hasOwnProperty","call","has","Form","Element","local","domProps","errors","renderProps","defaultClassName","filteredDomProps","_el$","_$getNextElement","_tmpl$","_$use","_$spread","_$mergeProps","slot","_$insert","_$createComponent","Provider","value","renderChildren","_$runHydrationEvents"],"sources":["../src/Form.tsx"],"sourcesContent":["/**\n * Form primitive for solidaria-components.\n *\n * Provides form-level validation behavior and server validation context.\n * Port direction: react-aria-components/src/Form.tsx\n */\n\nimport { type JSX, createContext, splitProps } from \"solid-js\";\nimport {\n  FormValidationContext,\n  type ValidationErrors,\n  type ValidationBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface FormRenderProps {\n  validationBehavior: ValidationBehavior;\n}\n\nexport interface FormProps\n  extends\n    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, \"children\" | \"class\" | \"style\" | \"ref\">,\n    SlotProps {\n  /** Server-side validation errors keyed by field name. */\n  validationErrors?: ValidationErrors;\n  /** Validation behavior mode. */\n  validationBehavior?: ValidationBehavior;\n  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */\n  acceptCharset?: string;\n  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */\n  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>[\"autoCapitalize\"];\n  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */\n  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>[\"autocomplete\"];\n  /** Form encoding type. React-style alias for Solid's `enctype`. */\n  encType?: JSX.FormHTMLAttributes<HTMLFormElement>[\"enctype\"];\n  /** The children of the component. */\n  children?: RenderChildren<FormRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<FormRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<FormRenderProps>;\n  /** Ref for the underlying form element. */\n  ref?: RefLike<HTMLFormElement>;\n}\n\nexport const FormContext = createContext<FormProps | null>(null);\n\nconst formDOMPropNames = new Set([\n  \"accept-charset\",\n  \"acceptCharset\",\n  \"action\",\n  \"autocapitalize\",\n  \"autoCapitalize\",\n  \"autocomplete\",\n  \"autoComplete\",\n  \"encoding\",\n  \"enctype\",\n  \"encType\",\n  \"method\",\n  \"name\",\n  \"rel\",\n  \"target\",\n]);\n\nfunction filterFormDOMProps(props: object): Record<string, unknown> {\n  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });\n\n  for (const key in props) {\n    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {\n      filtered[key] = (props as Record<string, unknown>)[key];\n    }\n  }\n\n  return filtered;\n}\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"validationErrors\",\n    \"validationBehavior\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n  ]);\n\n  const validationBehavior: ValidationBehavior = local.validationBehavior ?? \"native\";\n  const errors = local.validationErrors ?? {};\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Form\",\n    },\n    () => ({\n      validationBehavior,\n    }),\n  );\n\n  const filteredDomProps = filterFormDOMProps(domProps);\n\n  return (\n    <form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      noValidate={validationBehavior !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext.Provider value={{ ...props, validationBehavior }}>\n        <FormValidationContext.Provider value={errors}>\n          {renderProps.renderChildren()}\n        </FormValidationContext.Provider>\n      </FormContext.Provider>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,SAASgB,UAAaC,KAAiBJ,IAAa;CAClD,IAAI,CAACI,KAAK;CACV,IAAI,OAAOA,QAAQ,YACjBA,IAAIJ,EAAE;MAENI,IAAIF,UAAUF;AAElB;AAgCA,MAAaoB,cAAchC,cAAgC,IAAI;AAE/D,MAAMiC,mBAAmB,IAAIC,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAAQ,CACT;AAED,SAASC,mBAAmBC,OAAwC;CAClE,MAAME,WAAW5B,eAAwC0B,OAAO,EAAEG,QAAQ,KAAK,CAAC;CAEhF,KAAK,MAAMC,OAAOJ,OAChB,IAAIK,OAAOC,UAAUC,eAAeC,KAAKR,OAAOI,GAAG,KAAKP,iBAAiBY,IAAIL,GAAG,GAC9EF,SAASE,OAAQJ,MAAkCI;CAIvD,OAAOF;AACT;AAEA,SAAgBQ,KAAKV,OAA+B;CAClD,MAAM,CAACY,OAAOC,YAAYhD,WAAWmC,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;CAAM,CACP;CAED,MAAMlB,qBAAyC8B,MAAM9B,sBAAsB;CAC3E,MAAMgC,SAASF,MAAMzB,oBAAoB,CAAC;CAC1C,MAAM4B,cAAc1C,eAClB;EACE,IAAIoB,WAAW;GACb,OAAOmB,MAAMnB;EACf;EACAC,OAAOkB,MAAMlB;EACbC,OAAOiB,MAAMjB;EACbqB,kBAAkB;CACpB,UACO,EACLlC,mBACF,EACF;CAEA,MAAMmC,mBAAmBlB,mBAAmBc,QAAQ;CAEpD,cAAA;EAAA,IAAAK,OAAAC,eAAAC,MAAA;EAAAC,KAGU7C,OAAOG,UAAUiC,MAAMhC,KAAKJ,EAAE,GAAC0C,IAAA;EAAAI,OAAAJ,MAAAK,WADjCN,kBAAgB;GAAA,cAERnC,uBAAuB;GAAQ,KAAA,WAAA;IAAA,OACpCiC,YAAYrB,MAAM;GAAC;GAAA,IAC1BC,QAAK;IAAA,OAAEoB,YAAYpB,MAAM;GAAC;GAAA,IAC1B6B,OAAI;IAAA,OAAEZ,MAAMY;GAAI;EAAA,CAAA,GAAA,OAAA,IAAA;EAAAC,OAAAP,MAAAQ,gBAEf9B,YAAY+B,UAAQ;GAAA,IAACC,QAAK;IAAA,OAAE;KAAE,GAAG5B;KAAOlB;IAAmB;GAAC;GAAA,IAAAW,WAAA;IAAA,OAAAiC,gBAC1D5D,sBAAsB6D,UAAQ;KAACC,OAAOd;KAAM,IAAArB,WAAA;MAAA,OAC1CsB,YAAYc,eAAe;KAAC;IAAA,CAAA;GAAA;EAAA,CAAA,CAAA;EAAAC,mBAAA;EAAA,OAAAZ;CAAA,EAAA,CAAA;AAKvC"}
+{"version":3,"file":"Form.js","names":["JSX","createContext","splitProps","FormValidationContext","ValidationErrors","ValidationBehavior","ClassNameOrFunction","StyleOrFunction","RenderChildren","SlotProps","useRenderProps","filterDOMProps","RefLike","el","T","current","assignRef","ref","FormRenderProps","validationBehavior","FormProps","Omit","FormHTMLAttributes","HTMLFormElement","validationErrors","acceptCharset","autoCapitalize","HTMLAttributes","autoComplete","encType","children","class","style","FormContext","formDOMPropNames","Set","filterFormDOMProps","props","Record","filtered","global","key","Object","prototype","hasOwnProperty","call","has","Form","Element","local","domProps","errors","renderProps","defaultClassName","filteredDomProps","formContextValue","_el$","_$getNextElement","_tmpl$","_$use","_$spread","_$mergeProps","slot","_$insert","_$createComponent","Provider","value","renderChildren","_$runHydrationEvents"],"sources":["../src/Form.tsx"],"sourcesContent":["/**\n * Form primitive for solidaria-components.\n *\n * Provides form-level validation behavior and server validation context.\n * Port direction: react-aria-components/src/Form.tsx\n */\n\nimport { type JSX, createContext, splitProps } from \"solid-js\";\nimport {\n  FormValidationContext,\n  type ValidationErrors,\n  type ValidationBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface FormRenderProps {\n  validationBehavior: ValidationBehavior;\n}\n\nexport interface FormProps\n  extends\n    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, \"children\" | \"class\" | \"style\" | \"ref\">,\n    SlotProps {\n  /** Server-side validation errors keyed by field name. */\n  validationErrors?: ValidationErrors;\n  /** Validation behavior mode. */\n  validationBehavior?: ValidationBehavior;\n  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */\n  acceptCharset?: string;\n  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */\n  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>[\"autoCapitalize\"];\n  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */\n  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>[\"autocomplete\"];\n  /** Form encoding type. React-style alias for Solid's `enctype`. */\n  encType?: JSX.FormHTMLAttributes<HTMLFormElement>[\"enctype\"];\n  /** The children of the component. */\n  children?: RenderChildren<FormRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<FormRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<FormRenderProps>;\n  /** Ref for the underlying form element. */\n  ref?: RefLike<HTMLFormElement>;\n}\n\nexport const FormContext = createContext<FormProps | null>(null);\n\nconst formDOMPropNames = new Set([\n  \"accept-charset\",\n  \"acceptCharset\",\n  \"action\",\n  \"autocapitalize\",\n  \"autoCapitalize\",\n  \"autocomplete\",\n  \"autoComplete\",\n  \"encoding\",\n  \"enctype\",\n  \"encType\",\n  \"method\",\n  \"name\",\n  \"rel\",\n  \"target\",\n]);\n\nfunction filterFormDOMProps(props: object): Record<string, unknown> {\n  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });\n\n  for (const key in props) {\n    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {\n      filtered[key] = (props as Record<string, unknown>)[key];\n    }\n  }\n\n  return filtered;\n}\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"validationErrors\",\n    \"validationBehavior\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n  ]);\n\n  const validationBehavior: ValidationBehavior = local.validationBehavior ?? \"native\";\n  const errors = local.validationErrors ?? {};\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Form\",\n    },\n    () => ({\n      validationBehavior,\n    }),\n  );\n\n  const filteredDomProps = filterFormDOMProps(domProps);\n\n  // FormContext is only consumed for `validationBehavior` (TextField, Checkbox,\n  // DateField, …). Never spread `props` into the context value: in Solid,\n  // `props.children` is a getter that *creates* the child tree when read. Eager\n  // `{...props}` therefore builds every child once for the discarded context\n  // object and again for `renderChildren()`, double-advancing createUniqueId\n  // and desyncing SSR hydration keys. RAC can spread props because React\n  // elements are already-built descriptors; Solid cannot.\n  //\n  // Surface symptom (effect-latam /perfil, /foros): Form+sole Spectrum Button\n  // → \"Hydration Mismatch\" / \"template is not a function\" and a blank route.\n  // Form+TextField (multiple children) often still hydrates because array/\n  // fragment child paths mask the slot drift — the double-create is still\n  // wrong either way.\n  const formContextValue: FormProps = {\n    validationBehavior,\n  };\n\n  return (\n    <form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      noValidate={validationBehavior !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext.Provider value={formContextValue}>\n        <FormValidationContext.Provider value={errors}>\n          {renderProps.renderChildren()}\n        </FormValidationContext.Provider>\n      </FormContext.Provider>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,SAASgB,UAAaC,KAAiBJ,IAAa;CAClD,IAAI,CAACI,KAAK;CACV,IAAI,OAAOA,QAAQ,YACjBA,IAAIJ,EAAE;MAENI,IAAIF,UAAUF;AAElB;AAgCA,MAAaoB,cAAchC,cAAgC,IAAI;AAE/D,MAAMiC,mBAAmB,IAAIC,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAAQ,CACT;AAED,SAASC,mBAAmBC,OAAwC;CAClE,MAAME,WAAW5B,eAAwC0B,OAAO,EAAEG,QAAQ,KAAK,CAAC;CAEhF,KAAK,MAAMC,OAAOJ,OAChB,IAAIK,OAAOC,UAAUC,eAAeC,KAAKR,OAAOI,GAAG,KAAKP,iBAAiBY,IAAIL,GAAG,GAC9EF,SAASE,OAAQJ,MAAkCI;CAIvD,OAAOF;AACT;AAEA,SAAgBQ,KAAKV,OAA+B;CAClD,MAAM,CAACY,OAAOC,YAAYhD,WAAWmC,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;CAAM,CACP;CAED,MAAMlB,qBAAyC8B,MAAM9B,sBAAsB;CAC3E,MAAMgC,SAASF,MAAMzB,oBAAoB,CAAC;CAC1C,MAAM4B,cAAc1C,eAClB;EACE,IAAIoB,WAAW;GACb,OAAOmB,MAAMnB;EACf;EACAC,OAAOkB,MAAMlB;EACbC,OAAOiB,MAAMjB;EACbqB,kBAAkB;CACpB,UACO,EACLlC,mBACF,EACF;CAEA,MAAMmC,mBAAmBlB,mBAAmBc,QAAQ;CAepD,MAAMK,mBAA8B,EAClCpC,mBACF;CAEA,cAAA;EAAA,IAAAqC,OAAAC,eAAAC,MAAA;EAAAC,KAGU9C,OAAOG,UAAUiC,MAAMhC,KAAKJ,EAAE,GAAC2C,IAAA;EAAAI,OAAAJ,MAAAK,WADjCP,kBAAgB;GAAA,cAERnC,uBAAuB;GAAQ,KAAA,WAAA;IAAA,OACpCiC,YAAYrB,MAAM;GAAC;GAAA,IAC1BC,QAAK;IAAA,OAAEoB,YAAYpB,MAAM;GAAC;GAAA,IAC1B8B,OAAI;IAAA,OAAEb,MAAMa;GAAI;EAAA,CAAA,GAAA,OAAA,IAAA;EAAAC,OAAAP,MAAAQ,gBAEf/B,YAAYgC,UAAQ;GAACC,OAAOX;GAAgB,IAAAzB,WAAA;IAAA,OAAAkC,gBAC1C7D,sBAAsB8D,UAAQ;KAACC,OAAOf;KAAM,IAAArB,WAAA;MAAA,OAC1CsB,YAAYe,eAAe;KAAC;IAAA,CAAA;GAAA;EAAA,CAAA,CAAA;EAAAC,mBAAA;EAAA,OAAAZ;CAAA,EAAA,CAAA;AAKvC"}

package/dist/Form.jsx

@@ -56,11 +56,9 @@ function Form(props) {
 		defaultClassName: "solidaria-Form"
 	}, () => ({ validationBehavior }));
 	const filteredDomProps = filterFormDOMProps(domProps);
+	const formContextValue = { validationBehavior };
 	return <form {...filteredDomProps} ref={(el) => assignRef(local.ref, el)} noValidate={validationBehavior !== "native"} class={renderProps.class()} style={renderProps.style()} slot={local.slot}>
-      <FormContext.Provider value={{
-		...props,
-		validationBehavior
-	}}>
+      <FormContext.Provider value={formContextValue}>
         <FormValidationContext.Provider value={errors}>
           {renderProps.renderChildren()}
         </FormValidationContext.Provider>

package/dist/Form.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Form.jsx","names":[],"sources":["../src/Form.tsx"],"sourcesContent":["/**\n * Form primitive for solidaria-components.\n *\n * Provides form-level validation behavior and server validation context.\n * Port direction: react-aria-components/src/Form.tsx\n */\n\nimport { type JSX, createContext, splitProps } from \"solid-js\";\nimport {\n  FormValidationContext,\n  type ValidationErrors,\n  type ValidationBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface FormRenderProps {\n  validationBehavior: ValidationBehavior;\n}\n\nexport interface FormProps\n  extends\n    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, \"children\" | \"class\" | \"style\" | \"ref\">,\n    SlotProps {\n  /** Server-side validation errors keyed by field name. */\n  validationErrors?: ValidationErrors;\n  /** Validation behavior mode. */\n  validationBehavior?: ValidationBehavior;\n  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */\n  acceptCharset?: string;\n  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */\n  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>[\"autoCapitalize\"];\n  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */\n  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>[\"autocomplete\"];\n  /** Form encoding type. React-style alias for Solid's `enctype`. */\n  encType?: JSX.FormHTMLAttributes<HTMLFormElement>[\"enctype\"];\n  /** The children of the component. */\n  children?: RenderChildren<FormRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<FormRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<FormRenderProps>;\n  /** Ref for the underlying form element. */\n  ref?: RefLike<HTMLFormElement>;\n}\n\nexport const FormContext = createContext<FormProps | null>(null);\n\nconst formDOMPropNames = new Set([\n  \"accept-charset\",\n  \"acceptCharset\",\n  \"action\",\n  \"autocapitalize\",\n  \"autoCapitalize\",\n  \"autocomplete\",\n  \"autoComplete\",\n  \"encoding\",\n  \"enctype\",\n  \"encType\",\n  \"method\",\n  \"name\",\n  \"rel\",\n  \"target\",\n]);\n\nfunction filterFormDOMProps(props: object): Record<string, unknown> {\n  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });\n\n  for (const key in props) {\n    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {\n      filtered[key] = (props as Record<string, unknown>)[key];\n    }\n  }\n\n  return filtered;\n}\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"validationErrors\",\n    \"validationBehavior\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n  ]);\n\n  const validationBehavior: ValidationBehavior = local.validationBehavior ?? \"native\";\n  const errors = local.validationErrors ?? {};\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Form\",\n    },\n    () => ({\n      validationBehavior,\n    }),\n  );\n\n  const filteredDomProps = filterFormDOMProps(domProps);\n\n  return (\n    <form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      noValidate={validationBehavior !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext.Provider value={{ ...props, validationBehavior }}>\n        <FormValidationContext.Provider value={errors}>\n          {renderProps.renderChildren()}\n        </FormValidationContext.Provider>\n      </FormContext.Provider>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;AAwBA,SAAS,UAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAgCA,MAAa,cAAc,cAAgC,IAAI;AAE/D,MAAM,mBAAmB,IAAI,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAS,mBAAmB,OAAwC;CAClE,MAAM,WAAW,eAAwC,OAAO,EAAE,QAAQ,KAAK,CAAC;CAEhF,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU,eAAe,KAAK,OAAO,GAAG,KAAK,iBAAiB,IAAI,GAAG,GAC9E,SAAS,OAAQ,MAAkC;CAIvD,OAAO;AACT;AAEA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAyC,MAAM,sBAAsB;CAC3E,MAAM,SAAS,MAAM,oBAAoB,CAAC;CAC1C,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO,EACL,mBACF,EACF;CAEA,MAAM,mBAAmB,mBAAmB,QAAQ;CAEpD,OACE,CAAC,SACK,kBACJ,MAAM,OAAO,UAAU,MAAM,KAAK,EAAE,GACpC,YAAY,uBAAuB,UACnC,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACb;MACC,CAAC,YAAY,SAAS,OAAO;EAAE,GAAG;EAAO;CAAmB,GAAG;QAC7D,CAAC,sBAAsB,SAAS,OAAO,QAAQ;WAC5C,YAAY,eAAe,EAAE;QAChC,EAAE,sBAAsB,SAAS;MACnC,EAAE,YAAY,SAAS;IACzB,EAAE;AAEN"}
+{"version":3,"file":"Form.jsx","names":[],"sources":["../src/Form.tsx"],"sourcesContent":["/**\n * Form primitive for solidaria-components.\n *\n * Provides form-level validation behavior and server validation context.\n * Port direction: react-aria-components/src/Form.tsx\n */\n\nimport { type JSX, createContext, splitProps } from \"solid-js\";\nimport {\n  FormValidationContext,\n  type ValidationErrors,\n  type ValidationBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface FormRenderProps {\n  validationBehavior: ValidationBehavior;\n}\n\nexport interface FormProps\n  extends\n    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, \"children\" | \"class\" | \"style\" | \"ref\">,\n    SlotProps {\n  /** Server-side validation errors keyed by field name. */\n  validationErrors?: ValidationErrors;\n  /** Validation behavior mode. */\n  validationBehavior?: ValidationBehavior;\n  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */\n  acceptCharset?: string;\n  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */\n  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>[\"autoCapitalize\"];\n  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */\n  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>[\"autocomplete\"];\n  /** Form encoding type. React-style alias for Solid's `enctype`. */\n  encType?: JSX.FormHTMLAttributes<HTMLFormElement>[\"enctype\"];\n  /** The children of the component. */\n  children?: RenderChildren<FormRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<FormRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<FormRenderProps>;\n  /** Ref for the underlying form element. */\n  ref?: RefLike<HTMLFormElement>;\n}\n\nexport const FormContext = createContext<FormProps | null>(null);\n\nconst formDOMPropNames = new Set([\n  \"accept-charset\",\n  \"acceptCharset\",\n  \"action\",\n  \"autocapitalize\",\n  \"autoCapitalize\",\n  \"autocomplete\",\n  \"autoComplete\",\n  \"encoding\",\n  \"enctype\",\n  \"encType\",\n  \"method\",\n  \"name\",\n  \"rel\",\n  \"target\",\n]);\n\nfunction filterFormDOMProps(props: object): Record<string, unknown> {\n  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });\n\n  for (const key in props) {\n    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {\n      filtered[key] = (props as Record<string, unknown>)[key];\n    }\n  }\n\n  return filtered;\n}\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"validationErrors\",\n    \"validationBehavior\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n  ]);\n\n  const validationBehavior: ValidationBehavior = local.validationBehavior ?? \"native\";\n  const errors = local.validationErrors ?? {};\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Form\",\n    },\n    () => ({\n      validationBehavior,\n    }),\n  );\n\n  const filteredDomProps = filterFormDOMProps(domProps);\n\n  // FormContext is only consumed for `validationBehavior` (TextField, Checkbox,\n  // DateField, …). Never spread `props` into the context value: in Solid,\n  // `props.children` is a getter that *creates* the child tree when read. Eager\n  // `{...props}` therefore builds every child once for the discarded context\n  // object and again for `renderChildren()`, double-advancing createUniqueId\n  // and desyncing SSR hydration keys. RAC can spread props because React\n  // elements are already-built descriptors; Solid cannot.\n  //\n  // Surface symptom (effect-latam /perfil, /foros): Form+sole Spectrum Button\n  // → \"Hydration Mismatch\" / \"template is not a function\" and a blank route.\n  // Form+TextField (multiple children) often still hydrates because array/\n  // fragment child paths mask the slot drift — the double-create is still\n  // wrong either way.\n  const formContextValue: FormProps = {\n    validationBehavior,\n  };\n\n  return (\n    <form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      noValidate={validationBehavior !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext.Provider value={formContextValue}>\n        <FormValidationContext.Provider value={errors}>\n          {renderProps.renderChildren()}\n        </FormValidationContext.Provider>\n      </FormContext.Provider>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;AAwBA,SAAS,UAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAgCA,MAAa,cAAc,cAAgC,IAAI;AAE/D,MAAM,mBAAmB,IAAI,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAS,mBAAmB,OAAwC;CAClE,MAAM,WAAW,eAAwC,OAAO,EAAE,QAAQ,KAAK,CAAC;CAEhF,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU,eAAe,KAAK,OAAO,GAAG,KAAK,iBAAiB,IAAI,GAAG,GAC9E,SAAS,OAAQ,MAAkC;CAIvD,OAAO;AACT;AAEA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAyC,MAAM,sBAAsB;CAC3E,MAAM,SAAS,MAAM,oBAAoB,CAAC;CAC1C,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO,EACL,mBACF,EACF;CAEA,MAAM,mBAAmB,mBAAmB,QAAQ;CAepD,MAAM,mBAA8B,EAClC,mBACF;CAEA,OACE,CAAC,SACK,kBACJ,MAAM,OAAO,UAAU,MAAM,KAAK,EAAE,GACpC,YAAY,uBAAuB,UACnC,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACb;MACC,CAAC,YAAY,SAAS,OAAO,kBAAkB;QAC7C,CAAC,sBAAsB,SAAS,OAAO,QAAQ;WAC5C,YAAY,eAAe,EAAE;QAChC,EAAE,sBAAsB,SAAS;MACnC,EAAE,YAAY,SAAS;IACzB,EAAE;AAEN"}

package/dist/Landmark.js

@@ -1,5 +1,6 @@
 import { filterDOMProps } from "./utils.js";
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { ElementTag } from "./ElementTag.js";
+import { 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
@@ -94,8 +95,8 @@ function Landmark(props) {
 		return style;
 	});
 	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
-	return createComponent(Dynamic, mergeProps({
-		get component() {
+	return createComponent(ElementTag, mergeProps({
+		get tag() {
 			return elementType();
 		},
 		ref: setRef

package/dist/Landmark.js.map

@@ -1 +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"}
+{"version":3,"file":"Landmark.js","names":["JSX","createContext","createMemo","createSignal","splitProps","ElementTag","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","tag","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 { ElementTag } from \"./ElementTag\";\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    <ElementTag\n      tag={elementType()}\n      ref={setRef}\n      {...domProps()}\n      {...landmarkAria.landmarkProps}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    >\n      {props.children}\n    </ElementTag>\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,YAAUkD,WAAA;EAAA,IACTC,MAAG;GAAA,OAAExC,YAAY;EAAC;EAAAwB,KACbC;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

@@ -1,6 +1,6 @@
 import { filterDOMProps } from "./utils.jsx";
+import { ElementTag } from "./ElementTag.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
 /**
@@ -94,9 +94,9 @@ function Landmark(props) {
 		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}>
+	return <ElementTag tag={elementType()} ref={setRef} {...domProps()} {...landmarkAria.landmarkProps} class={resolvedClass()} style={resolvedStyle()} slot={local.slot}>
       {props.children}
-    </Dynamic>;
+    </ElementTag>;
 }
 /**
 * Returns a controller for programmatic landmark navigation.

package/dist/Landmark.jsx.map

@@ -1 +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"}
+{"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 { ElementTag } from \"./ElementTag\";\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    <ElementTag\n      tag={elementType()}\n      ref={setRef}\n      {...domProps()}\n      {...landmarkAria.landmarkProps}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    >\n      {props.children}\n    </ElementTag>\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,WACC,KAAK,YAAY,GACjB,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.js

@@ -1,6 +1,7 @@
 import { filterDOMProps, useRenderProps } from "./utils.js";
+import { ElementTag } from "./ElementTag.js";
 import { handleLinkClick, useRouter } from "./RouterProvider.js";
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "solid-js/web";
 import { createContext, createMemo, splitProps } from "solid-js";
 import { createFocusRing, createHover, createLink } from "@proyecto-viviana/solidaria";
 //#region src/Link.tsx
@@ -177,7 +178,7 @@ function Link(props) {
 		onClick?.(event);
 		handleLinkClick(event, router, ariaProps.href, ariaProps.routerOptions);
 	};
-	return createComponent(Dynamic, mergeProps({ get component() {
+	return createComponent(ElementTag, mergeProps({ get tag() {
 		return elementType();
 	} }, domProps, cleanLinkProps, cleanHoverProps, cleanFocusProps, {
 		ref: (element) => {