@threadlabs/looma 0.7.4 → 0.8.0

package/package.json

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

package/styles/ui-avatar-group.css

@@ -30,7 +30,7 @@
         var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
         var(--ui-avatar-group-edge-ring, var(--_edge-ring));
       font: inherit;
-      font-size: 0.75rem;
+      font-size: var(--ui-font-size-xs);
       font-weight: 600;
       flex-shrink: 0;
     }

package/styles/ui-avatar.css

@@ -11,7 +11,7 @@
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-solid));
       font: inherit;
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
       font-weight: 600;
       text-transform: uppercase;
     }

package/styles/ui-button.css

@@ -65,13 +65,13 @@
     :scope[data-ui-button-state~="size=sm"] {
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     :scope[data-ui-button-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
-      font-size: 1rem;
+      font-size: var(--ui-font-size-md);
     }
 
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that

package/styles/ui-combobox.css

@@ -9,7 +9,7 @@
     }
     label {
       color: var(--ui-combobox-label-text, var(--ui-text-primary));
-      font-size: var(--ui-combobox-label-font-size, 0.875rem);
+      font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
       font-weight: 500;
     }
     /* The field and anything that annotates it sit on one row; the help button is beside the box,

package/styles/ui-editor-slash-menu.css

@@ -152,7 +152,7 @@
       align-items: center;
       justify-content: center;
       font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-      font-size: 10px;
+      font-size: var(--ui-font-size-2xs);
       background: var(--ui-surface-hover);
       border: 1px solid var(--ui-border);
       border-radius: 3px;

package/styles/ui-editor-table-context-menu.css

@@ -101,7 +101,7 @@
 
     .heading {
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.6875rem;
+      font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;

package/styles/ui-editor-table-toolbar.css

@@ -141,7 +141,7 @@
 
     .menu-heading {
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.6875rem;
+      font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;

package/styles/ui-form-field.css

@@ -18,12 +18,12 @@
 
     .label {
       color: var(--ui-text-secondary);
-      font-size: 0.95rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     .help {
       color: var(--ui-text-muted);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
     }
 
@@ -43,7 +43,7 @@
     .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
       color: var(--ui-accent-active);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-tree-item.css

@@ -17,7 +17,7 @@
       align-items: center;
       min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
-      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
+      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-secondary);
       transition:

package/tokens.css

@@ -36,7 +36,6 @@
       "Segoe UI Emoji";
     --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
     --ui-font-size: 1rem;
-    --ui-font-size-sm: 0.875rem;
     --ui-font-medium: 500;
     --ui-line-height: 1.4;
 
@@ -78,8 +77,8 @@
     /* Type scale, from the base size. */
     --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
     --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
-    /* Dense interactive text: legible without body-copy spacing. */
-    --ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
+    /* Dense text: controls, labels, and metadata. Two steps below body copy, never one pixel. */
+    --ui-font-size-sm: calc(var(--ui-font-size) * 0.875);
     --ui-font-size-md: var(--ui-font-size);
     --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
     --ui-font-size-xl: calc(var(--ui-font-size) * 1.25);

package/vue/UiAvatar.vue

@@ -62,7 +62,7 @@ useComponentHost(controllerModule.default, {
   background: var(--ui-avatar-surface, var(--ui-accent-soft));
   color: var(--ui-avatar-text, var(--ui-accent-solid));
   font: inherit;
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   font-weight: 600;
   text-transform: uppercase;
 }

package/vue/UiAvatarGroup.vue

@@ -85,7 +85,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
     var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
-  font-size: 0.75rem;
+  font-size: var(--ui-font-size-xs);
   font-weight: 600;
   flex-shrink: 0;
 }

package/vue/UiButton.vue

@@ -140,13 +140,13 @@ function attribute(value: unknown): any {
 [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="size=lg"] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: 1rem;
+  font-size: var(--ui-font-size-md);
 }
 
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that

package/vue/UiCombobox.vue

@@ -648,7 +648,7 @@ defineExpose({
 }
 label {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
-  font-size: var(--ui-combobox-label-font-size, 0.875rem);
+  font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,

package/vue/UiEditorSlashMenu.vue

@@ -246,7 +246,7 @@ useComponentHost(controllerModule.default, {
   align-items: center;
   justify-content: center;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: 10px;
+  font-size: var(--ui-font-size-2xs);
   background: var(--ui-surface-hover);
   border: 1px solid var(--ui-border);
   border-radius: 3px;

package/vue/UiEditorTableContextMenu.vue

@@ -260,7 +260,7 @@ useComponentHost(controllerModule.default, {
 
 .heading {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;

package/vue/UiEditorTableToolbar.vue

@@ -356,7 +356,7 @@ useComponentHost(controllerModule.default, {
 
 .menu-heading {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;

package/vue/UiFormField.vue

@@ -58,12 +58,12 @@ useComponentHost(controllerModule.default, {
 
 .label {
   color: var(--ui-text-secondary);
-  font-size: 0.95rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 .help {
   color: var(--ui-text-muted);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
 
@@ -74,7 +74,7 @@ useComponentHost(controllerModule.default, {
 .error,
 :slotted([role="alert"]) {
   color: var(--ui-accent-active);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiTreeItem.vue

@@ -179,7 +179,7 @@ useComponentHost(controllerModule.default, {
   align-items: center;
   min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
-  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
+  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-secondary);
   transition:

package/vue/chunks/UiAvatar.js

@@ -57,6 +57,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-64e52bdd"]]);
+}), [["__scopeId", "data-v-eb16b513"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -44,6 +44,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-cbb93f58"]]);
+}), [["__scopeId", "data-v-9e8e1291"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiButton.js

@@ -83,6 +83,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-852dd10e"]]);
+}), [["__scopeId", "data-v-1cd0b390"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCombobox.js

@@ -451,6 +451,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1aba7b21"]]);
+}), [["__scopeId", "data-v-3b8b0ecf"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -95,6 +95,6 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-346835f7"]]);
+}), [["__scopeId", "data-v-e7d0f904"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorTableContextMenu.js

@@ -93,6 +93,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}), 128))], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ae062630"]]);
+}), [["__scopeId", "data-v-2d9eb67c"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -175,6 +175,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-31b70e7c"]]);
+}), [["__scopeId", "data-v-1b253cb1"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiFormField.js

@@ -46,6 +46,6 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-605db5c0"]]);
+}), [["__scopeId", "data-v-13b85af2"]]);
 //#endregion
 export { UiFormField_default as t };

package/vue/chunks/UiTreeItem.js

@@ -210,6 +210,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-9b8fd08d"]]);
+}), [["__scopeId", "data-v-d093d318"]]);
 //#endregion
 export { UiTreeItem_default as t };