@usefillo/dom 0.20.0 → 0.21.0

package/dist/index.js

@@ -134,6 +134,24 @@ function optionIcon(icon) {
   svg.appendChild(path);
   return svg;
 }
+function selectionCheck() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "fillo-option-check");
+  svg.setAttribute("width", "1em");
+  svg.setAttribute("height", "1em");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "square");
+  svg.setAttribute("stroke-linejoin", "miter");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", "M4 12l5 5L20 6");
+  svg.appendChild(path);
+  return svg;
+}
 function applyFieldAria(node, field, error, ids, opts = {}) {
   if (error) node.setAttribute("aria-invalid", "true");
   if ((opts.requiredSupported ?? true) && field.required)
@@ -627,11 +645,7 @@ function singleChoice(context) {
       // was the only selected-state signal — add a decorative shape signal
       // that survives forced-colors (audit P1.2; state still lives on the
       // input, this marker is non-authoritative).
-      option.icon && value === option.id ? el("span", {
-        className: "fillo-option-check",
-        text: "\u2713",
-        attrs: { "aria-hidden": "true" }
-      }) : null
+      option.icon && value === option.id ? selectionCheck() : null
     ]);
     wrap.appendChild(label);
   }
@@ -721,11 +735,7 @@ function multiChoice(context) {
         text: option.label,
         attrs: { "data-fillo": "optionLabel" }
       }),
-      option.icon && selected.includes(option.id) ? el("span", {
-        className: "fillo-option-check",
-        text: "\u2713",
-        attrs: { "aria-hidden": "true" }
-      }) : null
+      option.icon && selected.includes(option.id) ? selectionCheck() : null
     ]);
     wrap.appendChild(label);
   }