@expressivecss/expressive 0.9.0 → 0.9.1

package/dist/js/expressive.js

@@ -4084,11 +4084,21 @@ var Expressive = (() => {
       }
       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);
       }
@@ -4919,13 +4929,18 @@ var Expressive = (() => {
           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 = [];
@@ -4937,8 +4952,40 @@ var Expressive = (() => {
       }
       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.
@@ -4978,7 +5025,7 @@ var Expressive = (() => {
     }
     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(
@@ -7493,7 +7540,7 @@ var Expressive = (() => {
   }
 
   // src/ts/index.ts
-  var version = "0.9.0";
+  var version = "0.9.1";
   Forms.Init();
   Chips.Init();
   Slider.Init();