@threadlabs/looma 0.12.5 → 0.12.7

package/package.json

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

package/styles/ui-avatar.css

@@ -16,6 +16,19 @@
       text-transform: uppercase;
     }
 
+    :scope[data-ui-avatar-state~="size=sm"] {
+      inline-size: 1.75rem;
+      block-size: 1.75rem;
+      font-size: var(--ui-font-size-xs);
+    }
+
+    /* 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. */
+    :scope[data-ui-avatar-state~="active"] {
+      outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+      outline-offset: 1px;
+    }
+
     .fallback {
       grid-area: 1 / 1;
       display: inline-flex;
@@ -48,7 +61,10 @@
     }
 }
 @scope ([data-component~="ui-avatar"]) to ([data-component]) {
-.image,
+/* 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. */
+
+    .image,
     :where([data-slotted], [data-slotted] *):is(img) {
       grid-area: 1 / 1;
       inline-size: 100%;

package/styles/ui-checkbox.css

@@ -98,7 +98,7 @@
     }
 
     :scope[data-ui-checkbox-state~="disabled"] {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
     :scope[data-ui-checkbox-state~="disabled"] input {

package/styles/ui-combobox.css

@@ -129,7 +129,7 @@
       box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     input:disabled, button:disabled {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
     .field:has(input:disabled) {
@@ -167,7 +167,7 @@
       outline-offset: -1px;
     }
     .option[aria-disabled="true"] {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
     .primary {

package/styles/ui-disclosure.css

@@ -51,7 +51,7 @@
       box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     .trigger:disabled {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 

package/styles/ui-editable.css

@@ -120,7 +120,7 @@
     }
 
     :scope[data-ui-editable-state~="disabled"] .preview {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 

package/styles/ui-input.css

@@ -59,7 +59,7 @@
 
     :scope:disabled {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }

package/styles/ui-radio.css

@@ -47,7 +47,7 @@
     }
 
     :scope[data-ui-radio-state~="disabled"] {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
     :scope[data-ui-radio-state~="disabled"] input {

package/styles/ui-select.css

@@ -60,7 +60,7 @@
 
     :scope:disabled {
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }

package/styles/ui-switch.css

@@ -78,7 +78,7 @@
     }
 
     :scope[data-ui-switch-state~="disabled"] {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
     :scope[data-ui-switch-state~="disabled"] input {

package/styles/ui-textarea.css

@@ -58,7 +58,7 @@
 
     :scope:disabled {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }

package/theme-dark.css

@@ -1,6 +1,6 @@
 @layer base {
   @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
+    :root:not([data-theme], [data-contrast="high"]) {
       color-scheme: dark;
       /* The same eleven seeds the light theme sets. Every neutral, tint, hover, and disabled
          colour is mixed from these, and the mixes read the scheme from them: toward this ink

package/theme-light.css

@@ -1,5 +1,5 @@
 @layer base {
-  :root:not([data-theme]),
+  :root:not([data-theme], [data-contrast="high"]),
   [data-theme="light"] {
     color-scheme: light;
     /* The seeds, and only the seeds. Neutrals, hovers, tints, and disabled colours are mixed from

package/tokens.css

@@ -122,10 +122,11 @@
     --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
     /* Neutrals: the ink mixed into the page. One ramp, so a theme that changes either end moves
-       every step with it. */
+       every step with it. Muted is the lightest text that still reads at 4.5:1 (WCAG AA) on the
+       sunken surface as well as the page, and secondary sits halfway between it and the ink. */
     --ui-surface-muted: color-mix(in oklab, var(--ui-surface-sunken) 50%, var(--ui-surface));
-    --ui-text-secondary: color-mix(in oklab, var(--ui-text) 72%, var(--ui-surface));
-    --ui-text-muted: color-mix(in oklab, var(--ui-text) 45%, var(--ui-surface));
+    --ui-text-secondary: color-mix(in oklab, var(--ui-text) 80%, var(--ui-surface));
+    --ui-text-muted: color-mix(in oklab, var(--ui-text) 62%, var(--ui-surface));
     --ui-border: color-mix(in oklab, var(--ui-text) 12%, var(--ui-surface));
     --ui-border-strong: color-mix(in oklab, var(--ui-text) 25%, var(--ui-surface));
     --ui-control-border: color-mix(in oklab, var(--ui-text) 48%, var(--ui-surface));
@@ -137,10 +138,11 @@
     --ui-accent-subtle: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-surface));
     --ui-danger-hover: color-mix(in oklab, var(--ui-danger) 86%, var(--ui-text));
 
-    /* Disabled is one decision, not a per-component one: the sunken surface and the muted ink, at
-       full opacity, so a disabled control reads as unavailable rather than as a faded variant. */
+    /* Disabled is one decision, not a per-component one: the sunken surface and a pale ink, at
+       full opacity, so a disabled control reads as unavailable rather than as a faded variant.
+       Lighter than muted text, which must stay readable; disabled text is exempt from contrast. */
     --ui-disabled-surface: var(--ui-surface-sunken);
-    --ui-disabled-text: var(--ui-text-muted);
+    --ui-disabled-text: color-mix(in oklab, var(--ui-text) 45%, var(--ui-surface));
     /* A disabled button keeps its own look, washed out: less colour, less contrast, toward the page.
        A filter rather than a second palette, so every variant and tone fades the same way. */
     --ui-disabled-filter: saturate(0.2) contrast(0.75) brightness(1.25);

package/vanilla/UiAvatar.d.ts

@@ -6,9 +6,11 @@ export interface UiAvatarElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiAvatarEventMap>(type: K, listener: (this: UiAvatarElement, event: UiAvatarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiAvatarProps {
+  active?: boolean | null;
   alt?: string | null;
   fallback?: string | null;
   name?: string | null;
+  size?: "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":{"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"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"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"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":[]}}],"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":""},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"size":{"type":{"enum":["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"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"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":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatar(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vue/UiAvatar.d.ts

@@ -1,7 +1,9 @@
 type __VLS_Props = {
+    active?: boolean;
     alt?: string;
     fallback?: string;
     name?: string;
+    size?: 'sm' | 'md';
     src?: string;
 };
 declare var __VLS_1: {};
@@ -10,8 +12,10 @@ 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<{}>, {
     name: string;
+    active: boolean;
     alt: string;
     fallback: string;
+    size: "sm" | "md";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiAvatar.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/ui-avatar.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -8,15 +8,19 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    active?: boolean
     alt?: string
     fallback?: string
     name?: string
+    size?: 'sm' | 'md'
     src?: string
   }>(),
   {
+    active: false,
     alt: '',
     fallback: '',
     name: '',
+    size: 'md',
   },
 )
 
@@ -26,6 +30,14 @@ const hasImage = ref(false)
 const hasAuthoredImage = ref(false)
 const initials = ref('?')
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    props.active && 'active',
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -38,7 +50,12 @@ useComponentHost(controllerModule.default, {
 </script>
 
 <template>
-  <span data-component="ui-avatar" v-bind="$attrs" ref="root"><slot />
+  <span
+    data-component="ui-avatar"
+    v-bind="$attrs"
+    :data-ui-avatar-state="hostState || undefined"
+    ref="root"
+  ><slot />
     <img
       class="image"
       alt=""
@@ -67,6 +84,19 @@ useComponentHost(controllerModule.default, {
   text-transform: uppercase;
 }
 
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"] {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  font-size: var(--ui-font-size-xs);
+}
+
+/* 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"] {
+  outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+  outline-offset: 1px;
+}
+
 .image,
 :slotted(img) {
   grid-area: 1 / 1;

package/vue/UiButton.d.ts

@@ -17,12 +17,12 @@ 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<{}>, {
     type: "button" | "submit" | "reset";
+    size: "sm" | "md" | "lg";
     tone: "accent" | "neutral" | "danger" | "success" | "warning" | "info";
     variant: "outline" | "solid" | "danger" | "ghost" | "link";
     as: "button" | "a";
     align: "center" | "start";
     disabled: boolean;
-    size: "sm" | "md" | "lg";
     stretch: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiCheckbox.vue

@@ -193,7 +193,7 @@ input:focus-visible {
 }
 
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input {

package/vue/UiCombobox.d.ts

@@ -236,8 +236,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     label: string;
     name: string;
-    disabled: boolean;
     size: "sm" | "md";
+    disabled: boolean;
     required: boolean;
     allowCreate: boolean;
     allowFreeText: boolean;

package/vue/UiCombobox.vue

@@ -795,7 +795,7 @@ button:focus-visible {
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
 input:disabled, button:disabled {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 .field:has(input:disabled) {
@@ -833,7 +833,7 @@ input:disabled, button:disabled {
   outline-offset: -1px;
 }
 .option[aria-disabled="true"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 .primary {

package/vue/UiDisclosure.vue

@@ -155,7 +155,7 @@ useComponentHost(controllerModule.default, {
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
 .trigger:disabled {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 

package/vue/UiEditable.vue

@@ -264,7 +264,7 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 

package/vue/UiIconButton.d.ts

@@ -11,10 +11,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
     variant: "ghost" | "outline" | "solid";
     round: boolean;
     disabled: boolean;
-    size: "sm" | "md" | "lg";
     anticipatory: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiInput.vue

@@ -122,7 +122,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-input"]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }

package/vue/UiRadio.vue

@@ -139,7 +139,7 @@ input:focus-visible {
 }
 
 [data-component~="ui-radio"][data-ui-radio-state~="disabled"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 [data-component~="ui-radio"][data-ui-radio-state~="disabled"] input {

package/vue/UiSelect.vue

@@ -118,7 +118,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-select"]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }

package/vue/UiSwitch.vue

@@ -173,7 +173,7 @@ input:focus-visible {
 }
 
 [data-component~="ui-switch"][data-ui-switch-state~="disabled"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 [data-component~="ui-switch"][data-ui-switch-state~="disabled"] input {

package/vue/UiText.d.ts

@@ -12,11 +12,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "inherit" | "xs" | "sm" | "md" | "lg";
     tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success";
     variant: "body" | "eyebrow" | "code";
     as: "p" | "span" | "div" | "small" | "strong" | "label";
     align: "start" | "center";
-    size: "inherit" | "xs" | "sm" | "md" | "lg";
     truncate: boolean;
     weight: "inherit" | "normal" | "medium" | "semibold";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/vue/UiTextarea.vue

@@ -120,7 +120,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-textarea"]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }

package/vue/chunks/UiAvatar.js

@@ -1,19 +1,25 @@
 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/ui-avatar.js";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["src", "hidden"];
-var _hoisted_2 = ["aria-hidden", "hidden"];
+var _hoisted_1 = ["data-ui-avatar-state"];
+var _hoisted_2 = ["src", "hidden"];
+var _hoisted_3 = ["aria-hidden", "hidden"];
 //#endregion
 //#region .build/vue/UiAvatar.vue
 var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiAvatar",
 	props: {
+		active: {
+			type: Boolean,
+			default: false
+		},
 		alt: { default: "" },
 		fallback: { default: "" },
 		name: { default: "" },
+		size: { default: "md" },
 		src: {}
 	},
 	setup(__props) {
@@ -23,6 +29,8 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hasImage = ref(false);
 		const hasAuthoredImage = ref(false);
 		const initials = ref("?");
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`, props.active && "active"].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -37,6 +45,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-avatar" }, _ctx.$attrs, {
+				"data-ui-avatar-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [
@@ -48,15 +57,15 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					src: __props.src,
 					hidden: hasAuthoredImage.value || !hasImage.value,
 					ref: "image"
-				}, null, 8, _hoisted_1),
+				}, null, 8, _hoisted_2),
 				createElementVNode("span", {
 					class: "fallback",
 					"aria-hidden": hasImage.value,
 					hidden: hasImage.value
-				}, toDisplayString(initials.value), 9, _hoisted_2)
-			], 16);
+				}, toDisplayString(initials.value), 9, _hoisted_3)
+			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ebb1bbbb"]]);
+}), [["__scopeId", "data-v-a5e0e48e"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiCheckbox.js

@@ -94,6 +94,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4d65c3b0"]]);
+}), [["__scopeId", "data-v-cc7306ec"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -479,6 +479,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0bd7ecc4"]]);
+}), [["__scopeId", "data-v-b3cdd263"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiDisclosure.js

@@ -86,6 +86,6 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-54a22a7e"]]);
+}), [["__scopeId", "data-v-af289043"]]);
 //#endregion
 export { UiDisclosure_default as t };

package/vue/chunks/UiEditable.js

@@ -120,6 +120,6 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, "Cancel", -1)])])) : createCommentVNode("v-if", true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8fe1c571"]]);
+}), [["__scopeId", "data-v-3b785d66"]]);
 //#endregion
 export { UiEditable_default as t };

package/vue/chunks/UiInput.js

@@ -61,6 +61,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-e7c851a2"]]);
+}), [["__scopeId", "data-v-08811f22"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiRadio.js

@@ -88,6 +88,6 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f9c61d50"]]);
+}), [["__scopeId", "data-v-c4f88d99"]]);
 //#endregion
 export { UiRadio_default as t };

package/vue/chunks/UiSelect.js

@@ -55,6 +55,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-f9be4ab9"]]);
+}), [["__scopeId", "data-v-e15c964d"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSwitch.js

@@ -89,6 +89,6 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-85cb3260"]]);
+}), [["__scopeId", "data-v-afb9ea1d"]]);
 //#endregion
 export { UiSwitch_default as t };

package/vue/chunks/UiTextarea.js

@@ -64,6 +64,6 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}), null, 16, _hoisted_1)), [[vModelText, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-0352d397"]]);
+}), [["__scopeId", "data-v-860b69d7"]]);
 //#endregion
 export { UiTextarea_default as t };