@threadlabs/looma 0.21.6 → 0.22.0

package/vue/UiAvatar.vue

@@ -1,13 +1,81 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    active: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'active' },
+      description:
+        'Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt\n      ("Ada Lovelace, editing").',
+      default: false,
+    },
+    alt: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'alt' },
+      description:
+        'The avatar\'s accessible name, announced for it as an image. When empty, name is used, then "Avatar". Initials come from name first, so alt supplies them\n      only when name is empty. An authored img carries its own alt instead.',
+      default: '',
+    },
+    decorative: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'decorative' },
+      description:
+        'Hides the avatar from assistive technology when adjacent text already identifies the person.',
+      default: false,
+    },
+    fallback: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'fallback' },
+      description:
+        'Text shown instead of the initials derived from name or alt, whenever there is no image. It is uppercased; keep it to a couple of characters, because the\n      circle clips anything wider.',
+      default: '',
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The person\'s name. The initials are drawn from it: the first letters of the first two words, or the first two letters of a single word. It is also the\n      accessible name when alt is empty.',
+      default: '',
+    },
+    shape: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'shape' },
+      description: 'Circle by default; square uses the theme\'s medium radius.',
+      values: ['circle', 'square'],
+      default: 'circle',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header; xs is\n      1.25rem with small initials, for a person named inline in a line of small text.',
+      values: ['xs', 'sm', 'md'],
+      default: 'md',
+    },
+    src: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'src' },
+      description:
+        'The image to show, cropped to fill the circle. Until it loads, or if it fails, the avatar shows initials instead. An img element authored inside the avatar\n      takes precedence over src.',
+    },
+  },
+}
 const props = defineProps({
   active: { type: null as unknown as PropType<boolean | null>, default: false },
   alt: { type: null as unknown as PropType<string | null>, default: '' },
@@ -24,65 +92,44 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'active',
-    undefined,
-    undefined,
   ) as boolean,
   alt: checkedProp<string>(
     props['alt'],
     { kind: 'terminal', name: 'string' },
     false,
     'alt',
-    undefined,
-    undefined,
   ) as string,
   decorative: checkedProp<boolean>(
     props['decorative'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'decorative',
-    undefined,
-    undefined,
   ) as boolean,
   fallback: checkedProp<string>(
     props['fallback'],
     { kind: 'terminal', name: 'string' },
     false,
     'fallback',
-    undefined,
-    undefined,
   ) as string,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
   shape: checkedProp<'circle' | 'square'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
-    undefined,
-    ['circle', 'square'],
   ) as 'circle' | 'square',
   size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['xs', 'sm', 'md'],
   ) as 'xs' | 'sm' | 'md',
-  src: checkedProp<string>(
-    props['src'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'src',
-    undefined,
-    undefined,
-  ),
+  src: checkedProp<string>(props['src'], { kind: 'terminal', name: 'string' }, false, 'src'),
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -128,6 +175,53 @@ const hasImage = ref(false)
 const hasAuthoredImage = ref(false)
 const initials = ref('?')
 const showGlyph = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (
+    !((hasAuthoredImage.value == null || typeof hasAuthoredImage.value === 'boolean')
+      && (hasImage.value == null || typeof hasImage.value === 'boolean'))
+  ) return guardedPrevious
+  return guardedPrevious = hasAuthoredImage.value || !hasImage.value
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (!(hasImage.value == null || typeof hasImage.value === 'boolean')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = hasImage.value
+})
+let guardedBinding2Previous: any
+const guardedBinding2 = computed(() => {
+  if (!(hasImage.value == null || typeof hasImage.value === 'boolean')) {
+    return guardedBinding2Previous
+  }
+  return guardedBinding2Previous = hasImage.value
+})
+let guardedBinding3Previous: any
+const guardedBinding3 = computed(() => {
+  if (!(showGlyph.value == null || typeof showGlyph.value === 'boolean')) {
+    return guardedBinding3Previous
+  }
+  return guardedBinding3Previous = showGlyph.value
+})
+let guardedBinding4Previous: any
+const guardedBinding4 = computed(() => {
+  if (!(initials.value == null || typeof initials.value === 'string')) {
+    return guardedBinding4Previous
+  }
+  return guardedBinding4Previous = initials.value
+})
+let guardedBinding5Previous: any
+const guardedBinding5 = computed(() => {
+  if (!(showGlyph.value == null || typeof showGlyph.value === 'boolean')) {
+    return guardedBinding5Previous
+  }
+  return guardedBinding5Previous = !showGlyph.value
+})
+provide('html-next:ui-avatar:hasImage', hasImage)
+provide('html-next:ui-avatar:hasAuthoredImage', hasAuthoredImage)
+provide('html-next:ui-avatar:initials', initials)
+provide('html-next:ui-avatar:showGlyph', showGlyph)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -173,6 +267,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   <span
     data-component="ui-avatar"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-active="reflectedProp('active', 'active', checkedProps.active, undefined, false)"
     :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
     :data-decorative="reflectedProp('decorative', 'decorative', checkedProps.decorative, undefined, false)"
@@ -189,13 +284,13 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
       alt=""
       aria-hidden="true"
       :src="checkedProps.src ?? undefined"
-      :hidden="hasAuthoredImage || !hasImage"
+      :hidden="guarded"
       ref="image"
     >
-    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage"><span :hidden="showGlyph">{{
-        initials
-      }}</span>
-      <span :hidden="!showGlyph"><UiIcon name="user-round" /></span></span></span>
+    <span class="fallback" :aria-hidden="guardedBinding" :hidden="guardedBinding2"><span
+        :hidden="guardedBinding3"
+      >{{ guardedBinding4 }}</span>
+      <span :hidden="guardedBinding5"><UiIcon name="user-round" /></span></span></span>
 </template>
 
 <style scoped>

package/vue/UiAvatarGroup.d.ts

@@ -49,8 +49,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     label: string | null;
     size: "xs" | "sm" | "md" | null;
     max: number | null;
-    overflowLabel: string | null;
     total: number | null;
+    overflowLabel: string | 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/UiAvatarGroup.vue

@@ -1,12 +1,56 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description:
+        'The group\'s accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.',
+      default: 'People',
+    },
+    max: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'max' },
+      description:
+        'How many avatars to show. The rest are hidden and counted in a +N badge after the last visible one. Fractions round down, and 0 hides every avatar behind\n      the badge.',
+      default: 5,
+    },
+    overflowLabel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'overflowlabel' },
+      description:
+        'Accessible label for the overflow badge. Replace {count} with the number of people beyond the visible avatars.',
+      default: '{count} more',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size. xs suits a group inside a line of small text, such\n      as the people listed under a title.',
+      values: ['xs', 'sm', 'md'],
+      default: 'md',
+    },
+    total: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'total' },
+      description:
+        'The true number of people when only some avatars are authored. The overflow badge counts the people beyond the visible avatars; it never counts fewer than\n      the authored avatars.',
+    },
+  },
+}
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'People' },
   max: { type: null as unknown as PropType<number | null>, default: 5 },
@@ -20,41 +64,26 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   max: checkedProp<number>(
     props['max'],
     { kind: 'terminal', name: 'number' },
     false,
     'max',
-    undefined,
-    undefined,
   ) as number,
   overflowLabel: checkedProp<string>(
     props['overflowLabel'],
     { kind: 'terminal', name: 'string' },
     false,
     'overflowLabel',
-    undefined,
-    undefined,
   ) as string,
   size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['xs', 'sm', 'md'],
   ) as 'xs' | 'sm' | 'md',
-  total: checkedProp<number>(
-    props['total'],
-    { kind: 'terminal', name: 'integer' },
-    false,
-    'total',
-    undefined,
-    undefined,
-  ),
+  total: checkedProp<number>(props['total'], { kind: 'terminal', name: 'integer' }, false, 'total'),
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -98,6 +127,22 @@ const root = ref<HTMLElement | null>(null)
 const overflowElement = useTemplateRef<HTMLElement>('overflow')
 const overflowCount = ref(0)
 const overflowAnnouncement = ref('')
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(overflowCount.value == null || Number.isInteger(overflowCount.value))) {
+    return guardedPrevious
+  }
+  return guardedPrevious = !overflowCount.value
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (!(overflowAnnouncement.value == null || typeof overflowAnnouncement.value === 'string')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = overflowAnnouncement.value
+})
+provide('html-next:ui-avatar-group:overflowCount', overflowCount)
+provide('html-next:ui-avatar-group:overflowAnnouncement', overflowAnnouncement)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -144,6 +189,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     role="group"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
     :data-overflow-label="reflectedProp('overflowLabel', 'overflow-label', checkedProps.overflowLabel, undefined, false)"
@@ -156,8 +202,8 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     <span
       class="overflow"
       role="img"
-      :hidden="!overflowCount"
-      :aria-label="overflowAnnouncement"
+      :hidden="guarded"
+      :aria-label="guardedBinding"
       ref="overflow"
     >{{ `+${overflowCount}` }}</span>
   </div>

package/vue/UiBadge.vue

@@ -1,11 +1,42 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    shape: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'shape' },
+      description:
+        'Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.',
+      values: ['pill', 'tag'],
+      default: 'pill',
+    },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger\n      mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS\n      colour, which overrides the tone.',
+      values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+      default: 'neutral',
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      Neutral looks the same in solid and subtle.',
+      values: ['solid', 'subtle', 'outline'],
+      default: 'subtle',
+    },
+  },
+}
 const props = defineProps({
   shape: { type: null as unknown as PropType<'pill' | 'tag' | null>, default: 'pill' },
   tone: {
@@ -25,24 +56,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
-    undefined,
-    ['pill', 'tag'],
   ) as 'pill' | 'tag',
   tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
-    undefined,
-    ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
   ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
   variant: checkedProp<'solid' | 'subtle' | 'outline'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
-    undefined,
-    ['solid', 'subtle', 'outline'],
   ) as 'solid' | 'subtle' | 'outline',
 }))
 void checkedProps.value
@@ -115,6 +140,7 @@ const hostState = computed(() =>
   <span
     data-component="ui-badge"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"

package/vue/UiBreadcrumbItem.vue

@@ -1,12 +1,24 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    current: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'current' },
+      description:
+        'Marks the step as the view you are on: it is plain text with aria-current="page". Every other step holds a link.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   current: { type: null as unknown as PropType<boolean | null>, default: false },
 })
@@ -16,8 +28,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'current',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -108,6 +118,7 @@ function attribute(value: unknown): any {
     : attribute(
       (({ true: 'page', false: null }) as Record<string, any>)[`${checkedProps.current ?? ''}`],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-ui-breadcrumb-item-state="hostState || undefined"
   >

package/vue/UiBreadcrumbs.vue

@@ -1,11 +1,22 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'The navigation landmark\'s accessible name.',
+      default: 'Breadcrumb',
+    },
+  },
+}
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'Breadcrumb' },
 })
@@ -15,8 +26,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -80,6 +89,7 @@ if (
     data-component="ui-breadcrumbs"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
     <ol role="list"><slot /></ol>