@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiListbox.vue

@@ -1,28 +1,18 @@
-<!-- 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 {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  useTemplateRef,
-  watchSyncEffect,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+  attribute,
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiScrollArea from './UiScrollArea.vue'
@@ -172,64 +162,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 KeyedFailure = defineComponent({
-  props: { error: { type: null, required: true } },
-  setup(props) {
-    return () => {
-      throw props.error
-    }
-  },
-})
-const KeyedBoundary = defineComponent({
-  setup(_props, { slots }) {
-    let last: VNode[] = []
-    return () => {
-      try {
-        last = slots.default?.() ?? []
-        return last
-      } catch (error) {
-        if (
-          !(error instanceof Error)
-          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
-        ) throw error
-        if (typeof window === 'undefined') throw error
-        return [...last, h(KeyedFailure, { error })]
-      }
-    }
-  },
-})
-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 emit = defineEmits<{
   'update:value': [value: string]
@@ -273,62 +206,13 @@ const guarded = computed(() => {
       ? Symbol.for('html-next.invalid-result')
       : objectValue[indexValue])({ true: '-1', false: '0' }, concat(checkedProps.value.disabled)))
 })
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      validationError.value == null || typeof validationError.value === 'boolean',
-      '$invalid or $validationError:validationError',
-      './components/ui-listbox/ui-listbox.html: HR007: Reference validationError does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = checkedProps.value.invalid || validationError.value
-})
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      hasSelection.value == null || typeof hasSelection.value === 'boolean',
-      '$required and not $hasSelection and not $disabled:hasSelection',
-      './components/ui-listbox/ui-listbox.html: HR007: Reference hasSelection does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = checkedProps.value.required && !hasSelection.value
-    && !checkedProps.value.disabled
-})
-let guardedBinding3Previous: any
-const guardedBinding3 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      hasSelection.value == null || typeof hasSelection.value === 'boolean',
-      '$hasSelection:hasSelection',
-      './components/ui-listbox/ui-listbox.html: HR007: Reference hasSelection does not satisfy its declared type.',
-    ))
-  ) return guardedBinding3Previous
-  return guardedBinding3Previous = hasSelection.value ? true : undefined
-})
 provide('html-next:ui-listbox:choices', choices)
 provide('html-next:ui-listbox:selection', selection)
 provide('html-next:ui-listbox:hasSelection', hasSelection)
 provide('html-next:ui-listbox:active', active)
 provide('html-next:ui-listbox:uid', uid)
 provide('html-next:ui-listbox:validationError', validationError)
-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-listbox> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-listbox> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-listbox')
 
 const isChangeDetail = (
   detail: unknown,
@@ -396,78 +280,19 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
   refs: { choices: choicesElement, options: optionsElement, validity: validityElement },
   state: { choices, selection, hasSelection, active, uid, validationError },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
-
-function uniqueKeys<T>(
-  items: readonly T[],
-  keyOf: (
-    item: T,
-    index: number,
-    loop: { index: number; first: boolean; last: boolean; count: number },
-  ) => unknown,
-): readonly T[] {
-  const seen = new Set<unknown>()
-  for (let index = 0; index < items.length; index += 1) {
-    const key = keyOf(items[index]!, index, {
-      index,
-      first: index === 0,
-      last: index === items.length - 1,
-      count: items.length,
-    })
-    if (seen.has(key)) {
-      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
-      throw Object.assign(new Error(`HR004: ${message}`), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({ code: 'HR004', message }),
-      })
-    }
-    seen.add(key)
-  }
-  return items
-}
 </script>
 
 <template>
   <div
-    data-component="ui-listbox"
+    class="ui-listbox"
     role="listbox"
     v-bind="nativeAttrs($attrs)"
     :tabindex="guarded"
     :aria-multiselectable="checkedProps.multiple ?? undefined"
     :aria-disabled="checkedProps.disabled ?? undefined"
     :aria-required="checkedProps.required ?? undefined"
-    :aria-invalid="guardedBinding"
-    :style="{ '--_rows': checkedProps.rows ?? undefined }"
+    :aria-invalid="checkedProps.invalid || validationError"
+    :style="{ '--_rows': checkedProps.rows?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
@@ -480,7 +305,7 @@ function uniqueKeys<T>(
     ref="root"
   >
     <div class="choices">
-      <UiScrollArea ref="choicesElement"><KeyedBoundary><div
+      <UiScrollArea class="ui-scroll-area" ref="choicesElement"><KeyedBoundary><div
             v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
             :key="choice.index"
             class="option"
@@ -520,8 +345,8 @@ function uniqueKeys<T>(
       type="checkbox"
       aria-hidden="true"
       tabindex="-1"
-      :required="guardedBinding2"
-      :checked.attr="guardedBinding3"
+      :required="checkedProps.required && !hasSelection && !checkedProps.disabled"
+      :checked.attr="hasSelection ? true : undefined"
       :disabled="checkedProps.disabled ?? undefined"
       ref="validityElement"
     >
@@ -550,78 +375,79 @@ function uniqueKeys<T>(
   inherits: false;
 }
 
-[data-component~="ui-listbox"] {
-  position: relative;
-  box-sizing: border-box;
-  display: block;
-  inline-size: 100%;
-  min-inline-size: 0;
-  margin: 0;
-  padding: var(--ui-space-1);
-  border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
-  border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background: var(--ui-listbox-surface, var(--ui-control-surface));
-  color: var(--ui-text-primary);
-  font: inherit;
-  line-height: var(--ui-line-height-md);
-  box-shadow: var(--ui-control-inset);
-  outline: none;
-}
-
 /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
-.choices {
-  display: flex;
-  flex-direction: column;
-  max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
-}
 
-[data-component~="ui-listbox"]:not([data-enhanced]) {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  box-shadow: none;
-}
+@scope (.ui-listbox) to (.ui-scroll-area) {
+  :scope:where(:scope) {
+    position: relative;
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
+    border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-listbox-surface, var(--ui-control-surface));
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(--ui-control-inset);
+    outline: none;
+  }
+  .choices {
+    display: flex;
+    flex-direction: column;
+    max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+  }
 
-[data-component~="ui-listbox"]:not([data-enhanced]) .choices,
-[data-component~="ui-listbox"][data-enhanced] .fallback {
-  display: none;
-}
+  :scope:where(:scope):is(:not([data-enhanced])) {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
 
-.fallback {
-  box-sizing: border-box;
-  inline-size: 100%;
-  font: inherit;
-}
+  :scope:not([data-enhanced]) .choices, :scope[data-enhanced] .fallback {
+    display: none;
+  }
 
-.validity {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  opacity: 0;
-  pointer-events: none;
-}
+  .fallback {
+    box-sizing: border-box;
+    inline-size: 100%;
+    font: inherit;
+  }
 
-[data-component~="ui-listbox"]:focus-visible {
-  border-color: var(--ui-control-focus);
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-  box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
-}
+  .validity {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
+  }
 
-[data-component~="ui-listbox"][aria-invalid="true"] {
-  border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
-}
+  :scope:where(:scope):is(:focus-visible) {
+    border-color: var(--ui-control-focus);
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+    box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+  }
 
-[data-component~="ui-listbox"][aria-disabled="true"] {
-  background: var(--ui-control-surface-disabled);
-  color: var(--ui-disabled-text);
-  box-shadow: none;
-  cursor: not-allowed;
-}
+  :scope:where(:scope):is([aria-invalid="true"]) {
+    border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+  }
 
-[data-component~="ui-listbox"][hidden] {
-  display: none;
+  :scope:where(:scope):is([aria-disabled="true"]) {
+    background: var(--ui-control-surface-disabled);
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiMenu.d.ts

@@ -38,17 +38,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
-    open: (event: CustomEvent<{
+    close: (event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic";
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
-    "update:open": (value: boolean) => any;
-    close: (event: CustomEvent<{
+    open: (event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly reason: "action" | "programmatic";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
@@ -84,20 +84,20 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
-    onOpen?: ((event: CustomEvent<{
+    onClose?: ((event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic";
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    onClose?: ((event: CustomEvent<{
+    onOpen?: ((event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly reason: "action" | "programmatic";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    open: boolean | null;
     size: "sm" | "md" | null;
+    open: boolean | null;
     for: string | null;
     placement: string | null;
     inline: boolean | null;