@threadlabs/looma 0.21.3 → 0.21.4

package/package.json

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

package/styles/ui-avatar.css

@@ -36,6 +36,8 @@
       font: inherit;
       font-size: var(--ui-font-size-sm);
       font-weight: 600;
+      /* The initials centre in the circle wherever it sits, whatever line height surrounds it. */
+      line-height: 1;
       text-transform: uppercase;
     }
 
@@ -50,7 +52,9 @@
       --_ui-default-icon-size: 0.75rem;
       inline-size: 1.25rem;
       block-size: 1.25rem;
-      font-size: var(--ui-font-size-2xs);
+      /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
+      font-size: calc(var(--ui-font-size) * 0.5625);
+      letter-spacing: 0.02em;
     }
 
     :scope[data-ui-avatar-state~="hasImage"] {

package/vue/UiAvatar.vue

@@ -239,6 +239,8 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   font: inherit;
   font-size: var(--ui-font-size-sm);
   font-weight: 600;
+  /* The initials centre in the circle wherever it sits, whatever line height surrounds it. */
+  line-height: 1;
   text-transform: uppercase;
 }
 
@@ -253,7 +255,9 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   --_ui-default-icon-size: 0.75rem;
   inline-size: 1.25rem;
   block-size: 1.25rem;
-  font-size: var(--ui-font-size-2xs);
+  /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
+  font-size: calc(var(--ui-font-size) * 0.5625);
+  letter-spacing: 0.02em;
 }
 
 [data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"] {

package/vue/chunks/UiAvatar.js

@@ -186,6 +186,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-42e2a578"]]);
+}), [["__scopeId", "data-v-4934b13f"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/components.css

@@ -134,7 +134,7 @@ svg[data-v-fdb3ee4b] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-avatar"][data-v-42e2a578] {
+[data-component~="ui-avatar"][data-v-4934b13f] {
   --_ui-default-icon-size: 1.25rem;
   display: inline-grid;
   place-items: center;
@@ -152,40 +152,44 @@ svg[data-v-fdb3ee4b] {
   font: inherit;
   font-size: var(--ui-font-size-sm);
   font-weight: 600;
+  /* The initials centre in the circle wherever it sits, whatever line height surrounds it. */
+  line-height: 1;
   text-transform: uppercase;
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-42e2a578] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-4934b13f] {
   --_ui-default-icon-size: 1rem;
   inline-size: 1.75rem;
   block-size: 1.75rem;
   font-size: var(--ui-font-size-xs);
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"][data-v-42e2a578] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"][data-v-4934b13f] {
   --_ui-default-icon-size: 0.75rem;
   inline-size: 1.25rem;
   block-size: 1.25rem;
-  font-size: var(--ui-font-size-2xs);
+  /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
+  font-size: calc(var(--ui-font-size) * 0.5625);
+  letter-spacing: 0.02em;
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-42e2a578] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-4934b13f] {
   border-color: var(--ui-avatar-border, var(--ui-border-strong));
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-42e2a578] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-4934b13f] {
   border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
 }
 
 /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
    outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
-[data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-42e2a578] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-4934b13f] {
   outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
   outline-offset: 1px;
 }
-.image[data-v-42e2a578],img[data-v-42e2a578-s] {
+.image[data-v-4934b13f],img[data-v-4934b13f-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-42e2a578] {
+.fallback[data-v-4934b13f] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -198,7 +202,7 @@ svg[data-v-fdb3ee4b] {
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-.fallback[data-v-42e2a578] {
+.fallback[data-v-4934b13f] {
     display: block;
     text-align: center;
     align-content: center;
@@ -206,12 +210,12 @@ svg[data-v-fdb3ee4b] {
     text-box-edge: cap alphabetic;
 }
 }
-[hidden][data-v-42e2a578] {
+[hidden][data-v-4934b13f] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-42e2a578] {
+[data-component~="ui-avatar"][hidden][data-v-4934b13f] {
   display: none;
 }