@threadlabs/looma 0.13.0 → 0.13.1

package/package.json

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

package/styles/ui-avatar-group.css

@@ -49,6 +49,12 @@
       flex-shrink: 0;
     }
 
+    :scope[data-ui-avatar-group-state~="size=sm"] .overflow {
+      margin-inline-start: -0.25rem;
+      inline-size: 1.75rem;
+      block-size: 1.75rem;
+    }
+
     .overflow[hidden] {
       display: none;
     }

package/vanilla/UiAvatarGroup.d.ts

@@ -8,6 +8,7 @@ export interface UiAvatarGroupElement extends HTMLDivElement {
 export interface UiAvatarGroupProps {
   label?: string | null;
   max?: number | null;
+  size?: "sm" | "md" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiAvatarGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
 import "../styles/ui-avatar-group.css";
 
-const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatarGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vue/UiAvatarGroup.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     label?: string;
     max?: number;
+    size?: 'sm' | 'md';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -8,6 +9,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     label: string;
+    size: "sm" | "md";
     max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiAvatarGroup.vue

@@ -1,6 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-avatar-group/ui-avatar-group.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -10,10 +10,12 @@ const props = withDefaults(
   defineProps<{
     label?: string
     max?: number
+    size?: 'sm' | 'md'
   }>(),
   {
     label: 'People',
     max: 5,
+    size: 'md',
   },
 )
 
@@ -21,6 +23,13 @@ const root = ref<HTMLElement | null>(null)
 const overflowElement = useTemplateRef<HTMLElement>('overflow')
 const overflowCount = ref(0)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -33,7 +42,14 @@ useComponentHost(controllerModule.default, {
 </script>
 
 <template>
-  <div data-component="ui-avatar-group" role="group" v-bind="$attrs" :aria-label="label" ref="root">
+  <div
+    data-component="ui-avatar-group"
+    role="group"
+    v-bind="$attrs"
+    :aria-label="label"
+    :data-ui-avatar-group-state="hostState || undefined"
+    ref="root"
+  >
     <slot />
     <span
       class="overflow"
@@ -104,6 +120,12 @@ useComponentHost(controllerModule.default, {
   flex-shrink: 0;
 }
 
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=sm"] .overflow {
+  margin-inline-start: -0.25rem;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+
 .overflow[hidden] {
   display: none;
 }

package/vue/chunks/UiAvatarGroup.js

@@ -1,9 +1,9 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.js";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["aria-label", "data-ui-avatar-group-state"];
 var _hoisted_2 = ["hidden", "aria-label"];
 //#endregion
 //#region .build/vue/UiAvatarGroup.vue
@@ -12,13 +12,16 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	__name: "UiAvatarGroup",
 	props: {
 		label: { default: "People" },
-		max: { default: 5 }
+		max: { default: 5 },
+		size: { default: "md" }
 	},
 	setup(__props) {
 		const props = __props;
 		const root = ref(null);
 		const overflowElement = useTemplateRef("overflow");
 		const overflowCount = ref(0);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -33,6 +36,7 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				role: "group"
 			}, _ctx.$attrs, {
 				"aria-label": __props.label,
+				"data-ui-avatar-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
@@ -44,6 +48,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-5e4b76ea"]]);
+}), [["__scopeId", "data-v-c2d41fb1"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/components.css

@@ -166,7 +166,7 @@
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-avatar-group"][data-v-5e4b76ea] {
+[data-component~="ui-avatar-group"][data-v-c2d41fb1] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
   --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
@@ -184,15 +184,15 @@
 
 /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
  * component roots outside this style scope. */
-[data-v-5e4b76ea-s] {
+[data-v-c2d41fb1-s] {
   margin-inline-start: -0.5rem;
   flex-shrink: 0;
   border-radius: 999px;
 }
-[data-v-5e4b76ea-s]:first-child {
+[data-v-c2d41fb1-s]:first-child {
   margin-inline-start: 0;
 }
-.overflow[data-v-5e4b76ea] {
+.overflow[data-v-c2d41fb1] {
   margin-inline-start: -0.5rem;
   display: inline-flex;
   align-items: center;
@@ -211,12 +211,17 @@
   font-weight: 600;
   flex-shrink: 0;
 }
-.overflow[hidden][data-v-5e4b76ea] {
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=sm"] .overflow[data-v-c2d41fb1] {
+  margin-inline-start: -0.25rem;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+.overflow[hidden][data-v-c2d41fb1] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar-group"][hidden][data-v-5e4b76ea] {
+[data-component~="ui-avatar-group"][hidden][data-v-c2d41fb1] {
   display: none;
 }