@threadlabs/looma 0.36.0 → 0.37.0

package/docs/README.md

@@ -76,9 +76,9 @@ The [public token reference](https://github.com/threadlabs-studio/looma/blob/mai
 | Finish and illumination | `finish` → `--ui-finish`; `edge-light` → `--ui-edge-light`; `glow` → `--ui-glow`; `light-x` → `--ui-light-x`; `light-y` → `--ui-light-y`; `light-spread` → `--ui-light-spread`; `light-strength` → `--ui-light-strength` |
 | Motion | `response-time` → `--ui-motion-fast`; `response-curve` → `--ui-motion-ease` |
 
-Palette generation decisions exist only in the JSON recipe; edit it and regenerate to change resolved colors. Geometry, material and motion properties feed the included CSS recipe. `--ui-control-size` remains a derived public height role: author numeric roominess (default 2.5, range 2–4) instead of an absolute control size. Spacing (default 1, range 0.75–1.5) changes space without changing heights. Base text defaults to `1rem`. Relative length bounds use `rem` endpoints in generated CSS.
+Palette generation decisions exist only in the JSON recipe; edit it and regenerate to change resolved colors. Geometry, material and motion properties feed the included CSS recipe. `--ui-control-size` remains a derived public height role: author numeric roominess (default 2.5, range 2–4) instead of an absolute control size. Spacing (default 1, range 0.75–1.5) changes space without changing heights. Base text defaults to `16px` and sets the document root. Type and geometry derive from `1rem` once; the base editor accepts only px. Other relative length inputs preserve their units; editor ranges convert through the chosen root, and generated guards keep the documented pixel bounds. Visible size samples report actual rem/px heights. Set the base on `:root`; opposite-mode boundaries retain that same rem root.
 
-Before 1.0 there are no compatibility aliases. Migrate recipe `density` to `spacing` and CSS `--ui-density` to `--ui-spacing`. Replace length-valued recipe `control-size` with numeric `control-roominess` by dividing the desired medium height by base text size: `40px / 16px` becomes `2.5`.
+Before 1.0 there are no compatibility aliases. Migrate recipe `density` to `spacing` and CSS `--ui-density` to `--ui-spacing`. Replace length-valued recipe `control-size` with numeric `control-roominess` by dividing the desired medium height by base text size: `40px / 16px` becomes `2.5`. Base `text-size` is now px-only and sets the document root. Replace older relative base values with an explicit px value using their original root; no compatibility conversion guesses it.
 
 ## Choose fonts
 

package/docs/catalog.json

@@ -443,7 +443,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "groups": [
     {
       "id": "layout",
@@ -729,7 +729,7 @@
             "name": "--ui-border-width"
           },
           {
-            "name": "--ui-font-size"
+            "name": "--ui-font-size-md"
           },
           {
             "name": "--ui-font-size-sm"
@@ -975,7 +975,7 @@
             "name": "--ui-border-width"
           },
           {
-            "name": "--ui-font-size"
+            "name": "--ui-font-size-md"
           },
           {
             "name": "--ui-font-size-xs"

package/docs/customizer-render.mjs

@@ -16,7 +16,7 @@ export function customizerResource(site, input = defaultRecipe()) {
     return example ? `<looma-example-card ${cardFields.filter(key => key !== 'id').map(key => `${key.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase())}="${escape(String(example[key]))}"`).join(' ')} identity="${escape(example.id)}" loading="lazy"></looma-example-card>` : '';
   };
   const renderField = field => {
-    const value = recipe.values[field.id], editor = valueEditor(field, value);
+    const value = recipe.values[field.id], editor = valueEditor(field, value, { remPixels: parseFloat(recipe.values['text-size']) });
     const common = `size="sm" data-token="${field.id}" label="${escape(field.label)}"`;
     let control;
     if (field.type === 'font') {
@@ -45,7 +45,7 @@ export function customizerResource(site, input = defaultRecipe()) {
     'Colour': `${renderPreset('palette', 'overview')}<ui-text variant="caption">Coordinated light and dark ranges.</ui-text><ui-button data-action="refine-palette">Refine palette</ui-button>`,
     'Material': `${renderPreset('material', 'overview')}<ui-text variant="caption">Material and light, shared everywhere.</ui-text><ui-button data-action="refine-material">Refine material & light</ui-button>`,
     'Motion': `<ui-text variant="caption">Open and close this real documentation example to feel the response pace and curve. Reduced motion follows your system preference.</ui-text>${documentationCard('ui-popover')}`,
-    'Size & spacing': `<ui-text variant="caption">Shared size ladder: buttons, fields and swatches align at each step. Touch raises the family together.</ui-text><ui-stack>${['sm','md','lg'].map((size,index) => `<ui-stack gap="xs" data-size-sample="${size}"><ui-text variant="caption">${['Small','Medium','Large'][index]}</ui-text><ui-cluster wrap="nowrap"><ui-button size="${size}">Action</ui-button><ui-input size="${size}" label="${size} size sample" value="Frodo"></ui-input><ui-color-picker size="${size}" label="${size} swatch sample"></ui-color-picker></ui-cluster></ui-stack>`).join('')}</ui-stack><div class="spacing-samples" data-spacing-samples role="img" aria-label="Spacing progression"><span></span><span></span><span></span><span></span></div><ui-disclosure summary="How the scale grows"><ui-stack><p>Control roominess relates every field and button to base text. Size ratio separates small from large. On touch, the whole family grows together to keep targets comfortable. Spacing and its curve shape page rhythm independently.</p>${themeFields.filter(item => ['scale-contrast','space-curve'].includes(item.id)).map(renderField).join('')}</ui-stack></ui-disclosure>`,
+    'Size & spacing': `<ui-text variant="caption">Shared size ladder: buttons, fields and swatches align at each step. Touch raises the family together.</ui-text><ui-stack>${['sm','md','lg'].map((size,index) => `<ui-stack gap="xs" data-size-sample="${size}"><ui-text variant="caption">${['Small','Medium','Large'][index]}<span data-size-readout></span></ui-text><ui-cluster><ui-button size="${size}">Action</ui-button><ui-input size="${size}" style="--ui-input-inline-size: 10ch" label="${size} size sample" value="Frodo"></ui-input><ui-color-picker size="${size}" label="${size} swatch sample"></ui-color-picker></ui-cluster></ui-stack>`).join('')}</ui-stack><div class="spacing-samples" data-spacing-samples role="img" aria-label="Spacing progression"><span></span><span></span><span></span><span></span></div><ui-disclosure summary="How the scale grows"><ui-stack><p>Control roominess relates every field and button to base text. Size ratio separates small from large. On touch, the whole family grows together to keep targets comfortable. Spacing and its curve shape page rhythm independently.</p>${themeFields.filter(item => ['scale-contrast','space-curve'].includes(item.id)).map(renderField).join('')}</ui-stack></ui-disclosure>`,
   };
   const families = [...new Set(themeFields.map(field => field.family))].filter(family => !['Colour', 'Material'].includes(family)).map(family => `<ui-disclosure summary="${family}"><ui-stack>${themeFields.filter(item => item.family === family && !['scale-contrast', 'space-curve'].includes(item.id)).map(renderField).join('')}${supplements[family] ?? ''}</ui-stack></ui-disclosure>`).join('');
   const refinement = (family, content) => `<section data-refinement-view="${family}" hidden tabindex="-1" aria-label="${family === 'material' ? 'Material and light refinement' : 'Palette refinement'}"><ui-stack gap="xl"><ui-cluster justify="between"><ui-button data-action="back">Back to customization</ui-button><ui-button data-action="restore-${family}">Restore ${family} preset</ui-button></ui-cluster><ui-text variant="heading" as="h2">${family === 'material' ? 'Refine material & light' : 'Refine your palette'}</ui-text><p>These are advanced refinements of the same persistent theme. Every change applies throughout your documentation.</p>${renderPreset(family, 'refinement')}${content}</ui-stack></section>`;

package/docs/customizer.js

@@ -29,10 +29,12 @@ export function connect(host) {
   const sayApplied = text => say(theme?.storageAvailable ? text : 'Theme applies to this page. Browser storage is unavailable; download CSS or a recipe to keep it.');
   const fields = new Map(themeFields.map(field => [field.id, field]));
   const unitContext = () => ({ remPixels: parseFloat(view.getComputedStyle(document.documentElement).fontSize) });
+  const editorFor = (field, value) => valueEditor(field, value, { remPixels: parseFloat(recipe.values['text-size']) });
+  let boundsBase;
   const updateControl = (element, value) => {
     const field = fields.get(element.dataset.token);
     if (!field || !element.dataset.editorKind) { componentRegistry.update(element, { value }); return; }
-    const editor = valueEditor(field, value);
+    const editor = editorFor(field, value);
     if (element.dataset.editorKind === 'curve') {
       element.closest('[data-curve-for]').hidden = editor.kind !== 'curve';
       if (editor.kind === 'curve') componentRegistry.update(element, { value });
@@ -40,13 +42,33 @@ export function connect(host) {
   };
   const updateUnits = () => {
     for (const control of root.querySelectorAll('[data-unit-for]')) {
-      const field = fields.get(control.dataset.unitFor), editor = valueEditor(field, recipe.values[field.id]);
+      const field = fields.get(control.dataset.unitFor), editor = editorFor(field, recipe.values[field.id]);
       if (![...control.options].some(option => option.value === editor.unit)) control.add(new view.Option(editor.unit, editor.unit));
       componentRegistry.update(control, { value: editor.unit });
     }
   };
+  const updateSizes = () => {
+    const samples = [...root.querySelectorAll('[data-size-sample]')].filter(sample => sample.getClientRects().length);
+    if (!samples.length) return;
+    const base = parseFloat(view.getComputedStyle(document.documentElement).fontSize);
+    const rounded = value => Number(value.toFixed(2));
+    for (const sample of samples) {
+      const button = sample.querySelector('button');
+      if (button) {
+        const height = button.getBoundingClientRect().height;
+        sample.querySelector('[data-size-readout]').textContent = ` · ${rounded(height / base)}rem (${rounded(height)}px)`;
+      }
+    }
+  };
   const paint = () => {
     const css = theme?.css || themeCSS(recipe);
+    if (boundsBase !== recipe.values['text-size']) {
+      boundsBase = recipe.values['text-size'];
+      for (const control of root.querySelectorAll('[data-token]')) {
+        const field = fields.get(control.dataset.token);
+        if (field?.type.includes('length') && field.id !== 'text-size') updateControl(control, recipe.values[field.id]);
+      }
+    }
     for (const family of ['material','palette']) {
       const state = refinementState(recipe, family), presets = family === 'material' ? materialPresets : themePalettes;
       for (const select of root.querySelectorAll(`[data-refinement-preset="${family}"]`)) {
@@ -73,6 +95,7 @@ export function connect(host) {
       : 'Finish catches the light. Spread shapes its reflection; strength affects reflection, edge light and glow together.';
     const gaps = root.querySelector('[data-spacing-samples]');
     gaps.setAttribute('aria-label', `Spacing progression with curve ${recipe.values['space-curve']}`);
+    updateSizes();
   };
   const show = (next, persist = true) => {
     recipe = validateRecipe(next);
@@ -310,6 +333,7 @@ export function connect(host) {
     selectedExample = event.detail.value ?? '';
     filterExamples();
   };
+  root.addEventListener('toggle', updateSizes, true);
   root.addEventListener('looma-example-remove', remove);
   root.addEventListener('input', input);
   root.addEventListener('cancel', cancel);
@@ -334,5 +358,5 @@ export function connect(host) {
       root.querySelector('[data-action="save"]').hidden = false;
     }).catch(error => { if (alive && error.name !== 'AbortError') say(error.message, true); });
   }
-  return () => { flush(); clearComparison(); root.removeEventListener('cancel', cancel); root.removeEventListener('keydown', keyboard); alive = false; abort.abort(); root.removeEventListener('looma-example-remove', remove); root.removeEventListener('input', input); root.removeEventListener('value-change', selectExample); root.removeEventListener('value-change', selectFont); root.removeEventListener('blur', blur, true); root.removeEventListener('change', change); root.removeEventListener('click', click); view.removeEventListener('beforeunload', flush); view.removeEventListener('message', ready); view.removeEventListener(themeEvent, synchronize); };
+  return () => { root.removeEventListener('toggle', updateSizes, true); flush(); clearComparison(); root.removeEventListener('cancel', cancel); root.removeEventListener('keydown', keyboard); alive = false; abort.abort(); root.removeEventListener('looma-example-remove', remove); root.removeEventListener('input', input); root.removeEventListener('value-change', selectExample); root.removeEventListener('value-change', selectFont); root.removeEventListener('blur', blur, true); root.removeEventListener('change', change); root.removeEventListener('click', click); view.removeEventListener('beforeunload', flush); view.removeEventListener('message', ready); view.removeEventListener(themeEvent, synchronize); };
 }

package/docs/theme.mjs

@@ -19,7 +19,7 @@ export const themeFields = [
   ['Colour', 'palette-relationship', 'Palette relationship', null, 'choice', 'preserve', 'Keep seed hues, or relate quiet surfaces to the brand through neighboring or complementary hues.'],
   ['Type', 'body-font', 'Body font', '--ui-font-sans', 'font', 'system-ui, sans-serif', 'The shared interface typeface.'],
   ['Type', 'display-font', 'Display font', '--ui-font-display', 'font', 'system-ui, sans-serif', 'The heading typeface.'],
-  ['Type', 'text-size', 'Text size', '--ui-font-size', 'positive-length', '1rem', 'Base type and choice-mark size. Accepts native CSS lengths, such as 1rem.'],
+  ['Type', 'text-size', 'Base text size', '--ui-font-size', 'positive-length', '16px', 'Sets the document root in px. Type, spacing and layout use rem relationships and scale from this base once.'],
   ['Type', 'text-weight', 'Emphasis weight', '--ui-font-medium', 'weight', '500', 'Control-label emphasis; body and headings keep their roles.'],
   ['Size & spacing', 'control-roominess', 'Control roominess', '--ui-control-roominess', 'positive', '2.5', 'Shared control height as a multiple of base text size; buttons, fields and swatches stay aligned.'],
   ['Size & spacing', 'spacing', 'Spacing', '--ui-spacing', 'positive', '1', 'More or less breathing room throughout the interface.'],
@@ -161,6 +161,7 @@ export function validateRecipe(input) {
         if (field.type === 'weight') valid &&= number >= 1 && number <= 1000;
       }
     }
+    if (field.id === 'text-size' && valid && !value.endsWith('px')) throw new Error('Base text size: enter a px value for the document root.');
     if (!valid) throw new Error(`${field.label}: enter a valid ${field.type.replaceAll('-', ' ')} value.`);
     if (Object.hasOwn(bounds, field.id)) {
       const number = boundedNumber(field, value), [min, max] = bounds[field.id];
@@ -210,7 +211,7 @@ export function deriveTheme(input, { mode } = {}) {
   const tokens = Object.fromEntries(themeFields.filter(field => field.property).map(field => [field.property, values[field.id]]));
   for (const field of themeFields.filter(field => field.type.includes('length') && Object.hasOwn(bounds, field.id))) {
     if (boundedNumber(field, values[field.id]) === undefined) {
-      const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min / 16}rem, ${values[field.id]}, ${max / 16}rem)`;
+      const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min}px, ${values[field.id]}, ${max}px)`;
     }
   }
   const cacheKey = JSON.stringify([mode, ...paletteKeys.map(key => values[key])]);

package/docs/value-editors.mjs

@@ -3,14 +3,15 @@ const lengthUnits = { px: 1, rem: 16, em: 16, cm: 96 / 2.54, mm: 96 / 25.4, Q: 9
 const timeUnits = { ms: 1, s: 1000 };
 const rounded = value => String(Number(Number(value).toFixed(6)));
 
-export function valueEditor(field, value) {
+export function valueEditor(field, value, { remPixels = 16 } = {}) {
+  if (field.id === 'text-size') return { kind: 'number', value, unit: 'px', min: field.min, max: field.max, step: 1 };
   if (field.type === 'choice') return { kind: 'choice', value };
   if (field.type === 'easing') return { kind: /^step-/.test(value) ? 'text' : 'curve', value };
   if (['colour', 'font'].includes(field.type)) return { kind: 'text', value };
   if (field.type.includes('length') || field.type === 'time') {
     const unit = value.match(/[a-z]+$/i)?.[0] ?? 'px';
-    // Relative limits stay root-scaled when the user enlarges their default font.
-    const units = field.type === 'time' ? timeUnits : lengthUnits;
+    // Convert authoring limits against the same root as the displayed quantity.
+    const units = field.type === 'time' ? timeUnits : { ...lengthUnits, rem: remPixels };
     const factor = units[unit];
     return { kind: 'number', value: value === '0' ? '0px' : value, unit,
       min: factor ? field.min / factor : .001, max: factor ? field.max / factor : 1000000,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -127,7 +127,7 @@
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
     "vue": "^3.5.43",
-    "markupress": "^0.8.6",
+    "markupress": "^0.8.7",
     "@nextwebwg/htmlkit": "1.0.0-alpha.69",
     "vite": "^8.3.4"
   },

package/styles/ui-avatar-group.css

@@ -70,7 +70,7 @@
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Matches the xs Avatar's initials. */
-      font-size: calc(var(--ui-font-size) * 0.5625);
+      font-size: calc(var(--ui-font-size-md) * 0.5625);
       line-height: 1;
     }
 

package/styles/ui-avatar.css

@@ -60,7 +60,7 @@
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
-      font-size: calc(var(--ui-font-size) * 0.5625);
+      font-size: calc(var(--ui-font-size-md) * 0.5625);
       letter-spacing: 0.02em;
     }
 

package/theme-system.css

@@ -5,7 +5,8 @@
 /* Reserve the same order when the remembered theme arrives before baseline CSS. */
 @layer tokens, base, theme, components;
 
-@property --ui-font-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
+/* Keep the root font seed unregistered: a registered rem length used by root
+   font-size creates a dependency cycle (CSS Properties and Values API 2.7.2). */
 @property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
 @property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --ui-border-width { syntax: "<length>"; inherits: true; initial-value: 1px; }
@@ -33,9 +34,9 @@
   :where(:root, [data-theme], [data-contrast]) {
     /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
-    --ui-control-size: calc(var(--ui-font-size) * var(--ui-control-roominess));
+    --ui-control-size: calc(1rem * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
-    --_ui-theme-unit: calc(var(--ui-font-size) * 0.25 * max(0, var(--ui-spacing)));
+    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)));
     --_ui-theme-curve: max(0, var(--ui-space-curve));
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
@@ -53,7 +54,7 @@
     --ui-control-inset-block-sm: max(0px, calc((var(--ui-control-size-sm) - var(--ui-font-size-sm) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
     --ui-control-inset-block-md: max(0px, calc((var(--ui-control-size-md) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
     --ui-control-inset-block-lg: max(0px, calc((var(--ui-control-size-lg) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
-    --ui-font-size-xs: max(12px, calc(var(--ui-font-size) * 0.75));
+    --ui-font-size-xs: max(12px, calc(1rem * 0.75));
     --ui-action-inset-sm: var(--ui-space-2);
     --ui-action-inset-md: var(--ui-space-3);
     --ui-action-inset-lg: var(--ui-space-4);

package/tokens.css

@@ -25,6 +25,9 @@
     --ui-text: #1a1a1a;
     --ui-focus-halo: 0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
 
+    /* The base type token owns the document root; rem-based roles scale from it once. */
+    font-size: var(--ui-font-size);
+
     /* Type. */
     --ui-font-sans:
       system-ui,
@@ -38,7 +41,7 @@
       "Apple Color Emoji",
       "Segoe UI Emoji";
     --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-    --ui-font-size: 1rem;
+    --ui-font-size: 16px;
     --ui-font-medium: 500;
     --ui-line-height: 1.4;
 
@@ -92,14 +95,14 @@
     --ui-accent-line-width: var(--ui-border-width);
 
     /* 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);
+    --ui-font-size-2xs: calc(1rem * 0.6875);
+    --ui-font-size-xs: calc(1rem * 0.75);
     /* 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);
-    --ui-font-size-2xl: calc(var(--ui-font-size) * 1.5);
+    --ui-font-size-sm: calc(1rem * 0.875);
+    --ui-font-size-md: 1rem;
+    --ui-font-size-lg: calc(1rem * 1.125);
+    --ui-font-size-xl: calc(1rem * 1.25);
+    --ui-font-size-2xl: calc(1rem * 1.5);
     --ui-line-height-tight: 1.2;
     --ui-line-height-md: var(--ui-line-height);
     /* Prose, not controls: the editor's document body reads at a looser line height. */
@@ -260,14 +263,14 @@
     --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
     /* Choice marks follow typography; row heights follow the shared control scale. */
-    --ui-choice-mark-size: calc(var(--ui-font-size) * 1.125);
-    --ui-choice-track-height: calc(var(--ui-font-size) * 1.5);
-    --ui-choice-track-width: calc(var(--ui-font-size) * 2.5);
+    --ui-choice-mark-size: calc(1rem * 1.125);
+    --ui-choice-track-height: calc(1rem * 1.5);
+    --ui-choice-track-width: calc(1rem * 2.5);
 
     /* Icon sizes, used by icon buttons and field affordances. */
-    --ui-icon-size-sm: var(--ui-font-size);
-    --ui-icon-size-md: calc(var(--ui-font-size) * 1.25);
-    --ui-icon-size-lg: calc(var(--ui-font-size) * 1.5);
+    --ui-icon-size-sm: 1rem;
+    --ui-icon-size-md: calc(1rem * 1.25);
+    --ui-icon-size-lg: calc(1rem * 1.5);
 
     /* Anticipatory interaction: guide → near → direct. */
     --ui-affordance-guide-size: var(--ui-space-1);
@@ -392,7 +395,7 @@
     background-color: var(--ui-control-surface);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: calc(var(--ui-font-size) * 0.7);
+    background-size: calc(1rem * 0.7);
   }
 
   [data-ui-choice-option][data-multiple][aria-selected="true"]::before {

package/vue/UiAvatar.vue

@@ -366,7 +366,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     letter-spacing: 0.02em;
   }
 

package/vue/UiAvatarGroup.vue

@@ -301,7 +301,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Matches the xs Avatar's initials. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     line-height: 1;
   }
 

package/vue/chunks/UiAvatar.js

@@ -336,6 +336,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-befec7d5"]]);
+}), [["__scopeId", "data-v-d03c9917"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -229,6 +229,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-2446552a"]]);
+}), [["__scopeId", "data-v-a5b0148e"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/components.css

@@ -180,7 +180,7 @@ svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     letter-spacing: 0.02em;
 }
 :scope[data-ui-avatar-state~="hasImage"]:where([data-hn-ui-avatar]) {
@@ -297,7 +297,7 @@ svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Matches the xs Avatar's initials. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     line-height: 1;
 }
 .overflow[hidden]:where([data-hn-ui-avatar-group]) {