@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiEditorSlashMenu.d.ts

@@ -1,7 +1,15 @@
 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: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    empty?: (props: typeof __VLS_10) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     anchorRect: {
         type: PropType<{
             readonly left?: number;
@@ -99,13 +107,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     }>) => any) | undefined;
 }>, {
     label: string | null;
-    open: boolean | null;
     items: readonly {
         readonly value?: string;
         readonly title: string;
         readonly description: string;
         readonly icon: string;
     }[] | null;
+    open: boolean | null;
     query: string | null;
     anchorRect: {
         readonly left?: number;
@@ -118,15 +126,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         readonly height?: number;
     } | null;
     selectedIndex: number | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    header?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-} & {
-    empty?: (props: {}) => any;
-} & {
-    footer?: (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/UiEditorSlashMenu.vue

@@ -1,19 +1,15 @@
-<!-- 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,
+  isInteger,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
@@ -223,38 +219,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 emit = defineEmits<{
   highlight: [event: CustomEvent<{ readonly index: number; readonly value: string }>]
@@ -266,36 +231,10 @@ const emptyElement = useTemplateRef<HTMLElement>('emptyElement')
 const visible = ref(false)
 const active = ref(0)
 const rows = ref<{ value: string; title: string; description: string; icon: string }[]>([])
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      visible.value == null || typeof visible.value === 'boolean',
-      'not $visible:visible',
-      './components/ui-editor-slash-menu/ui-editor-slash-menu.html: HR007: Reference visible does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = !visible.value
-})
 provide('html-next:ui-editor-slash-menu:visible', visible)
 provide('html-next:ui-editor-slash-menu:active', active)
 provide('html-next:ui-editor-slash-menu:rows', rows)
-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-editor-slash-menu> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-slash-menu> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editor-slash-menu')
 
 const isHighlightDetail = (
   detail: unknown,
@@ -357,10 +296,10 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 
 <template>
   <div
-    data-component="ui-editor-slash-menu"
+    class="ui-editor-slash-menu"
     role="listbox"
     v-bind="nativeAttrs($attrs)"
-    :hidden="guarded"
+    :hidden="!visible"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-anchor-rect="reflectedProp('anchorRect', 'anchor-rect', checkedProps.anchorRect, undefined, false)"
     :data-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
@@ -382,7 +321,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
         :data-value="item.value"
         :class="{ active: index === active }"
       >
-        <span class="icon" aria-hidden="true"><UiIcon :name="item.icon" /></span>
+        <span class="icon" aria-hidden="true"><UiIcon class="ui-icon" :name="item.icon" /></span>
         <span class="body"><span class="title">{{ item.title }}</span>
           <span class="description">{{ item.description }}</span></span>
       </li>
@@ -394,188 +333,168 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 </template>
 
 <style scoped>
-[data-component~="ui-editor-slash-menu"][popover] {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-}
-
-[data-component~="ui-editor-slash-menu"] {
-  user-select: none;
-}
-
-[data-component~="ui-editor-slash-menu"] {
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-dialog);
-  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-@media (max-width: 767px) {
-  [data-component~="ui-editor-slash-menu"] {
-    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
-    border-bottom: none;
+@scope (.ui-editor-slash-menu) to (.ui-icon) {
+  :scope:where(:scope):is([popover]) {
+    position: fixed;
+    inset: auto;
+    margin: 0;
   }
-}
-
-.header {
-  display: none;
-  align-items: center;
-  gap: var(--ui-space-2);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-text-muted);
-  font-weight: var(--ui-font-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-[data-component~="ui-editor-slash-menu"] > .header:empty,
-[data-component~="ui-editor-slash-menu"] > .footer:empty,
-[data-component~="ui-editor-slash-menu"] > .empty:empty {
-  display: none;
-}
-
-.empty {
-  padding: var(--ui-space-3);
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-}
-
-@media (max-width: 767px) {
-  .header {
+  :scope:where(:scope) {
+    user-select: none;
+  }
+  :scope:where(:scope) {
+    background: var(--ui-surface);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-dialog);
+    box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+    overflow: hidden;
     display: flex;
+    flex-direction: column;
+  }
+  @media (max-width: 767px) {
+    :scope:where(:scope) {
+      border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
+      border-bottom: none;
+    }
+  }
+  .header {
+    display: none;
+    align-items: center;
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-3) var(--ui-space-4);
+    border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+    font-weight: var(--ui-font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  :scope > .header:empty, :scope > .footer:empty, :scope > .empty:empty {
+    display: none;
+  }
+  .empty {
+    padding: var(--ui-space-3);
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+  }
+  @media (max-width: 767px) {
+    .header {
+      display: flex;
+    }
   }
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: var(--ui-space-1) 0;
-  overflow-y: auto;
-  max-height: 280px;
-  overscroll-behavior: contain;
-  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self block);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
-}
-
-@media (max-width: 767px) {
   .list {
-    max-height: calc(60dvh - 80px);
-    padding: var(--ui-space-1) 0 var(--ui-space-2);
+    list-style: none;
+    margin: 0;
+    padding: var(--ui-space-1) 0;
+    overflow-y: auto;
+    max-height: 280px;
+    overscroll-behavior: contain;
+    /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+    --_ui-scroll-fade-direction: to bottom;
+    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self block);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
+  }
+  @media (max-width: 767px) {
+    .list {
+      max-height: calc(60dvh - 80px);
+      padding: var(--ui-space-1) 0 var(--ui-space-2);
+    }
+  }
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    min-height: 44px;
+    cursor: pointer;
+    transition: background-color 120ms ease;
+  }
+  .item.active {
+    background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+  }
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: var(--ui-surface-hover);
+    border: var(--ui-border-width) solid var(--ui-border);
+    border-radius: var(--ui-radius-md);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-bold);
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+    flex-shrink: 0;
+    line-height: 1;
+  }
+  .item.active .icon {
+    background: var(--ui-accent);
+    border-color: var(--ui-accent);
+    color: var(--ui-accent-contrast);
+  }
+  .icon {
+    --_ui-default-icon-size: 1rem;
+    --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+  }
+  .body {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 1px;
+  }
+  .title {
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-medium);
+    color: var(--ui-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .description {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .footer {
+    padding: var(--ui-space-2) var(--ui-space-3);
+    border-top: var(--ui-border-width) solid var(--ui-border-divider);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+  }
+  :scope kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+    font-size: var(--ui-font-size-2xs);
+    background: var(--ui-surface-hover);
+    border: var(--ui-border-width) solid var(--ui-border);
+    border-radius: var(--ui-radius-sm);
+    padding: 0 3px;
+    color: var(--ui-text-secondary);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
   }
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  min-height: 44px;
-  cursor: pointer;
-  transition: background-color 120ms ease;
-}
-
-.item.active {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--ui-surface-hover);
-  border: var(--ui-border-width) solid var(--ui-border);
-  border-radius: var(--ui-radius-md);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-bold);
-  color: var(--ui-text-secondary);
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.item.active .icon {
-  background: var(--ui-accent);
-  border-color: var(--ui-accent);
-  color: var(--ui-accent-contrast);
-}
-
-.icon {
-  --_ui-default-icon-size: 1rem;
-  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.body {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.title {
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
-  color: var(--ui-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.description {
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.footer {
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border-top: var(--ui-border-width) solid var(--ui-border-divider);
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-text-muted);
-}
-
-[data-component~="ui-editor-slash-menu"] kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-2xs);
-  background: var(--ui-surface-hover);
-  border: var(--ui-border-width) solid var(--ui-border);
-  border-radius: var(--ui-radius-sm);
-  padding: 0 3px;
-  color: var(--ui-text-secondary);
-}
-
-[data-component~="ui-editor-slash-menu"][hidden] {
-  display: none;
 }
 </style>

package/vue/UiEditorSlashMenuGroup.vue

@@ -1,7 +1,8 @@
-<!-- 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, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -34,61 +35,14 @@ 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 hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('li'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-editor-slash-menu-group> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-slash-menu-group> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('li', 'ui-editor-slash-menu-group')
 </script>
 
 <template>
   <li
-    data-component="ui-editor-slash-menu-group"
+    class="ui-editor-slash-menu-group"
     role="presentation"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -102,22 +56,24 @@ if (
 </template>
 
 <style scoped>
-[data-component~="ui-editor-slash-menu-group"] {
-  display: block;
-  list-style: none;
-}
-.heading {
-  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
-}
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-[data-component~="ui-editor-slash-menu-group"][hidden] {
-  display: none;
+@scope (.ui-editor-slash-menu-group) {
+  :scope:where(:scope) {
+    display: block;
+    list-style: none;
+  }
+  .heading {
+    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-semibold);
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>