@threadlabs/looma 0.28.5 → 0.28.6

package/vanilla/UiToastRegion.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, KeyedList, NONCONFORMING, readMember, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-toast-region/ui-toast-region.js";
 import "../styles/ui-toast-region.css";

package/vanilla/UiTooltip.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 export interface UiTooltipEventMap {
   open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTooltip.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, toAttribute, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";

package/vanilla/UiTopBar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 export interface UiTopBarEventMap {
 }
 export interface UiTopBarElement extends HTMLElement {

package/vanilla/UiTopBar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, dispose, project, fillSlot } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-top-bar.css";
 

package/vanilla/UiTree.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 export interface UiTreeEventMap {
   reorder: CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "reorder-rejected": CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTree.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkInteger, checkList, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";

package/vanilla/UiTreeItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 export interface UiTreeItemEventMap {
   expand: CustomEvent<{ readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTreeItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, recordValue, textCall, toAttribute, toText, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";
@@ -168,25 +168,13 @@ export function createUiTreeItem(options = {}, html) {
       const s16 = x13;
       if (s16 !== r.v16) writeAttribute(r.n, "data-ui-tree-item-state", (r.v16 = s16) === "" ? null : s16);
     }
-    if (c & 262400) {
-      const t0 = (truthy(v[18]) && !truthy(v[8]));
-      if (true) {
-        {
-          r.b0 = undefined;
-          clearRegion(r.a2, r.e0);
-          if (t0) { r.b0 = m1(d); r.e0.before(r.b0.n); }
-        }
-      } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (c & 262400 && !((truthy(v[18]) && !truthy(v[8]))) !== !r.b0) {
+      if (r.b0) { r.b0 = undefined; clearRegion(r.a2, r.e0); }
+      else { r.b0 = m1(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
-    if (c & 16) {
-      const t3 = v[4];
-      if (true) {
-        {
-          r.b3 = undefined;
-          clearRegion(r.a11, r.e3);
-          if (t3) { r.b3 = m4(d); r.e3.before(r.b3.n); }
-        }
-      } else if (r.b3 !== undefined) p4(r.b3, c, d);
+    if (c & 16 && !(v[4]) !== !r.b3) {
+      if (r.b3) { r.b3 = undefined; clearRegion(r.a11, r.e3); }
+      else { r.b3 = m4(d); r.e3.before(r.b3.n); }
     } else if (r.b3 !== undefined) p4(r.b3, c, d);
     if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a6, r.e1, "leading", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }

package/vue/UiActionBar.vue

@@ -1,41 +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 { getCurrentInstance } from 'vue'
+import { checkHydratedRoot, nativeAttrs } from './host'
 
 defineOptions({ inheritAttrs: false })
 
-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 hydrationInstance = getCurrentInstance()
-
-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-action-bar> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-action-bar> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-action-bar')
 </script>
 
 <template>
-  <div data-component="ui-action-bar" v-bind="nativeAttrs($attrs)">
+  <div class="ui-action-bar" v-bind="nativeAttrs($attrs)">
     <div class="bar">
       <span class="tertiary"><slot name="tertiary" /></span>
       <span class="secondary"><slot name="secondary" />
@@ -55,63 +28,58 @@ if (
 /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
    edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
    row. The bar arranges its actions and leaves their look to them. */
-[data-component~="ui-action-bar"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-action-bar-gap: var(--ui-action-bar-gap);
-
-  --_gap: var(--ui-space-2);
-  display: block;
-  /* A size container sizes itself from its container, never its content. */
-  container-type: inline-size;
-  inline-size: 100%;
-  min-inline-size: 0;
-}
-
-.bar,
-.tertiary,
-.secondary,
-.primary {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--_ui-action-bar-gap, var(--_gap));
-}
 
 /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
    rest still ends the row. */
-.bar {
-  justify-content: flex-end;
-}
-
-.tertiary {
-  flex: 1 1 auto;
-}
-
-.tertiary:empty,
-.secondary:empty,
-.primary:empty {
-  display: none;
-}
 
 /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
    read from its end edge. Container queries cannot read custom properties, so the width is fixed. */
-@container (inline-size < 24rem) {
-  .bar,
-  .tertiary,
-  .secondary,
-  .primary {
-    flex-direction: column-reverse;
-    flex-wrap: nowrap;
-    align-items: stretch;
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+
+@scope (.ui-action-bar) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-action-bar-gap: var(--ui-action-bar-gap);
+
+    --_gap: var(--ui-space-2);
+    display: block;
+    /* A size container sizes itself from its container, never its content. */
+    container-type: inline-size;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .bar, .tertiary, .secondary, .primary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--_ui-action-bar-gap, var(--_gap));
+  }
+  .bar {
+    justify-content: flex-end;
   }
 
   .tertiary {
-    flex: none;
+    flex: 1 1 auto;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-action-bar"][hidden] {
-  display: none;
+  .tertiary:empty, .secondary:empty, .primary:empty {
+    display: none;
+  }
+  @container (inline-size < 24rem) {
+    .bar, .tertiary, .secondary, .primary {
+      flex-direction: column-reverse;
+      flex-wrap: nowrap;
+      align-items: stretch;
+    }
+
+    .tertiary {
+      flex: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiAffordanceScope.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'
 
@@ -53,59 +59,13 @@ 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 engaged = ref(false)
 provide('html-next:ui-affordance-scope:engaged', engaged)
-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-affordance-scope> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-affordance-scope> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('span', 'ui-affordance-scope')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -148,7 +108,7 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
 
 <template>
   <span
-    data-component="ui-affordance-scope"
+    class="ui-affordance-scope"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
@@ -159,23 +119,24 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
 </template>
 
 <style scoped>
-[data-component~="ui-affordance-scope"] {
-  display: contents;
-  --ui-affordance-scope-engaged: 0;
-  --ui-affordance-scope-guide: 1;
-}
-
-[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="engaged"] {
-  --ui-affordance-scope-engaged: 1;
-}
-
 /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
-[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="guide=none"] {
-  --ui-affordance-scope-guide: 0;
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-affordance-scope"][hidden] {
-  display: none;
+
+@scope (.ui-affordance-scope) {
+  :scope:where(:scope) {
+    display: contents;
+    --ui-affordance-scope-engaged: 0;
+    --ui-affordance-scope-guide: 1;
+  }
+  :scope:where(:scope):is([data-ui-affordance-scope-state~="engaged"]) {
+    --ui-affordance-scope-engaged: 1;
+  }
+  :scope:where(:scope):is([data-ui-affordance-scope-state~="guide=none"]) {
+    --ui-affordance-scope-guide: 0;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiAvatar.d.ts

@@ -1,7 +1,9 @@
 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: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     active: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -70,15 +72,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }>> & Readonly<{}>, {
     name: string | null;
     alt: string | null;
+    size: "xs" | "sm" | "md" | null;
     shape: "circle" | "square" | null;
     active: boolean | null;
     decorative: boolean | null;
     fallback: string | null;
-    size: "xs" | "sm" | "md" | null;
     src: string | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (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;