@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiContainer.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 })
@@ -67,56 +68,9 @@ 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-container> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-container> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-container')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -134,7 +88,7 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-container"
+    class="ui-container"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
@@ -157,42 +111,44 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-container"] {
-  --_container-measure: 65ch;
-  --_container-gutters: var(--ui-space-4);
-  display: block;
-  inline-size: 100%;
-  max-inline-size: var(--ui-container-measure, var(--_container-measure));
-  margin-inline: auto;
-  padding-inline: var(--ui-container-gutters, var(--_container-gutters));
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-container"][data-ui-container-state~="measure=narrow"] {
-  --_container-measure: 45ch;
-}
-[data-component~="ui-container"][data-ui-container-state~="fill"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-inline-size: 0;
-  min-block-size: 0;
-}
-[data-component~="ui-container"][data-ui-container-state~="measure=wide"] {
-  --_container-measure: 80ch;
-}
-[data-component~="ui-container"][data-ui-container-state~="gutters=s"] {
-  --_container-gutters: var(--ui-space-3);
-}
-[data-component~="ui-container"][data-ui-container-state~="gutters=m"] {
-  --_container-gutters: var(--ui-space-4);
-}
-[data-component~="ui-container"][data-ui-container-state~="gutters=l"] {
-  --_container-gutters: var(--ui-space-5);
-}
+@scope (.ui-container) {
+  :scope:where(:scope) {
+    --_container-measure: 65ch;
+    --_container-gutters: var(--ui-space-4);
+    display: block;
+    inline-size: 100%;
+    max-inline-size: var(--ui-container-measure, var(--_container-measure));
+    margin-inline: auto;
+    padding-inline: var(--ui-container-gutters, var(--_container-gutters));
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-container"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-container-state~="measure=narrow"]) {
+    --_container-measure: 45ch;
+  }
+  :scope:where(:scope):is([data-ui-container-state~="fill"]) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  :scope:where(:scope):is([data-ui-container-state~="measure=wide"]) {
+    --_container-measure: 80ch;
+  }
+  :scope:where(:scope):is([data-ui-container-state~="gutters=s"]) {
+    --_container-gutters: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-container-state~="gutters=m"]) {
+    --_container-gutters: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-container-state~="gutters=l"]) {
+    --_container-gutters: var(--ui-space-5);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiContextMenu.d.ts

@@ -18,17 +18,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" | "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 trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     for: {
         type: PropType<string | null>;
@@ -44,17 +44,17 @@ 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" | "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 trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     open: boolean | null;
     for: string | null;

package/vue/UiContextMenu.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, 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'
 
@@ -52,38 +58,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]
@@ -120,22 +95,7 @@ const root = ref<HTMLElement | null>(null)
 const menuElement = useTemplateRef<HTMLElement>('menuElement')
 const internalOpen = ref(false)
 provide('html-next:ui-context-menu:internalOpen', internalOpen)
-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-context-menu> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-context-menu> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('span', 'ui-context-menu')
 
 const isOpenDetail = (
   detail: unknown,
@@ -199,7 +159,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
 
 <template>
   <span
-    data-component="ui-context-menu"
+    class="ui-context-menu"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
@@ -231,82 +191,83 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
   inherits: false;
 }
 
-[data-component~="ui-context-menu"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-context-menu-surface: var(--ui-context-menu-surface);
-  --_ui-context-menu-border: var(--ui-context-menu-border);
-  --_ui-context-menu-radius: var(--ui-context-menu-radius);
-  --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
-  --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-  display: contents;
-}
+@scope (.ui-context-menu) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-context-menu-surface: var(--ui-context-menu-surface);
+    --_ui-context-menu-border: var(--ui-context-menu-border);
+    --_ui-context-menu-radius: var(--ui-context-menu-radius);
+    --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
+    --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
-.menu {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: var(--ui-space-1);
-  background: var(
-    --_ui-context-menu-surface,
-    var(--ui-overlay-surface, var(--ui-surface-elevated))
-  );
-  border: var(--ui-border-width) solid
-    var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  box-shadow: var(
-    --_ui-context-menu-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-  );
-  outline: 0;
-  overflow: auto;
-  z-index: var(--_ui-context-menu-z-index, 1000);
-  min-width: 12rem;
-  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;
-}
+    display: contents;
+  }
 
-.menu 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);
-}
+  .menu {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: var(--ui-space-1);
+    background: var(
+      --_ui-context-menu-surface,
+      var(--ui-overlay-surface, var(--ui-surface-elevated))
+    );
+    border: var(--ui-border-width) solid
+      var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    box-shadow: var(
+      --_ui-context-menu-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    outline: 0;
+    overflow: auto;
+    z-index: var(--_ui-context-menu-z-index, 1000);
+    min-width: 12rem;
+    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;
+  }
 
-.menu:popover-open {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
+  .menu 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);
+  }
 
-@starting-style {
   .menu:popover-open {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.99);
+    opacity: 1;
+    transform: translateY(0) scale(1);
   }
-}
 
-.menu[hidden],
-.menu[popover]:not(:popover-open) {
-  display: none;
-}
+  @starting-style {
+    .menu:popover-open {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .menu {
-    transition: none;
+  .menu[hidden], .menu[popover]:not(:popover-open) {
+    display: none;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-context-menu"][hidden] {
-  display: none;
+  @media (prefers-reduced-motion: reduce) {
+    .menu {
+      transition: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiCover.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 })
@@ -36,53 +37,9 @@ 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-cover> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-cover> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-cover')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -95,7 +52,7 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-cover"
+    class="ui-cover"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -108,28 +65,31 @@ const hostState = computed(() =>
 <style scoped>
 /* A layout primitive that centres its content in the space, both ways, with room around it: the
        frame for a view that is one card or one message. */
-[data-component~="ui-cover"] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-6);
-  box-sizing: border-box;
-  min-block-size: 100dvh;
-  padding: var(--ui-space-6) var(--ui-space-4);
-}
 
-[data-component~="ui-cover"][data-ui-cover-state~="size=fill"] {
-  flex: 1;
-  min-block-size: 100%;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-cover"] > :slotted(*) {
-  max-inline-size: 100%;
-}
+@scope (.ui-cover) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-6);
+    box-sizing: border-box;
+    min-block-size: 100dvh;
+    padding: var(--ui-space-6) var(--ui-space-4);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cover"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-cover-state~="size=fill"]) {
+    flex: 1;
+    min-block-size: 100%;
+  }
+
+  :scope > :slotted(*) {
+    max-inline-size: 100%;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>