@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiAvatarGroup.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'
 
@@ -118,95 +113,16 @@ 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 overflowElement = useTemplateRef<HTMLElement>('overflowElement')
 const overflowCount = ref(0)
 const overflowAnnouncement = ref('')
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      overflowCount.value == null || Number.isInteger(overflowCount.value),
-      'not $overflowCount:overflowCount',
-      './components/ui-avatar-group/ui-avatar-group.html: HR007: Reference overflowCount does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = !overflowCount.value
-})
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      overflowAnnouncement.value == null || typeof overflowAnnouncement.value === 'string',
-      '$overflowAnnouncement:overflowAnnouncement',
-      './components/ui-avatar-group/ui-avatar-group.html: HR007: Reference overflowAnnouncement does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = overflowAnnouncement.value
-})
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      overflowCount.value == null || Number.isInteger(overflowCount.value),
-      '$overflowCount:overflowCount',
-      './components/ui-avatar-group/ui-avatar-group.html: HR007: Reference overflowCount does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = overflowCount.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
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-avatar-group> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-avatar-group> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-avatar-group')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -252,7 +168,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
 
 <template>
   <div
-    data-component="ui-avatar-group"
+    class="ui-avatar-group"
     role="group"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
@@ -269,10 +185,10 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     <span
       class="overflow"
       role="img"
-      :hidden="guarded"
-      :aria-label="guardedBinding"
+      :hidden="!overflowCount"
+      :aria-label="overflowAnnouncement"
       ref="overflowElement"
-    >{{ '' + '+' + (guardedBinding2 ?? '') }}</span>
+    >+{{ overflowCount }}</span>
   </div>
 </template>
 
@@ -287,77 +203,79 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   inherits: false;
 }
 
-[data-component~="ui-avatar-group"] {
-  /* 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);
+/* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
+ * component roots outside this style scope. */
 
-  /* A one-pixel shadow on the leading edge separates overlapping circles without cutting
-   * a white gap out of the avatar underneath. */
-  --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 0;
-}
+@scope (.ui-avatar-group) {
+  :scope:where(:scope) {
+    /* 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);
 
-/* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
- * component roots outside this style scope. */
-:slotted(*) {
-  margin-inline-start: -0.5rem;
-  flex-shrink: 0;
-}
+    /* A one-pixel shadow on the leading edge separates overlapping circles without cutting
+     * a white gap out of the avatar underneath. */
+    --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
-:slotted(*:first-child) {
-  margin-inline-start: 0;
-}
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 0;
+  }
+  :slotted(*) {
+    margin-inline-start: -0.5rem;
+    flex-shrink: 0;
+  }
 
-[data-component~="ui-avatar-group"]:dir(rtl) {
-  --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
-}
+  :slotted(*:first-child) {
+    margin-inline-start: 0;
+  }
 
-.overflow {
-  margin-inline-start: -0.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  border-radius: var(--ui-radius-round);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  background: var(--ui-surface-elevated);
-  color: var(--ui-text-primary);
-  box-shadow:
-    var(--_ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
-    var(--_ui-avatar-group-edge-ring, 0 0 0 0 transparent);
-  font: inherit;
-  font-size: var(--ui-font-size-xs);
-  font-weight: 600;
-  flex-shrink: 0;
-}
+  :scope:where(:scope):is(:dir(rtl)) {
+    --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
+  }
 
-[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 {
+    margin-inline-start: -0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--ui-radius-round);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    background: var(--ui-surface-elevated);
+    color: var(--ui-text-primary);
+    box-shadow:
+      var(--_ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+      var(--_ui-avatar-group-edge-ring, 0 0 0 0 transparent);
+    font: inherit;
+    font-size: var(--ui-font-size-xs);
+    font-weight: 600;
+    flex-shrink: 0;
+  }
 
-[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=xs"] .overflow {
-  margin-inline-start: -0.1875rem;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
-  /* Matches the xs Avatar's initials. */
-  font-size: calc(var(--ui-font-size) * 0.5625);
-  line-height: 1;
-}
+  :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;
-}
+  :scope[data-ui-avatar-group-state~="size=xs"] .overflow {
+    margin-inline-start: -0.1875rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    /* Matches the xs Avatar's initials. */
+    font-size: calc(var(--ui-font-size) * 0.5625);
+    line-height: 1;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar-group"][hidden] {
-  display: none;
+  .overflow[hidden] {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiBadge.d.ts

@@ -40,8 +40,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
+    shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "solid" | "subtle" | "outline" | "inverse" | "overlay" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;