@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiAffordanceScope.vue

@@ -1,8 +1,14 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -53,59 +59,13 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
 const engaged = ref(false)
 provide('html-next:ui-affordance-scope:engaged', engaged)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-affordance-scope> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-affordance-scope> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('span', 'ui-affordance-scope')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -148,7 +108,7 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
 
 <template>
   <span
-    data-component="ui-affordance-scope"
+    class="ui-affordance-scope"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
@@ -159,23 +119,24 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
 </template>
 
 <style scoped>
-[data-component~="ui-affordance-scope"] {
-  display: contents;
-  --ui-affordance-scope-engaged: 0;
-  --ui-affordance-scope-guide: 1;
-}
-
-[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="engaged"] {
-  --ui-affordance-scope-engaged: 1;
-}
-
 /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
-[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="guide=none"] {
-  --ui-affordance-scope-guide: 0;
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-affordance-scope"][hidden] {
-  display: none;
+
+@scope (.ui-affordance-scope) {
+  :scope:where(:scope) {
+    display: contents;
+    --ui-affordance-scope-engaged: 0;
+    --ui-affordance-scope-guide: 1;
+  }
+  :scope:where(:scope):is([data-ui-affordance-scope-state~="engaged"]) {
+    --ui-affordance-scope-engaged: 1;
+  }
+  :scope:where(:scope):is([data-ui-affordance-scope-state~="guide=none"]) {
+    --ui-affordance-scope-guide: 0;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiAvatar.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     active: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -70,15 +72,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }>> & Readonly<{}>, {
     name: string | null;
     alt: string | null;
+    size: "xs" | "sm" | "md" | null;
     shape: "circle" | "square" | null;
     active: boolean | null;
     decorative: boolean | null;
     fallback: string | null;
-    size: "xs" | "sm" | "md" | null;
     src: string | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (props: {}) => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/vue/UiAvatar.vue

@@ -1,19 +1,14 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
@@ -171,38 +166,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
@@ -211,94 +175,11 @@ const hasImage = ref(false)
 const hasAuthoredImage = ref(false)
 const initials = ref('?')
 const showGlyph = ref(false)
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      hasAuthoredImage.value == null || typeof hasAuthoredImage.value === 'boolean',
-      '$hasAuthoredImage or not $hasImage:hasAuthoredImage',
-      './components/ui-avatar/ui-avatar.html: HR007: Reference hasAuthoredImage does not satisfy its declared type.',
-    )
-      && htmlNextAuthoredCheck2(
-        hasImage.value == null || typeof hasImage.value === 'boolean',
-        '$hasAuthoredImage or not $hasImage:hasImage',
-        './components/ui-avatar/ui-avatar.html: HR007: Reference hasImage does not satisfy its declared type.',
-      ))
-  ) return guardedPrevious
-  return guardedPrevious = hasAuthoredImage.value || !hasImage.value
-})
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      hasImage.value == null || typeof hasImage.value === 'boolean',
-      '$hasImage:hasImage',
-      './components/ui-avatar/ui-avatar.html: HR007: Reference hasImage does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = hasImage.value
-})
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      hasImage.value == null || typeof hasImage.value === 'boolean',
-      '$hasImage:hasImage',
-      './components/ui-avatar/ui-avatar.html: HR007: Reference hasImage does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = hasImage.value
-})
-let guardedBinding3Previous: any
-const guardedBinding3 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      showGlyph.value == null || typeof showGlyph.value === 'boolean',
-      '$showGlyph:showGlyph',
-      './components/ui-avatar/ui-avatar.html: HR007: Reference showGlyph does not satisfy its declared type.',
-    ))
-  ) return guardedBinding3Previous
-  return guardedBinding3Previous = showGlyph.value
-})
-let guardedBinding4Previous: any
-const guardedBinding4 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      initials.value == null || typeof initials.value === 'string',
-      '$initials:initials',
-      './components/ui-avatar/ui-avatar.html: HR007: Reference initials does not satisfy its declared type.',
-    ))
-  ) return guardedBinding4Previous
-  return guardedBinding4Previous = initials.value
-})
-let guardedBinding5Previous: any
-const guardedBinding5 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      showGlyph.value == null || typeof showGlyph.value === 'boolean',
-      'not $showGlyph:showGlyph',
-      './components/ui-avatar/ui-avatar.html: HR007: Reference showGlyph does not satisfy its declared type.',
-    ))
-  ) 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
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-avatar> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-avatar> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('span', 'ui-avatar')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -350,7 +231,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
 
 <template>
   <span
-    data-component="ui-avatar"
+    class="ui-avatar"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-active="reflectedProp('active', 'active', checkedProps.active, undefined, false)"
@@ -369,13 +250,13 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
       alt=""
       aria-hidden="true"
       :src="checkedProps.src ?? undefined"
-      :hidden="guarded"
+      :hidden="hasAuthoredImage || !hasImage"
       ref="imageElement"
     >
-    <span class="fallback" :aria-hidden="guardedBinding" :hidden="guardedBinding2"><span
-        :hidden="guardedBinding3"
-      >{{ guardedBinding4 }}</span>
-      <span :hidden="guardedBinding5"><UiIcon name="user-round" /></span></span></span>
+    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage"><span :hidden="showGlyph">{{
+        initials
+      }}</span>
+      <span :hidden="!showGlyph"><UiIcon class="ui-icon" name="user-round" /></span></span></span>
 </template>
 
 <style scoped>
@@ -401,100 +282,101 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   inherits: false;
 }
 
-[data-component~="ui-avatar"] {
-  --_ui-default-icon-size: 1.25rem;
-  display: inline-grid;
-  place-items: center;
-  overflow: hidden;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-  border: var(--ui-border-width) solid
-    var(
-      --ui-avatar-border,
-      color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default))
-    );
-  background: var(--ui-avatar-surface, var(--ui-accent-soft));
-  color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
-  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;
-}
+/* 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~="size=sm"] {
-  --_ui-default-icon-size: 1rem;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
-  font-size: var(--ui-font-size-xs);
-}
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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. */
 
-[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;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"] {
-  border-color: var(--ui-avatar-border, var(--ui-border-strong));
-}
+@scope (.ui-avatar) to (.ui-icon) {
+  :scope:where(:scope) {
+    --_ui-default-icon-size: 1.25rem;
+    display: inline-grid;
+    place-items: center;
+    overflow: hidden;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
+    border: var(--ui-border-width) solid
+      var(
+        --ui-avatar-border,
+        color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default))
+      );
+    background: var(--ui-avatar-surface, var(--ui-accent-soft));
+    color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
+    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~="shape=circle"] {
-  box-shadow: var(--ui-shadow-sm);
-}
+  :scope:where(:scope):is([data-ui-avatar-state~="size=sm"]) {
+    --_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~="shape=square"] {
-  border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
-}
+  :scope:where(:scope):is([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;
+  }
 
-/* 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: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
-  outline-offset: var(--ui-border-width);
-}
+  :scope:where(:scope):is([data-ui-avatar-state~="hasImage"]) {
+    border-color: var(--ui-avatar-border, var(--ui-border-strong));
+  }
 
-.image,
-:slotted(img) {
-  grid-area: 1 / 1;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
+  :scope:where(:scope):is([data-ui-avatar-state~="shape=circle"]) {
+    box-shadow: var(--ui-shadow-sm);
+  }
 
-.fallback {
-  grid-area: 1 / 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  block-size: 100%;
-}
+  :scope:where(:scope):is([data-ui-avatar-state~="shape=square"]) {
+    border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
+  }
+  :scope:where(:scope):is([data-ui-avatar-state~="active"]) {
+    outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
+    outline-offset: var(--ui-border-width);
+  }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-/* 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 {
-    display: block;
-    text-align: center;
-    align-content: center;
-    text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+  .image, :slotted(img) {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
   }
-}
 
-[hidden] {
-  display: none;
-}
+  .fallback {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  @supports (text-box-trim: trim-both) {
+    .fallback {
+      display: block;
+      text-align: center;
+      align-content: center;
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden] {
-  display: none;
+  [hidden] {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiAvatarGroup.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: PropType<string | null>;
         default: string;
@@ -47,11 +49,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     label: string | null;
     size: "xs" | "sm" | "md" | null;
     max: number | null;
-    overflowLabel: string | null;
     total: number | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (props: {}) => any;
-}>;
+    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;
+export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;