@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiMenu.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'
 
@@ -142,38 +148,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<{
   'update:open': [value: boolean]
@@ -209,19 +184,7 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 const internalOpen = ref(false)
 provide('html-next:ui-menu:internalOpen', internalOpen)
-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-menu> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-menu> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-menu')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -308,7 +271,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
 
 <template>
   <div
-    data-component="ui-menu"
+    class="ui-menu"
     role="menu"
     aria-orientation="vertical"
     v-bind="nativeAttrs($attrs)"
@@ -352,124 +315,127 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
 
 /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
    still win. */
-[data-component~="ui-menu"][data-ui-menu-state~="density=compact"] {
-  --_ui-default-menu-item-padding-block: var(--ui-space-1);
-  --_ui-default-menu-item-padding-inline: var(--ui-space-2);
-  --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
-  --_ui-default-menu-item-radius: var(--ui-radius-sm);
-  padding: var(--ui-space-1);
-  gap: 0;
-}
 
 /* Small follows its trigger down: an item's own hooks still win. */
-[data-component~="ui-menu"][data-ui-menu-state~="size=sm"] {
-  --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
-  --_ui-default-menu-item-padding-inline: var(--ui-space-2);
-  --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
-  --_ui-default-menu-item-radius: var(--ui-radius-sm);
-  --_ui-default-menu-item-min-block-size: 1.5rem;
-  --_ui-default-menu-indicator-size: 0.75rem;
-  min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
-  padding: var(--ui-space-1);
-  gap: 0;
-}
-
-[data-component~="ui-menu"][data-ui-menu-state~="icons"] {
-  --_ui-default-menu-icon-display: inline-flex;
-}
 
-[data-component~="ui-menu"] {
-  --_ui-menu-surface: var(--ui-menu-surface);
-  --_ui-menu-border: var(--ui-menu-border);
-  --_ui-menu-radius: var(--ui-menu-radius);
-  --_ui-menu-shadow: var(--ui-menu-shadow);
-  /* A menu nested in a compact one starts again from its own density. */
-  --_ui-default-menu-item-padding-block: initial;
-  --_ui-default-menu-item-padding-inline: initial;
-  --_ui-default-menu-item-font-size: initial;
-  --_ui-default-menu-item-radius: initial;
-  --_ui-default-menu-item-min-block-size: initial;
-  --_ui-default-menu-indicator-size: initial;
-  --_ui-default-menu-icon-display: none;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  inline-size: max-content;
-  min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
-  max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
-  padding: 0;
-  border: 0;
-  outline: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  overflow: visible;
-}
+@scope (.ui-menu) {
+  :scope:where(:scope):is([data-ui-menu-state~="density=compact"]) {
+    --_ui-default-menu-item-padding-block: var(--ui-space-1);
+    --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+    --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
+    --_ui-default-menu-item-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-1);
+    gap: 0;
+  }
+  :scope:where(:scope):is([data-ui-menu-state~="size=sm"]) {
+    --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
+    --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+    --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
+    --_ui-default-menu-item-radius: var(--ui-radius-sm);
+    --_ui-default-menu-item-min-block-size: 1.5rem;
+    --_ui-default-menu-indicator-size: 0.75rem;
+    min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+    padding: var(--ui-space-1);
+    gap: 0;
+  }
 
-.surface {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  max-inline-size: inherit;
-  padding: var(--ui-space-1);
-  background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: var(--ui-border-width) solid
-    var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  box-shadow: var(
-    --_ui-menu-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-  );
-  max-block-size: inherit;
-  overflow: auto;
-}
+  :scope:where(:scope):is([data-ui-menu-state~="icons"]) {
+    --_ui-default-menu-icon-display: inline-flex;
+  }
 
-.surface hr {
-  align-self: stretch;
-  block-size: 0;
-  margin: var(--ui-space-1) 0;
-  border: 0;
-  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
+  :scope:where(:scope) {
+    --_ui-menu-surface: var(--ui-menu-surface);
+    --_ui-menu-border: var(--ui-menu-border);
+    --_ui-menu-radius: var(--ui-menu-radius);
+    --_ui-menu-shadow: var(--ui-menu-shadow);
+    /* A menu nested in a compact one starts again from its own density. */
+    --_ui-default-menu-item-padding-block: initial;
+    --_ui-default-menu-item-padding-inline: initial;
+    --_ui-default-menu-item-font-size: initial;
+    --_ui-default-menu-item-radius: initial;
+    --_ui-default-menu-item-min-block-size: initial;
+    --_ui-default-menu-indicator-size: initial;
+    --_ui-default-menu-icon-display: none;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+    max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
+    padding: 0;
+    border: 0;
+    outline: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow: visible;
+  }
 
-[data-component~="ui-menu"]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {
-  display: none;
-}
+  .surface {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    max-inline-size: inherit;
+    padding: var(--ui-space-1);
+    background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+    border: var(--ui-border-width) solid
+      var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    box-shadow: var(
+      --_ui-menu-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    max-block-size: inherit;
+    overflow: auto;
+  }
 
-[data-component~="ui-menu"][popover] {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  overflow: visible;
-  max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
-  opacity: 0;
-  transform: translateY(-4px) scale(0.99);
-  transition:
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease),
-    display var(--ui-motion-fast) allow-discrete,
-    overlay var(--ui-motion-fast) allow-discrete;
-}
+  .surface hr {
+    align-self: stretch;
+    block-size: 0;
+    margin: var(--ui-space-1) 0;
+    border: 0;
+    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+  }
 
-[data-component~="ui-menu"][popover]:popover-open {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
+  :scope:where(:scope):is(:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"])) {
+    display: none;
+  }
 
-@starting-style {
-  [data-component~="ui-menu"][popover]:popover-open {
+  :scope:where(:scope):is([popover]) {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    overflow: visible;
+    max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
     opacity: 0;
     transform: translateY(-4px) scale(0.99);
+    transition:
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      transform var(--ui-motion-fast) var(--ui-motion-ease),
+      display var(--ui-motion-fast) allow-discrete,
+      overlay var(--ui-motion-fast) allow-discrete;
   }
-}
 
-[data-component~="ui-menu"][hidden] {
-  display: none;
-}
+  :scope:where(:scope):is([popover]:popover-open) {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  @starting-style {
+    :scope:where(:scope):is([popover]:popover-open) {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+    }
+  }
+
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-menu"][popover] {
-    transition: none;
+  @media (prefers-reduced-motion: reduce) {
+    :scope:where(:scope):is([popover]) {
+      transition: none;
+    }
   }
 }
 </style>

package/vue/UiMenuGroup.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 !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-menu-group> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-menu-group> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-menu-group')
 </script>
 
 <template>
   <div
-    data-component="ui-menu-group"
+    class="ui-menu-group"
     role="group"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
@@ -101,20 +55,20 @@ if (
 </template>
 
 <style scoped>
-[data-component~="ui-menu-group"] {
-  display: flex;
-  flex-direction: column;
-  min-inline-size: 0;
-}
-
-.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-sm);
-  font-weight: var(--ui-font-semibold);
-}
-
-[data-component~="ui-menu-group"][hidden] {
-  display: none;
+@scope (.ui-menu-group) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  .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-sm);
+    font-weight: var(--ui-font-semibold);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiMenuItem.d.ts

@@ -1,7 +1,19 @@
 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_3: {}, __VLS_5: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    shortcut?: (props: typeof __VLS_5) => any;
+} & {
+    icon?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    shortcut?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     checked: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -78,19 +90,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     disabled: boolean | null;
     href: string | null;
     checked: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    icon?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-} & {
-    shortcut?: (props: {}) => any;
-} & {
-    icon?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-} & {
-    shortcut?: (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;