@threadlabs/looma 0.26.20 → 0.26.21

package/components/shared/editor.js

@@ -4,6 +4,16 @@ export const backgrounds = [
   ["background-green", "Green", "#dcfce7"], ["background-red", "Red", "#fee2e2"],
 ];
 
+// HTML parsing serializes hex colors as RGB. Compare browser-normalized CSS
+// colors without changing the document value or treating invalid CSS as Default.
+export function normalizeCellBackground(value, ownerDocument) {
+  const color = String(value ?? "").trim();
+  if (!color) return "";
+  const style = ownerDocument.createElement("span").style;
+  style.backgroundColor = color;
+  return style.backgroundColor || color;
+}
+
 // Looma's icon set as plain data, generated from LOOMA_ICONS (see shared/icons.js).
 export { icons } from "./icons.js";
 

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.js

@@ -1,4 +1,4 @@
-import { backgrounds, viewport } from "../shared/editor.js";
+import { backgrounds, normalizeCellBackground, viewport } from "../shared/editor.js";
 
 const sections = [
   ["Structure", [
@@ -51,9 +51,9 @@ function connect(host) {
     const scope = String(host.props.scope.value || "cell");
     const enabled = new Set((Array.isArray(host.props.actions.value) ? host.props.actions.value : []).filter((action) =>
       scope === "cell" || (scope === "row" ? !action.includes("column") : !action.includes("row"))));
-    const background = String(host.props.cellBackground.value ?? "");
+    const background = normalizeCellBackground(host.props.cellBackground.value, element.ownerDocument);
     const swatches = backgrounds.filter(([action]) => enabled.has(action))
-      .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
+      .map(([action, label, color]) => ({ action, label, color, selected: normalizeCellBackground(color, element.ownerDocument) === background }));
     host.state.swatches = swatches.length ? swatches : null;
     host.state.sections = sections
       .map(([heading, items]) => ({

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -1,4 +1,4 @@
-import { backgrounds } from "../shared/editor.js";
+import { backgrounds, normalizeCellBackground } from "../shared/editor.js";
 import { createAnchoredSurface } from "../shared/overlay.js";
 
 const overflowSections = [
@@ -45,9 +45,9 @@ function connect(host) {
     host.state.structure = [["add-row-after", "Add row", "rows"], ["add-column-after", "Add column", "columns"]]
       .filter(([action]) => enabled.has(action))
       .map(([action, label, icon]) => ({ action, label, icon }));
-    const background = String(host.props.cellBackground.value ?? "");
+    const background = normalizeCellBackground(host.props.cellBackground.value, host.element.ownerDocument);
     host.state.swatches = backgrounds.filter(([action]) => enabled.has(action))
-      .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
+      .map(([action, label, color]) => ({ action, label, color, selected: normalizeCellBackground(color, host.element.ownerDocument) === background }));
     host.state.sections = overflowSections
       .map(([heading, items]) => ({
         heading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.20",
+  "version": "0.26.21",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",