@threadlabs/looma 0.21.2 → 0.21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.21.2",
+  "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;
     }
 
@@ -46,6 +48,15 @@
       font-size: var(--ui-font-size-xs);
     }
 
+    :scope[data-ui-avatar-state~="size=xs"] {
+      --_ui-default-icon-size: 0.75rem;
+      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);
+      letter-spacing: 0.02em;
+    }
+
     :scope[data-ui-avatar-state~="hasImage"] {
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }

package/vanilla/UiAvatar.d.ts

@@ -12,7 +12,7 @@ export interface UiAvatarProps {
   fallback?: string | null;
   name?: string | null;
   shape?: "circle" | "square" | null;
-  size?: "sm" | "md" | null;
+  size?: "xs" | "sm" | "md" | null;
   src?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiAvatar.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar/ui-avatar.js";
 import "../styles/ui-avatar.css";
 
-const definition = {...{"contract":{"tag":"ui-avatar","props":{"active":{"type":"boolean","required":false,"target":{"attribute":"active"},"default":false},"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"decorative":{"type":"boolean","required":false,"target":{"attribute":"decorative"},"default":false},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"shape":{"type":{"kind":"terminal","name":"keyword"},"values":["circle","square"],"required":false,"target":{"attribute":"shape"},"default":"circle"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"},"src":{"type":"string","required":false,"target":{"attribute":"src"}}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"},{"kind":"element","name":"img","attributes":[{"kind":"literal","name":"class","value":"image"},{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"literal","name":"alt","value":""},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"attribute","name":"hidden","expression":"hasAuthoredImage or not hasImage","expressionPlan":{"source":"hasAuthoredImage or not hasImage","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"hasAuthoredImage"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasImage"}}},"dependencies":["hasAuthoredImage","hasImage"]}}],"children":[],"ref":"image"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"aria-hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"attribute","name":"hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"showGlyph","expressionPlan":{"source":"showGlyph","ast":{"kind":"id","name":"showGlyph"},"dependencies":["showGlyph"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"not showGlyph","expressionPlan":{"source":"not showGlyph","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"showGlyph"}},"dependencies":["showGlyph"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"user-round"}],"children":[]}]}]}]},"declarations":[{"kind":"state","name":"hasImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"hasAuthoredImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"initials","expression":{"source":"'?'","ast":{"kind":"literal","value":"?"},"dependencies":[]}},{"kind":"state","name":"showGlyph","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-avatar","props":{"active":{"type":"boolean","required":false,"target":{"attribute":"active"},"default":false},"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"decorative":{"type":"boolean","required":false,"target":{"attribute":"decorative"},"default":false},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"shape":{"type":{"kind":"terminal","name":"keyword"},"values":["circle","square"],"required":false,"target":{"attribute":"shape"},"default":"circle"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"},"src":{"type":"string","required":false,"target":{"attribute":"src"}}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"},{"kind":"element","name":"img","attributes":[{"kind":"literal","name":"class","value":"image"},{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"literal","name":"alt","value":""},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"attribute","name":"hidden","expression":"hasAuthoredImage or not hasImage","expressionPlan":{"source":"hasAuthoredImage or not hasImage","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"hasAuthoredImage"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasImage"}}},"dependencies":["hasAuthoredImage","hasImage"]}}],"children":[],"ref":"image"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"aria-hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"attribute","name":"hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"showGlyph","expressionPlan":{"source":"showGlyph","ast":{"kind":"id","name":"showGlyph"},"dependencies":["showGlyph"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"not showGlyph","expressionPlan":{"source":"not showGlyph","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"showGlyph"}},"dependencies":["showGlyph"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"user-round"}],"children":[]}]}]}]},"declarations":[{"kind":"state","name":"hasImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"hasAuthoredImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"initials","expression":{"source":"'?'","ast":{"kind":"literal","value":"?"},"dependencies":[]}},{"kind":"state","name":"showGlyph","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatar(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiAvatar.d.ts

@@ -29,7 +29,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"sm" | "md" | null>;
+        type: PropType<"xs" | "sm" | "md" | null>;
         default: string;
     };
     src: {
@@ -62,7 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"sm" | "md" | null>;
+        type: PropType<"xs" | "sm" | "md" | null>;
         default: string;
     };
     src: {
@@ -76,7 +76,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     active: boolean | null;
     decorative: boolean | null;
     fallback: string | null;
-    size: "sm" | "md" | null;
+    size: "xs" | "sm" | "md" | null;
     src: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiAvatar.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   fallback: { type: null as unknown as PropType<string | null>, default: '' },
   name: { type: null as unknown as PropType<string | null>, default: '' },
   shape: { type: null as unknown as PropType<'circle' | 'square' | null>, default: 'circle' },
-  size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
+  size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | null>, default: 'md' },
   src: { type: null as unknown as PropType<string | null>, default: null },
 })
 const checkedProps = computed(() => ({
@@ -67,14 +67,14 @@ const checkedProps = computed(() => ({
     undefined,
     ['circle', 'square'],
   ) as 'circle' | 'square',
-  size: checkedProp<'sm' | 'md'>(
+  size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     undefined,
-    ['sm', 'md'],
-  ) as 'sm' | 'md',
+    ['xs', 'sm', 'md'],
+  ) as 'xs' | 'sm' | 'md',
   src: checkedProp<string>(
     props['src'],
     { kind: 'terminal', name: 'string' },
@@ -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;
 }
 
@@ -249,6 +251,15 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   font-size: var(--ui-font-size-xs);
 }
 
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"] {
+  --_ui-default-icon-size: 0.75rem;
+  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);
+  letter-spacing: 0.02em;
+}
+
 [data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"] {
   border-color: var(--ui-avatar-border, var(--ui-border-strong));
 }

package/vue/UiSwitcher.d.ts

@@ -41,7 +41,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     align: "center" | "start" | "stretch" | "end" | null;
     gap: "s" | "xs" | "m" | "l" | "xl" | null;
     limit: number | null;
-    threshold: "sm" | "md" | "lg" | "xs" | null;
+    threshold: "xs" | "sm" | "md" | "lg" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiText.d.ts

@@ -82,7 +82,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    size: "inherit" | "sm" | "md" | "lg" | "xs" | null;
+    size: "inherit" | "xs" | "sm" | "md" | "lg" | null;
     tone: "secondary" | "default" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
     variant: "code" | "body" | "eyebrow" | null;
     align: "center" | "start" | null;

package/vue/chunks/UiAvatar.js

@@ -88,7 +88,11 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, ["sm", "md"]),
+			}, false, "size", void 0, [
+				"xs",
+				"sm",
+				"md"
+			]),
 			src: checkedProp(props["src"], {
 				kind: "terminal",
 				name: "string"
@@ -182,6 +186,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-925a362e"]]);
+}), [["__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-925a362e] {
+[data-component~="ui-avatar"][data-v-4934b13f] {
   --_ui-default-icon-size: 1.25rem;
   display: inline-grid;
   place-items: center;
@@ -152,34 +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-925a362e] {
+[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~="hasImage"][data-v-925a362e] {
+[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;
+  /* 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-4934b13f] {
   border-color: var(--ui-avatar-border, var(--ui-border-strong));
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-925a362e] {
+[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-925a362e] {
+[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-925a362e],img[data-v-925a362e-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-925a362e] {
+.fallback[data-v-4934b13f] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -192,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-925a362e] {
+.fallback[data-v-4934b13f] {
     display: block;
     text-align: center;
     align-content: center;
@@ -200,12 +210,12 @@ svg[data-v-fdb3ee4b] {
     text-box-edge: cap alphabetic;
 }
 }
-[hidden][data-v-925a362e] {
+[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-925a362e] {
+[data-component~="ui-avatar"][hidden][data-v-4934b13f] {
   display: none;
 }