@threadlabs/looma 0.23.12 → 0.23.14

package/editor/chunks/extensions.js

@@ -9561,10 +9561,10 @@ function arrayEquals(left, right) {
 }
 function readRenderedColumnWidths(tableElement) {
 	const colElements = Array.from(tableElement.querySelectorAll("colgroup col"));
-	if (colElements.length > 0) return colElements.map((column) => Math.max(1, Math.round(column.getBoundingClientRect().width)));
+	if (colElements.length > 0) return colElements.map((column) => Math.max(1, column.getBoundingClientRect().width));
 	const firstRow = tableElement.rows.item(0);
 	if (!firstRow) return [];
-	return Array.from(firstRow.cells).map((cell) => Math.max(1, Math.round(cell.getBoundingClientRect().width)));
+	return Array.from(firstRow.cells).map((cell) => Math.max(1, cell.getBoundingClientRect().width));
 }
 function distributeWidthDelta(widths, availableWidth, minWidth) {
 	const normalized = [...widths];
@@ -9672,8 +9672,8 @@ function insertTableAtRange(editor, range, options = {}) {
 * Browser layout is the source of truth at the end of a pointer resize, but
 * ProseMirror must persist integer widths in the document. The algorithm keeps
 * proportions, enforces a minimum, and distributes rounding error so the final
-* sum still equals the rendered table width. Spanning cells are updated once at
-* their top-left map coordinate rather than once per covered grid position.
+* sum fits the rendered column grid, excluding the outer table border. Spanning
+* cells are updated once at their top-left map coordinate rather than once per covered grid position.
 *
 * @invariant Every persisted width is an integer at least `minWidth`, and each
 * spanning cell receives one width per logical column from its top-left origin.
@@ -9685,7 +9685,7 @@ function normalizeActiveTableColumnWidths(editor, tableElement, minWidth = 25) {
 	if (!tableInfo) return false;
 	const renderedColumnWidths = readRenderedColumnWidths(tableElement);
 	if (renderedColumnWidths.length === 0) return false;
-	const normalizedColumnWidths = normalizeColumnWidths(renderedColumnWidths, Math.max(1, Math.round(tableElement.getBoundingClientRect().width)), minWidth);
+	const normalizedColumnWidths = normalizeColumnWidths(renderedColumnWidths, Math.max(1, Math.floor(renderedColumnWidths.reduce((sum, width) => sum + width, 0))), minWidth);
 	const { pos: tablePos, node: table } = tableInfo;
 	const map = TableMap.get(table);
 	const tableStart = tablePos + 1;

package/editor/extensions/table-commands.d.ts

@@ -95,8 +95,8 @@ export declare function insertTableAtRange(editor: Editor, range: Range, options
  * Browser layout is the source of truth at the end of a pointer resize, but
  * ProseMirror must persist integer widths in the document. The algorithm keeps
  * proportions, enforces a minimum, and distributes rounding error so the final
- * sum still equals the rendered table width. Spanning cells are updated once at
- * their top-left map coordinate rather than once per covered grid position.
+ * sum fits the rendered column grid, excluding the outer table border. Spanning
+ * cells are updated once at their top-left map coordinate rather than once per covered grid position.
  *
  * @invariant Every persisted width is an integer at least `minWidth`, and each
  * spanning cell receives one width per logical column from its top-left origin.

package/package.json

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

package/styles/ui-badge.css

@@ -97,9 +97,8 @@
       text-overflow: ellipsis;
     }
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
-     * replaces, still sizes to its label rather than filling its container. */
+    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+       would crop glyphs where the label clips horizontal overflow for ellipsis. */
     @supports (text-box-trim: trim-both) {
       :scope {
         display: inline-block;
@@ -107,7 +106,7 @@
         text-align: center;
         align-content: center;
         text-box-trim: trim-both;
-        text-box-edge: cap alphabetic;
+        text-box-edge: text;
       }
     }
 
@@ -333,9 +332,8 @@
     /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
        text stays in the DOM for accessible names and consumers' selected values. */
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
-     * replaces, still sizes to its label rather than filling its container. */
+    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+       would crop glyphs where the label clips horizontal overflow for ellipsis. */
     @supports (text-box-trim: trim-both) {
     }
 

package/vue/UiBadge.vue

@@ -287,9 +287,8 @@ const hostState = computed(() =>
   text-overflow: ellipsis;
 }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
- * replaces, still sizes to its label rather than filling its container. */
+/* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+   would crop glyphs where the label clips horizontal overflow for ellipsis. */
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-badge"] {
     display: inline-block;
@@ -297,7 +296,7 @@ const hostState = computed(() =>
     text-align: center;
     align-content: center;
     text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+    text-box-edge: text;
   }
 }
 

package/vue/chunks/UiBadge.js

@@ -169,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-18b6e16a"]]);
+}), [["__scopeId", "data-v-83521ab0"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/components.css

@@ -349,7 +349,7 @@ svg[data-v-47b12d9e] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
@@ -394,27 +394,26 @@ svg[data-v-47b12d9e] {
 
 /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
    text stays in the DOM for accessible names and consumers' selected values. */
-.label[data-v-18b6e16a] {
+.label[data-v-83521ab0] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
- * replaces, still sizes to its label rather than filling its container. */
+/* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
+   would crop glyphs where the label clips horizontal overflow for ellipsis. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-v-83521ab0] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
     align-content: center;
     text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+    text-box-edge: text;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-83521ab0] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -422,52 +421,52 @@ svg[data-v-47b12d9e] {
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
   --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -475,12 +474,12 @@ svg[data-v-47b12d9e] {
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-83521ab0] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-83521ab0] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -488,29 +487,29 @@ svg[data-v-47b12d9e] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-83521ab0] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -523,17 +522,17 @@ svg[data-v-47b12d9e] {
   border-radius: var(--ui-radius-md);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-83521ab0] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-83521ab0] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-83521ab0] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -545,7 +544,7 @@ svg[data-v-47b12d9e] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-83521ab0] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -556,7 +555,7 @@ svg[data-v-47b12d9e] {
 
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -573,7 +572,7 @@ svg[data-v-47b12d9e] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -588,34 +587,34 @@ svg[data-v-47b12d9e] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
   );
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-83521ab0] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-18b6e16a] {
+[data-component~="ui-badge"][hidden][data-v-83521ab0] {
   display: none;
 }