@expressivecss/expressive 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@ the format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.9.1] - 2026-09-08
+
+Includes the fixes from [#140](https://github.com/BaezFJ/ExpressiveCSS/pull/140).
+
+### Migration from 0.9.0
+
+Custom Datepicker row renderers must return calendar rows, cells, and day buttons
+with supported attributes. Use `renderDay` to generate cells and set
+`type="button"` on custom day buttons. Unsupported HTML now throws `TypeError`.
+
+### Fixed
+
+- Validate enhanced-select icon URLs and encode calendar identifiers and day values.
+- Restrict Datepicker's low-level row renderers to calendar rows, cells, and day buttons. Custom renderers must use supported attributes and `type="button"`; unsupported HTML now throws `TypeError`.
+- Preserve special characters in generated semantics tables and correct the documentation-script and floating-sheet test patterns.
+
 ## [0.9.0] - 2026-09-08
 
 ### Migration from 0.8.0
@@ -1493,7 +1509,8 @@ are no compatibility aliases.
 - `.tabs` nested in a header or app bar as a secondary row. `.tabs` is a
   standalone component; the `.tabs.transparent` app bar variant is gone with it.
 
-[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.9.0...HEAD
+[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.9.1...HEAD
+[0.9.1]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.9.0...v0.9.1
 [0.9.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.6.0...v0.7.0

package/README.md

@@ -4,7 +4,7 @@ ExpressiveCSS is a Material Design 3 front-end framework built with Sass and
 TypeScript. It provides theme tokens, layout and utility classes, styled form
 controls, and JavaScript components in browser, ES module, and CommonJS builds.
 
-> ExpressiveCSS is currently at version `0.9.0` and under active development.
+> ExpressiveCSS is currently at version `0.9.1` and under active development.
 
 Documentation: [www.expressivecss.com](https://www.expressivecss.com)
 

package/dist/js/expressive.cjs

@@ -4084,11 +4084,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);
     }
@@ -4919,13 +4929,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 = [];
@@ -4937,8 +4952,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.
@@ -4978,7 +5025,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(
@@ -7493,7 +7540,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();