@expressivecss/expressive 0.9.0 → 0.9.1

package/dist/js/expressive.mjs

@@ -4031,11 +4031,21 @@ var FormSelect = class _FormSelect extends Component {
     }
     li.appendChild(span);
     const iconUrl = realOption.getAttribute("data-icon");
-    const classes = realOption.getAttribute("class")?.split(" ").filter(Boolean);
+    let imageUrl;
     if (iconUrl) {
+      try {
+        const url = new URL(iconUrl, this.el.ownerDocument.baseURI);
+        if (["http:", "https:", "blob:"].includes(url.protocol) || /^data:image\/(?:avif|bmp|gif|jpeg|png|svg\+xml|webp|x-icon)(?:;|,)/i.test(url.href)) {
+          imageUrl = url;
+        }
+      } catch {
+      }
+    }
+    const classes = realOption.getAttribute("class")?.split(" ").filter(Boolean);
+    if (imageUrl) {
       const img = document.createElement("img");
       if (classes?.length) img.classList.add(...classes);
-      img.src = iconUrl;
+      img.src = imageUrl.href;
       img.ariaHidden = "true";
       li.prepend(img);
     }
@@ -4866,13 +4876,18 @@ var _Datepicker = class _Datepicker extends Component {
         arr.push(className);
       }
     }
-    return `<td data-day="${opts.day}" class="${arr.join(" ")}" aria-selected="${ariaSelected}"><button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button></td>`;
+    const day = _Datepicker._escape(opts.day);
+    const month = _Datepicker._escape(opts.month);
+    const year = _Datepicker._escape(opts.year);
+    return `<td data-day="${day}" class="${arr.join(" ")}" aria-selected="${ariaSelected}"><button class="datepicker-day-button" type="button" data-year="${year}" data-month="${month}" data-day="${day}">${day}</button></td>`;
   }
+  /** Assemble calendar cells; reject unsupported elements and attributes. */
   renderRow(days, isRTL, isRowSelected) {
-    return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + (isRTL ? days.reverse() : days).join("") + "</tr>";
+    return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
   }
+  /** Assemble calendar rows; reject unsupported elements and attributes. */
   renderTable(opts, data, randId) {
-    return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + randId + '">' + this.renderHead(opts) + this.renderBody(data) + "</table></div>";
+    return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + _Datepicker._escape(randId) + '">' + this.renderHead(opts) + this.renderBody(data) + "</table></div>";
   }
   renderHead(opts) {
     const arr = [];
@@ -4884,8 +4899,40 @@ var _Datepicker = class _Datepicker extends Component {
     }
     return "<thead><tr>" + (opts.isRTL ? arr.reverse() : arr).join("") + "</tr></thead>";
   }
+  /** Wrap calendar rows after validating and encoding their contents. */
   renderBody(rows) {
-    return "<tbody>" + rows.join("") + "</tbody>";
+    return "<tbody>" + _Datepicker._calendarMarkup(rows.join(""), "tbody") + "</tbody>";
+  }
+  static _calendarMarkup(html, parent) {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const attributes = {
+      tr: ["class"],
+      td: ["class", "data-day", "aria-selected"],
+      button: ["class", "type", "data-year", "data-month", "data-day", "aria-label", "disabled", "tabindex"]
+    };
+    const render = (node, container) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (container === "tbody" || container === "tr") {
+          if (node.textContent.trim()) throw new TypeError("Unsupported calendar row content");
+        }
+        return _Datepicker._escape(node.textContent);
+      }
+      if (!(node instanceof HTMLElement)) throw new TypeError("Unsupported calendar row content");
+      const tag = node.localName === "tr" ? "tr" : node.localName === "td" ? "td" : node.localName === "button" ? "button" : null;
+      if (!tag || !(container === "tbody" && tag === "tr" || container === "tr" && tag === "td" || container === "td" && tag === "button")) {
+        throw new TypeError("Unsupported calendar row element");
+      }
+      if ([...node.attributes].some((attr) => !attributes[tag].includes(attr.name))) {
+        throw new TypeError("Unsupported calendar row attribute");
+      }
+      if (tag === "button" && node.getAttribute("type") !== "button") {
+        throw new TypeError('Calendar day buttons require type="button"');
+      }
+      const attrs = attributes[tag].filter((name) => node.hasAttribute(name)).map((name) => ` ${name}="${_Datepicker._escape(node.getAttribute(name))}"`).join("");
+      return `<${tag}${attrs}>${[...node.childNodes].map((child) => render(child, tag)).join("")}</${tag}>`;
+    };
+    return [...template.content.childNodes].map((node) => render(node, parent)).join("");
   }
   /**
    * Whether each month arrow is usable at this position in the allowed range.
@@ -4925,7 +4972,7 @@ var _Datepicker = class _Datepicker extends Component {
   }
   renderTitle(instance, c, year, month, refYear, randId) {
     const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
-    let i, j, arr = [], html = '<div id="' + randId + '" class="datepicker-controls" role="heading" aria-live="assertive">';
+    let i, j, arr = [], html = '<div id="' + _Datepicker._escape(randId) + '" class="datepicker-controls" role="heading" aria-live="assertive">';
     const { prev, next } = this._arrowState(year, month);
     for (i = 0; i < 12; i++) {
       arr.push(
@@ -7440,7 +7487,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/index.ts
-var version = "0.9.0";
+var version = "0.9.1";
 Forms.Init();
 Chips.Init();
 Slider.Init();