@k2b/ui 0.51.0 → 0.52.0

package/dist/browser/inputs/markdown/MarkdownSelectionToolbar.js

@@ -0,0 +1,330 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div style=display:contents><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`);
+import { i18n } from "@k2b/stdlib";
+import { batch, createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { SelectionToolbar } from "../../actions/SelectionToolbar";
+import { Toolbar } from "../../actions/Toolbar";
+import { useLocale } from "../../intl/locale";
+import { insertLink, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleNumberedList, toggleQuote } from "./actions";
+import { computeActiveFormats } from "./active-formats";
+const selectionMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      bold: "Bold",
+      italic: "Italic",
+      inlineCode: "Inline code",
+      link: "Link",
+      bulletList: "Bullet list",
+      numberedList: "Numbered list",
+      quote: "Quote",
+      selectionFormatting: "Format selection"
+    },
+    de: {
+      bold: "Fett",
+      italic: "Kursiv",
+      inlineCode: "Inline-Code",
+      link: "Link",
+      bulletList: "Aufzählung",
+      numberedList: "Nummerierte Liste",
+      quote: "Zitat",
+      selectionFormatting: "Auswahl formatieren"
+    }
+  }
+});
+export const checkSelectionMessages = () => selectionMessages.check();
+
+/**
+ * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is
+ * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.
+ */
+export const textRangeBox = (layer, surface, start, end) => {
+  const walker = document.createTreeWalker(layer, 4 /* NodeFilter.SHOW_TEXT */);
+  let offset = 0;
+  let from;
+  let to;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const length = node.textContent?.length ?? 0;
+    if (!from && start <= offset + length) from = [node, start - offset];
+    if (end <= offset + length) {
+      to = [node, end - offset];
+      break;
+    }
+    offset += length;
+  }
+  if (!from || !to) return null;
+  const range = document.createRange();
+  range.setStart(...from);
+  range.setEnd(...to);
+  const rects = Array.from(range.getClientRects()).filter(rect => rect.width > 0 || rect.height > 0);
+  const first = rects[0];
+  if (!first) return null;
+  const line = rects.filter(rect => Math.abs(rect.top - first.top) < 4);
+  const multiline = line.length < rects.length;
+  const right = multiline ? layer.getBoundingClientRect().right : Math.max(...line.map(rect => rect.right));
+  const visible = surface.getBoundingClientRect();
+  if (first.bottom <= visible.top || first.top >= visible.bottom) return null;
+  return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.height);
+};
+/**
+ * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and
+ * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go
+ * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch
+ * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It
+ * listens to the textarea itself, so editors without it carry none of its code.
+ */
+export function MarkdownSelectionToolbar(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.textarea;
+    },
+    children: textarea => _$createComponent(SelectionFormatting, {
+      get textarea() {
+        return textarea();
+      }
+    })
+  });
+}
+function SelectionFormatting(props) {
+  const locale = useLocale();
+  const messages = () => selectionMessages.resolve([locale()]).t;
+  const textarea = props.textarea;
+  // The editor's surface and its presentation layer: the same text as the textarea, laid out the same way.
+  const surface = textarea.parentElement ?? textarea;
+  const layer = surface.querySelector(".k2b-markdown-editor__preview") ?? surface;
+  const [revision, setRevision] = createSignal(0);
+  const bump = () => setRevision(value => value + 1);
+  const [finePointer, setFinePointer] = createSignal(false);
+  const [dragging, setDragging] = createSignal(false);
+  const [textFocused, setTextFocused] = createSignal(document.activeElement === textarea);
+  const [toolbarFocused, setToolbarFocused] = createSignal(false);
+  const [dismissed, setDismissed] = createSignal();
+  let root;
+  const selectionKey = () => `${textarea.selectionStart}:${textarea.selectionEnd}`;
+  const anchor = () => {
+    revision();
+    if (textarea.disabled || !finePointer() || dragging() || !(textFocused() || toolbarFocused())) return null;
+    if (textarea.selectionStart === textarea.selectionEnd || dismissed() === selectionKey()) return null;
+    return textRangeBox(layer, surface, textarea.selectionStart, textarea.selectionEnd);
+  };
+
+  // Escape closes the toolbar for that one selection: a collapsed selection forgets it, so selecting the same words
+  // again shows it again.
+  createEffect(() => {
+    revision();
+    if (textarea.selectionStart === textarea.selectionEnd) setDismissed(undefined);
+  });
+  onMount(() => {
+    const query = window.matchMedia("(pointer: coarse)");
+    const update = () => setFinePointer(!query.matches);
+    update();
+    const press = () => {
+      setDismissed(undefined);
+      setDragging(true);
+      const release = () => {
+        setDragging(false);
+        document.removeEventListener("pointerup", release, true);
+        document.removeEventListener("pointercancel", release, true);
+      };
+      document.addEventListener("pointerup", release, true);
+      document.addEventListener("pointercancel", release, true);
+    };
+    const key = event => {
+      if (event.key === "Escape") {
+        if (event.defaultPrevented || !anchor()) return;
+        event.preventDefault();
+        setDismissed(selectionKey());
+        return;
+      }
+      // Selection changes can arrive as one event, so the next key that may select again forgets Escape too.
+      if (!["Shift", "Control", "Meta", "Alt"].includes(event.key)) setDismissed(undefined);
+    };
+    const focus = () => setTextFocused(true);
+    const blur = event => batch(() => {
+      // Tab into the toolbar keeps it open: the toolbar takes the focus in the same move.
+      if (event.relatedTarget instanceof Node && root?.contains(event.relatedTarget)) setToolbarFocused(true);
+      setTextFocused(false);
+    });
+    const selection = () => {
+      if (document.activeElement === textarea) bump();
+    };
+    // The presentation layer renders a frame after an edit; the toolbar measures again once it did.
+    const layerElement = layer;
+    const layerObserver = new MutationObserver(bump);
+    layerObserver.observe(layerElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    query.addEventListener("change", update);
+    textarea.addEventListener("pointerdown", press);
+    textarea.addEventListener("keydown", key);
+    textarea.addEventListener("focus", focus);
+    textarea.addEventListener("blur", blur);
+    textarea.addEventListener("input", bump);
+    // The toolbar hides while its line is scrolled away and shows again when it returns.
+    textarea.addEventListener("scroll", bump);
+    document.addEventListener("selectionchange", selection);
+    onCleanup(() => {
+      layerObserver.disconnect();
+      query.removeEventListener("change", update);
+      textarea.removeEventListener("pointerdown", press);
+      textarea.removeEventListener("keydown", key);
+      textarea.removeEventListener("focus", focus);
+      textarea.removeEventListener("blur", blur);
+      textarea.removeEventListener("input", bump);
+      textarea.removeEventListener("scroll", bump);
+      document.removeEventListener("selectionchange", selection);
+    });
+  });
+  const run = format => () => format(textarea);
+  const formats = createMemo(() => {
+    revision();
+    return computeActiveFormats(textarea);
+  });
+  const pressed = format => formats().has(format);
+
+  // Touch devices keep their own selection menu: the toolbar is not rendered there at all, so nothing of it mounts
+  // or animates.
+  return _$createComponent(Show, {
+    get when() {
+      return finePointer();
+    },
+    get children() {
+      return _$createComponent(SelectionToolbar, {
+        get label() {
+          return messages().selectionFormatting;
+        },
+        anchor: anchor,
+        onEscape: () => {
+          setDismissed(selectionKey());
+          textarea.focus();
+        },
+        get children() {
+          var _el$ = _$getNextElement(_tmpl$),
+            _el$2 = _el$.firstChild,
+            [_el$3, _co$] = _$getNextMarker(_el$2.nextSibling),
+            _el$4 = _el$3.nextSibling,
+            [_el$5, _co$2] = _$getNextMarker(_el$4.nextSibling),
+            _el$6 = _el$5.nextSibling,
+            [_el$7, _co$3] = _$getNextMarker(_el$6.nextSibling),
+            _el$8 = _el$7.nextSibling,
+            [_el$9, _co$4] = _$getNextMarker(_el$8.nextSibling),
+            _el$0 = _el$9.nextSibling,
+            [_el$1, _co$5] = _$getNextMarker(_el$0.nextSibling),
+            _el$10 = _el$1.nextSibling,
+            [_el$11, _co$6] = _$getNextMarker(_el$10.nextSibling),
+            _el$12 = _el$11.nextSibling,
+            [_el$13, _co$7] = _$getNextMarker(_el$12.nextSibling),
+            _el$14 = _el$13.nextSibling,
+            [_el$15, _co$8] = _$getNextMarker(_el$14.nextSibling);
+          _el$.$$focusout = event => {
+            if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) setToolbarFocused(false);
+          };
+          _el$.$$focusin = () => setToolbarFocused(true);
+          var _ref$ = root;
+          typeof _ref$ === "function" ? _$use(_ref$, _el$) : root = _el$;
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().bold;
+            },
+            icon: "ti ti-bold",
+            get pressed() {
+              return pressed("bold");
+            },
+            keys: "mod+b",
+            get onClick() {
+              return run(toggleBold);
+            }
+          }), _el$3, _co$);
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().italic;
+            },
+            icon: "ti ti-italic",
+            get pressed() {
+              return pressed("italic");
+            },
+            keys: "mod+i",
+            get onClick() {
+              return run(toggleItalic);
+            }
+          }), _el$5, _co$2);
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().inlineCode;
+            },
+            icon: "ti ti-code",
+            get pressed() {
+              return pressed("code");
+            },
+            keys: "mod+e",
+            get onClick() {
+              return run(toggleCode);
+            }
+          }), _el$7, _co$3);
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().link;
+            },
+            icon: "ti ti-link",
+            keys: "mod+k",
+            get onClick() {
+              return run(insertLink);
+            }
+          }), _el$9, _co$4);
+          _$insert(_el$, _$createComponent(Toolbar.Separator, {}), _el$1, _co$5);
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().bulletList;
+            },
+            icon: "ti ti-list",
+            get pressed() {
+              return pressed("bullet");
+            },
+            keys: "mod+shift+8",
+            get onClick() {
+              return run(toggleBulletList);
+            }
+          }), _el$11, _co$6);
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().numberedList;
+            },
+            icon: "ti ti-list-numbers",
+            get pressed() {
+              return pressed("ordered");
+            },
+            keys: "mod+shift+7",
+            get onClick() {
+              return run(toggleNumberedList);
+            }
+          }), _el$13, _co$7);
+          _$insert(_el$, _$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().quote;
+            },
+            icon: "ti ti-quote",
+            get pressed() {
+              return pressed("quote");
+            },
+            get onClick() {
+              return run(toggleQuote);
+            }
+          }), _el$15, _co$8);
+          _$runHydrationEvents();
+          return _el$;
+        }
+      });
+    }
+  });
+}
+_$delegateEvents(["focusin", "focusout"]);
+//# sourceMappingURL=MarkdownSelectionToolbar.js.map

package/dist/browser/inputs/markdown/MarkdownSelectionToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/markdown/MarkdownSelectionToolbar.tsx"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { batch, createEffect, createMemo, createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { SelectionToolbar } from \"../../actions/SelectionToolbar\";\nimport { Toolbar } from \"../../actions/Toolbar\";\nimport { useLocale } from \"../../intl/locale\";\nimport { insertLink, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleNumberedList, toggleQuote } from \"./actions\";\nimport { computeActiveFormats } from \"./active-formats\";\n\nconst selectionMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      bold: \"Bold\",\n      italic: \"Italic\",\n      inlineCode: \"Inline code\",\n      link: \"Link\",\n      bulletList: \"Bullet list\",\n      numberedList: \"Numbered list\",\n      quote: \"Quote\",\n      selectionFormatting: \"Format selection\",\n    },\n    de: {\n      bold: \"Fett\",\n      italic: \"Kursiv\",\n      inlineCode: \"Inline-Code\",\n      link: \"Link\",\n      bulletList: \"Aufzählung\",\n      numberedList: \"Nummerierte Liste\",\n      quote: \"Zitat\",\n      selectionFormatting: \"Auswahl formatieren\",\n    },\n  },\n});\n\nexport const checkSelectionMessages = () => selectionMessages.check();\n\n/**\n * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is\n * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.\n */\nexport const textRangeBox = (layer: HTMLElement, surface: HTMLElement, start: number, end: number): DOMRect | null => {\n  const walker = document.createTreeWalker(layer, 4 /* NodeFilter.SHOW_TEXT */);\n  let offset = 0;\n  let from: [Node, number] | undefined;\n  let to: [Node, number] | undefined;\n  for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n    const length = node.textContent?.length ?? 0;\n    if (!from && start <= offset + length) from = [node, start - offset];\n    if (end <= offset + length) {\n      to = [node, end - offset];\n      break;\n    }\n    offset += length;\n  }\n  if (!from || !to) return null;\n  const range = document.createRange();\n  range.setStart(...from);\n  range.setEnd(...to);\n  const rects = Array.from(range.getClientRects()).filter((rect) => rect.width > 0 || rect.height > 0);\n  const first = rects[0];\n  if (!first) return null;\n  const line = rects.filter((rect) => Math.abs(rect.top - first.top) < 4);\n  const multiline = line.length < rects.length;\n  const right = multiline ? layer.getBoundingClientRect().right : Math.max(...line.map((rect) => rect.right));\n  const visible = surface.getBoundingClientRect();\n  if (first.bottom <= visible.top || first.top >= visible.bottom) return null;\n  return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.height);\n};\n\nexport type MarkdownSelectionToolbarProps = {\n  /** The editor's textarea, from `MarkdownEditor`'s `textareaRef`. The toolbar attaches once it is there. */\n  textarea: HTMLTextAreaElement | undefined;\n};\n\n/**\n * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and\n * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go\n * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch\n * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It\n * listens to the textarea itself, so editors without it carry none of its code.\n */\nexport function MarkdownSelectionToolbar(props: MarkdownSelectionToolbarProps): JSX.Element {\n  return <Show when={props.textarea}>{(textarea) => <SelectionFormatting textarea={textarea()} />}</Show>;\n}\n\nfunction SelectionFormatting(props: { textarea: HTMLTextAreaElement }): JSX.Element {\n  const locale = useLocale();\n  const messages = () => selectionMessages.resolve([locale()]).t;\n  const textarea = props.textarea;\n  // The editor's surface and its presentation layer: the same text as the textarea, laid out the same way.\n  const surface = textarea.parentElement ?? textarea;\n  const layer = surface.querySelector<HTMLElement>(\".k2b-markdown-editor__preview\") ?? surface;\n  const [revision, setRevision] = createSignal(0);\n  const bump = () => setRevision((value) => value + 1);\n  const [finePointer, setFinePointer] = createSignal(false);\n  const [dragging, setDragging] = createSignal(false);\n  const [textFocused, setTextFocused] = createSignal(document.activeElement === textarea);\n  const [toolbarFocused, setToolbarFocused] = createSignal(false);\n  const [dismissed, setDismissed] = createSignal<string>();\n  let root: HTMLDivElement | undefined;\n\n  const selectionKey = () => `${textarea.selectionStart}:${textarea.selectionEnd}`;\n  const anchor = () => {\n    revision();\n    if (textarea.disabled || !finePointer() || dragging() || !(textFocused() || toolbarFocused())) return null;\n    if (textarea.selectionStart === textarea.selectionEnd || dismissed() === selectionKey()) return null;\n    return textRangeBox(layer, surface, textarea.selectionStart, textarea.selectionEnd);\n  };\n\n  // Escape closes the toolbar for that one selection: a collapsed selection forgets it, so selecting the same words\n  // again shows it again.\n  createEffect(() => {\n    revision();\n    if (textarea.selectionStart === textarea.selectionEnd) setDismissed(undefined);\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(\"(pointer: coarse)\");\n    const update = () => setFinePointer(!query.matches);\n    update();\n    const press = () => {\n      setDismissed(undefined);\n      setDragging(true);\n      const release = () => {\n        setDragging(false);\n        document.removeEventListener(\"pointerup\", release, true);\n        document.removeEventListener(\"pointercancel\", release, true);\n      };\n      document.addEventListener(\"pointerup\", release, true);\n      document.addEventListener(\"pointercancel\", release, true);\n    };\n    const key = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        if (event.defaultPrevented || !anchor()) return;\n        event.preventDefault();\n        setDismissed(selectionKey());\n        return;\n      }\n      // Selection changes can arrive as one event, so the next key that may select again forgets Escape too.\n      if (![\"Shift\", \"Control\", \"Meta\", \"Alt\"].includes(event.key)) setDismissed(undefined);\n    };\n    const focus = () => setTextFocused(true);\n    const blur = (event: FocusEvent) =>\n      batch(() => {\n        // Tab into the toolbar keeps it open: the toolbar takes the focus in the same move.\n        if (event.relatedTarget instanceof Node && root?.contains(event.relatedTarget)) setToolbarFocused(true);\n        setTextFocused(false);\n      });\n    const selection = () => {\n      if (document.activeElement === textarea) bump();\n    };\n    // The presentation layer renders a frame after an edit; the toolbar measures again once it did.\n    const layerElement = layer;\n    const layerObserver = new MutationObserver(bump);\n    layerObserver.observe(layerElement, { childList: true, subtree: true, characterData: true });\n    query.addEventListener(\"change\", update);\n    textarea.addEventListener(\"pointerdown\", press);\n    textarea.addEventListener(\"keydown\", key);\n    textarea.addEventListener(\"focus\", focus);\n    textarea.addEventListener(\"blur\", blur);\n    textarea.addEventListener(\"input\", bump);\n    // The toolbar hides while its line is scrolled away and shows again when it returns.\n    textarea.addEventListener(\"scroll\", bump);\n    document.addEventListener(\"selectionchange\", selection);\n    onCleanup(() => {\n      layerObserver.disconnect();\n      query.removeEventListener(\"change\", update);\n      textarea.removeEventListener(\"pointerdown\", press);\n      textarea.removeEventListener(\"keydown\", key);\n      textarea.removeEventListener(\"focus\", focus);\n      textarea.removeEventListener(\"blur\", blur);\n      textarea.removeEventListener(\"input\", bump);\n      textarea.removeEventListener(\"scroll\", bump);\n      document.removeEventListener(\"selectionchange\", selection);\n    });\n  });\n\n  const run = (format: (textarea: HTMLTextAreaElement) => void) => () => format(textarea);\n  const formats = createMemo(() => {\n    revision();\n    return computeActiveFormats(textarea);\n  });\n  const pressed = (format: string) => formats().has(format);\n\n  // Touch devices keep their own selection menu: the toolbar is not rendered there at all, so nothing of it mounts\n  // or animates.\n  return (\n    <Show when={finePointer()}>\n      <SelectionToolbar\n        label={messages().selectionFormatting}\n        anchor={anchor}\n        onEscape={() => {\n          setDismissed(selectionKey());\n          textarea.focus();\n        }}\n      >\n        <div\n          ref={root}\n          style={{ display: \"contents\" }}\n          onFocusIn={() => setToolbarFocused(true)}\n          onFocusOut={(event) => {\n            if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) setToolbarFocused(false);\n          }}\n        >\n          <Toolbar.Action label={messages().bold} icon=\"ti ti-bold\" pressed={pressed(\"bold\")} keys=\"mod+b\" onClick={run(toggleBold)} />\n          <Toolbar.Action\n            label={messages().italic}\n            icon=\"ti ti-italic\"\n            pressed={pressed(\"italic\")}\n            keys=\"mod+i\"\n            onClick={run(toggleItalic)}\n          />\n          <Toolbar.Action\n            label={messages().inlineCode}\n            icon=\"ti ti-code\"\n            pressed={pressed(\"code\")}\n            keys=\"mod+e\"\n            onClick={run(toggleCode)}\n          />\n          <Toolbar.Action label={messages().link} icon=\"ti ti-link\" keys=\"mod+k\" onClick={run(insertLink)} />\n          <Toolbar.Separator />\n          <Toolbar.Action\n            label={messages().bulletList}\n            icon=\"ti ti-list\"\n            pressed={pressed(\"bullet\")}\n            keys=\"mod+shift+8\"\n            onClick={run(toggleBulletList)}\n          />\n          <Toolbar.Action\n            label={messages().numberedList}\n            icon=\"ti ti-list-numbers\"\n            pressed={pressed(\"ordered\")}\n            keys=\"mod+shift+7\"\n            onClick={run(toggleNumberedList)}\n          />\n          <Toolbar.Action label={messages().quote} icon=\"ti ti-quote\" pressed={pressed(\"quote\")} onClick={run(toggleQuote)} />\n        </div>\n      </SelectionToolbar>\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/internal/field.js

@@ -8,10 +8,11 @@ import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-field__required aria-hidden=true>*`),
   _tmpl$2 = /*#__PURE__*/_$template(`<label class=k2b-field__label><!$><!/><!$><!/>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<p class=k2b-field__description>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<p class=k2b-field__error role=alert aria-live=polite>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-field__label><!$><!/><!$><!/>`);
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-field__label><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-field__label-row><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<p class=k2b-field__description>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<p class=k2b-field__error role=alert aria-live=polite>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`);
 import { createUniqueId, Show } from "solid-js";
 import { resolveMaybeAccessor } from "../inputs/field-contract";
 export const createFieldMeta = id => {
@@ -26,107 +27,125 @@ export const createFieldMeta = id => {
 };
 export function Field(props) {
   const error = () => resolveMaybeAccessor(props.error);
+  const label = () => _$createComponent(Show, {
+    get when() {
+      return props.labelFor !== false;
+    },
+    get fallback() {
+      return (() => {
+        var _el$7 = _$getNextElement(_tmpl$3),
+          _el$9 = _el$7.firstChild,
+          [_el$0, _co$3] = _$getNextMarker(_el$9.nextSibling),
+          _el$1 = _el$0.nextSibling,
+          [_el$10, _co$4] = _$getNextMarker(_el$1.nextSibling);
+        _$insert(_el$7, () => props.label, _el$0, _co$3);
+        _$insert(_el$7, _$createComponent(Show, {
+          get when() {
+            return props.required;
+          },
+          get children() {
+            return _$getNextElement(_tmpl$);
+          }
+        }), _el$10, _co$4);
+        _$effect(() => _$setAttribute(_el$7, "id", props.meta.labelId));
+        return _el$7;
+      })();
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$2),
+        _el$3 = _el$.firstChild,
+        [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+        _el$5 = _el$4.nextSibling,
+        [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling);
+      _$insert(_el$, () => props.label, _el$4, _co$);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return props.required;
+        },
+        get children() {
+          return _$getNextElement(_tmpl$);
+        }
+      }), _el$6, _co$2);
+      _$effect(_p$ => {
+        var _v$ = props.meta.labelId,
+          _v$2 = props.labelFor || props.meta.controlId;
+        _v$ !== _p$.e && _$setAttribute(_el$, "id", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "for", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$;
+    }
+  });
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$5),
-      _el$0 = _el$.firstChild,
-      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling),
-      _el$10 = _el$1.nextSibling,
-      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
-      _el$12 = _el$11.nextSibling,
-      [_el$13, _co$5] = _$getNextMarker(_el$12.nextSibling),
-      _el$14 = _el$13.nextSibling,
-      [_el$15, _co$6] = _$getNextMarker(_el$14.nextSibling);
-    _$insert(_el$, _$createComponent(Show, {
+    var _el$11 = _$getNextElement(_tmpl$7),
+      _el$19 = _el$11.firstChild,
+      [_el$20, _co$7] = _$getNextMarker(_el$19.nextSibling),
+      _el$21 = _el$20.nextSibling,
+      [_el$22, _co$8] = _$getNextMarker(_el$21.nextSibling),
+      _el$23 = _el$22.nextSibling,
+      [_el$24, _co$9] = _$getNextMarker(_el$23.nextSibling),
+      _el$25 = _el$24.nextSibling,
+      [_el$26, _co$0] = _$getNextMarker(_el$25.nextSibling);
+    _$insert(_el$11, _$createComponent(Show, {
       get when() {
         return props.label;
       },
       get children() {
         return _$createComponent(Show, {
           get when() {
-            return props.labelFor !== false;
+            return props.labelEnd;
           },
           get fallback() {
-            return (() => {
-              var _el$16 = _$getNextElement(_tmpl$6),
-                _el$18 = _el$16.firstChild,
-                [_el$19, _co$7] = _$getNextMarker(_el$18.nextSibling),
-                _el$20 = _el$19.nextSibling,
-                [_el$21, _co$8] = _$getNextMarker(_el$20.nextSibling);
-              _$insert(_el$16, () => props.label, _el$19, _co$7);
-              _$insert(_el$16, _$createComponent(Show, {
-                get when() {
-                  return props.required;
-                },
-                get children() {
-                  return _$getNextElement(_tmpl$);
-                }
-              }), _el$21, _co$8);
-              _$effect(() => _$setAttribute(_el$16, "id", props.meta.labelId));
-              return _el$16;
-            })();
+            return label();
           },
           get children() {
-            var _el$2 = _$getNextElement(_tmpl$2),
-              _el$4 = _el$2.firstChild,
-              [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
-              _el$6 = _el$5.nextSibling,
-              [_el$7, _co$2] = _$getNextMarker(_el$6.nextSibling);
-            _$insert(_el$2, () => props.label, _el$5, _co$);
-            _$insert(_el$2, _$createComponent(Show, {
-              get when() {
-                return props.required;
-              },
-              get children() {
-                return _$getNextElement(_tmpl$);
-              }
-            }), _el$7, _co$2);
-            _$effect(_p$ => {
-              var _v$ = props.meta.labelId,
-                _v$2 = props.labelFor || props.meta.controlId;
-              _v$ !== _p$.e && _$setAttribute(_el$2, "id", _p$.e = _v$);
-              _v$2 !== _p$.t && _$setAttribute(_el$2, "for", _p$.t = _v$2);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$2;
+            var _el$12 = _$getNextElement(_tmpl$4),
+              _el$13 = _el$12.firstChild,
+              [_el$14, _co$5] = _$getNextMarker(_el$13.nextSibling),
+              _el$15 = _el$14.nextSibling,
+              [_el$16, _co$6] = _$getNextMarker(_el$15.nextSibling);
+            _$insert(_el$12, label, _el$14, _co$5);
+            _$insert(_el$12, () => props.labelEnd, _el$16, _co$6);
+            return _el$12;
           }
         });
       }
-    }), _el$1, _co$3);
-    _$insert(_el$, _$createComponent(Show, {
+    }), _el$20, _co$7);
+    _$insert(_el$11, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$8 = _$getNextElement(_tmpl$3);
-        _$insert(_el$8, () => props.description);
-        _$effect(() => _$setAttribute(_el$8, "id", props.meta.descriptionId));
-        return _el$8;
+        var _el$17 = _$getNextElement(_tmpl$5);
+        _$insert(_el$17, () => props.description);
+        _$effect(() => _$setAttribute(_el$17, "id", props.meta.descriptionId));
+        return _el$17;
       }
-    }), _el$11, _co$4);
-    _$insert(_el$, () => props.children, _el$13, _co$5);
-    _$insert(_el$, _$createComponent(Show, {
+    }), _el$22, _co$8);
+    _$insert(_el$11, () => props.children, _el$24, _co$9);
+    _$insert(_el$11, _$createComponent(Show, {
       get when() {
         return error();
       },
       get children() {
-        var _el$9 = _$getNextElement(_tmpl$4);
-        _$insert(_el$9, error);
-        _$effect(() => _$setAttribute(_el$9, "id", props.meta.errorId));
-        return _el$9;
+        var _el$18 = _$getNextElement(_tmpl$6);
+        _$insert(_el$18, error);
+        _$effect(() => _$setAttribute(_el$18, "id", props.meta.errorId));
+        return _el$18;
       }
-    }), _el$15, _co$6);
+    }), _el$26, _co$0);
     _$effect(_p$ => {
       var _v$3 = `k2b-field ${props.class ?? ""}`,
         _v$4 = props.disabled ? "true" : undefined,
         _v$5 = props.fill ? "true" : undefined,
         _v$6 = error() ? "true" : undefined;
-      _v$3 !== _p$.e && _$className(_el$, _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute(_el$, "data-disabled", _p$.t = _v$4);
-      _v$5 !== _p$.a && _$setAttribute(_el$, "data-fill", _p$.a = _v$5);
-      _v$6 !== _p$.o && _$setAttribute(_el$, "data-invalid", _p$.o = _v$6);
+      _v$3 !== _p$.e && _$className(_el$11, _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$11, "data-disabled", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setAttribute(_el$11, "data-fill", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$11, "data-invalid", _p$.o = _v$6);
       return _p$;
     }, {
       e: undefined,
@@ -134,7 +153,7 @@ export function Field(props) {
       a: undefined,
       o: undefined
     });
-    return _el$;
+    return _el$11;
   })();
 }
 export const fieldDescribedBy = (meta, owner) => [owner["aria-describedby"], owner.description ? meta.descriptionId : undefined, resolveMaybeAccessor(owner.error) ? meta.errorId : undefined].filter(Boolean).join(" ") || undefined;

package/dist/browser/internal/field.js.map

@@ -1 +1 @@
-{"version":3,"names":["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"],"sources":["internal/field.tsx"],"sourcesContent":["import { createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { FieldProps } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\n\nexport type FieldMeta = {\n  controlId: string;\n  labelId: string;\n  descriptionId: string;\n  errorId: string;\n};\n\nexport const createFieldMeta = (id?: string): FieldMeta => {\n  const generatedId = createUniqueId();\n  const controlId = id ?? `k2b-field-${generatedId}`;\n\n  return {\n    controlId,\n    labelId: `${controlId}-label`,\n    descriptionId: `${controlId}-description`,\n    errorId: `${controlId}-error`,\n  };\n};\n\ntype FieldLayoutProps = {\n  children: JSX.Element;\n  meta: FieldMeta;\n  fill?: boolean;\n  /** Composite controls use aria-labelledby instead of an HTML label target. */\n  labelFor?: string | false;\n} & Pick<FieldProps, \"class\" | \"description\" | \"error\" | \"label\" | \"required\" | \"disabled\">;\n\nexport function Field(props: FieldLayoutProps): JSX.Element {\n  const error = () => resolveMaybeAccessor(props.error);\n\n  return (\n    <div\n      class={`k2b-field ${props.class ?? \"\"}`}\n      data-disabled={props.disabled ? \"true\" : undefined}\n      data-fill={props.fill ? \"true\" : undefined}\n      data-invalid={error() ? \"true\" : undefined}\n    >\n      <Show when={props.label}>\n        <Show\n          when={props.labelFor !== false}\n          fallback={\n            <span id={props.meta.labelId} class=\"k2b-field__label\">\n              {props.label}\n              <Show when={props.required}>\n                <span class=\"k2b-field__required\" aria-hidden=\"true\">\n                  *\n                </span>\n              </Show>\n            </span>\n          }\n        >\n          <label id={props.meta.labelId} class=\"k2b-field__label\" for={props.labelFor || props.meta.controlId}>\n            {props.label}\n            <Show when={props.required}>\n              <span class=\"k2b-field__required\" aria-hidden=\"true\">\n                *\n              </span>\n            </Show>\n          </label>\n        </Show>\n      </Show>\n      <Show when={props.description}>\n        <p class=\"k2b-field__description\" id={props.meta.descriptionId}>\n          {props.description}\n        </p>\n      </Show>\n      {props.children}\n      <Show when={error()}>\n        <p class=\"k2b-field__error\" id={props.meta.errorId} role=\"alert\" aria-live=\"polite\">\n          {error()}\n        </p>\n      </Show>\n    </div>\n  );\n}\n\ntype FieldAriaOwner = Pick<FieldProps, \"aria-describedby\" | \"aria-label\" | \"description\" | \"error\" | \"label\" | \"required\">;\n\nexport const fieldDescribedBy = (meta: FieldMeta, owner: FieldAriaOwner): string | undefined =>\n  [\n    owner[\"aria-describedby\"],\n    owner.description ? meta.descriptionId : undefined,\n    resolveMaybeAccessor(owner.error) ? meta.errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \") || undefined;\n\nexport const fieldControlAria = (meta: FieldMeta, owner: FieldAriaOwner) => ({\n  get \"aria-label\"() {\n    return owner.label ? undefined : owner[\"aria-label\"];\n  },\n  get \"aria-labelledby\"() {\n    return owner.label ? meta.labelId : undefined;\n  },\n  get \"aria-describedby\"() {\n    return fieldDescribedBy(meta, owner);\n  },\n  get \"aria-invalid\"() {\n    return resolveMaybeAccessor(owner.error) ? (\"true\" as const) : undefined;\n  },\n  get \"aria-required\"() {\n    return owner.required || undefined;\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"],"sources":["internal/field.tsx"],"sourcesContent":["import { createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { FieldProps } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\n\nexport type FieldMeta = {\n  controlId: string;\n  labelId: string;\n  descriptionId: string;\n  errorId: string;\n};\n\nexport const createFieldMeta = (id?: string): FieldMeta => {\n  const generatedId = createUniqueId();\n  const controlId = id ?? `k2b-field-${generatedId}`;\n\n  return {\n    controlId,\n    labelId: `${controlId}-label`,\n    descriptionId: `${controlId}-description`,\n    errorId: `${controlId}-error`,\n  };\n};\n\ntype FieldLayoutProps = {\n  children: JSX.Element;\n  meta: FieldMeta;\n  fill?: boolean;\n  /** Composite controls use aria-labelledby instead of an HTML label target. */\n  labelFor?: string | false;\n  /** Optional controls beside the label, outside its clickable target. */\n  labelEnd?: JSX.Element;\n} & Pick<FieldProps, \"class\" | \"description\" | \"error\" | \"label\" | \"required\" | \"disabled\">;\n\nexport function Field(props: FieldLayoutProps): JSX.Element {\n  const error = () => resolveMaybeAccessor(props.error);\n  const label = () => (\n    <Show\n      when={props.labelFor !== false}\n      fallback={\n        <span id={props.meta.labelId} class=\"k2b-field__label\">\n          {props.label}\n          <Show when={props.required}>\n            <span class=\"k2b-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          </Show>\n        </span>\n      }\n    >\n      <label id={props.meta.labelId} class=\"k2b-field__label\" for={props.labelFor || props.meta.controlId}>\n        {props.label}\n        <Show when={props.required}>\n          <span class=\"k2b-field__required\" aria-hidden=\"true\">\n            *\n          </span>\n        </Show>\n      </label>\n    </Show>\n  );\n\n  return (\n    <div\n      class={`k2b-field ${props.class ?? \"\"}`}\n      data-disabled={props.disabled ? \"true\" : undefined}\n      data-fill={props.fill ? \"true\" : undefined}\n      data-invalid={error() ? \"true\" : undefined}\n    >\n      <Show when={props.label}>\n        <Show when={props.labelEnd} fallback={label()}>\n          <div class=\"k2b-field__label-row\">\n            {label()}\n            {props.labelEnd}\n          </div>\n        </Show>\n      </Show>\n      <Show when={props.description}>\n        <p class=\"k2b-field__description\" id={props.meta.descriptionId}>\n          {props.description}\n        </p>\n      </Show>\n      {props.children}\n      <Show when={error()}>\n        <p class=\"k2b-field__error\" id={props.meta.errorId} role=\"alert\" aria-live=\"polite\">\n          {error()}\n        </p>\n      </Show>\n    </div>\n  );\n}\n\ntype FieldAriaOwner = Pick<FieldProps, \"aria-describedby\" | \"aria-label\" | \"description\" | \"error\" | \"label\" | \"required\">;\n\nexport const fieldDescribedBy = (meta: FieldMeta, owner: FieldAriaOwner): string | undefined =>\n  [\n    owner[\"aria-describedby\"],\n    owner.description ? meta.descriptionId : undefined,\n    resolveMaybeAccessor(owner.error) ? meta.errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \") || undefined;\n\nexport const fieldControlAria = (meta: FieldMeta, owner: FieldAriaOwner) => ({\n  get \"aria-label\"() {\n    return owner.label ? undefined : owner[\"aria-label\"];\n  },\n  get \"aria-labelledby\"() {\n    return owner.label ? meta.labelId : undefined;\n  },\n  get \"aria-describedby\"() {\n    return fieldDescribedBy(meta, owner);\n  },\n  get \"aria-invalid\"() {\n    return resolveMaybeAccessor(owner.error) ? (\"true\" as const) : undefined;\n  },\n  get \"aria-required\"() {\n    return owner.required || undefined;\n  },\n});\n"],"mappings":"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","ignoreList":[]}