@threadlabs/looma 0.21.6 → 0.22.0

package/vue/UiTooltip.vue

@@ -1,12 +1,83 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    for: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'for' },
+      description: 'ID of the control described and visually anchored by the tooltip.',
+      default: '',
+    },
+    hideDelay: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'hidedelay' },
+      description: 'Waits this many milliseconds before hiding after pointer exit.',
+      default: 100,
+    },
+    inverse: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'inverse' },
+      description:
+        'Use the high-contrast inverse surface (dark on light themes, light on dark themes).',
+      default: false,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the tooltip is open initially or when set externally.',
+      default: false,
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'placement' },
+      description:
+        'Positions the description around its trigger. Start and end on top or bottom follow the writing direction.',
+      values: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+      ],
+      default: 'top',
+    },
+    showDelay: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'showdelay' },
+      description: 'Waits this many milliseconds before showing after pointer entry.',
+      default: 500,
+    },
+    trigger: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'trigger' },
+      description:
+        'How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only while the trigger holds focus.',
+      values: ['hover', 'click', 'focus'],
+      default: 'hover',
+    },
+  },
+}
 const props = defineProps({
   for: { type: null as unknown as PropType<string | null>, default: '' },
   hideDelay: { type: null as unknown as PropType<number | null>, default: 100 },
@@ -42,32 +113,24 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'for',
-    undefined,
-    undefined,
   ) as string,
   hideDelay: checkedProp<number>(
     props['hideDelay'],
     { kind: 'terminal', name: 'number' },
     false,
     'hideDelay',
-    undefined,
-    undefined,
   ) as number,
   inverse: checkedProp<boolean>(
     props['inverse'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'inverse',
-    undefined,
-    undefined,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   placement: checkedProp<
     | 'top'
@@ -82,20 +145,7 @@ const checkedProps = computed(() => ({
     | 'right'
     | 'right-start'
     | 'right-end'
-  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement', undefined, [
-    'top',
-    'top-start',
-    'top-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-    'right',
-    'right-start',
-    'right-end',
-  ]) as
+  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement') as
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -113,16 +163,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'number' },
     false,
     'showDelay',
-    undefined,
-    undefined,
   ) as number,
   trigger: checkedProp<'hover' | 'click' | 'focus'>(
     props['trigger'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'trigger',
-    undefined,
-    ['hover', 'click', 'focus'],
   ) as 'hover' | 'click' | 'focus',
 }))
 void checkedProps.value
@@ -187,6 +233,14 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const internalOpen = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(internalOpen.value == null || typeof internalOpen.value === 'boolean')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = !internalOpen.value
+})
+provide('html-next:ui-tooltip:internalOpen', internalOpen)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -247,7 +301,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     data-component="ui-tooltip"
     role="tooltip"
     v-bind="nativeAttrs($attrs)"
-    :hidden="!internalOpen"
+    :hidden="guarded"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-hide-delay="reflectedProp('hideDelay', 'hide-delay', checkedProps.hideDelay, undefined, false)"
     :data-inverse="reflectedProp('inverse', 'inverse', checkedProps.inverse, undefined, false)"

package/vue/UiTopBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 

package/vue/UiTree.vue

@@ -1,12 +1,65 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description: 'Compact trades padding and type size for rows that fit more on screen.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+    hoverExpandDelay: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'hoverexpanddelay' },
+      description:
+        'How long, in milliseconds, a dragged item must hover over the middle of a collapsed branch before the branch opens to receive it. 0 opens it at\n      once.',
+      default: 700,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'The tree\'s accessible name, announced when focus enters it. Name what the tree holds.',
+      default: 'Tree',
+    },
+    marquee: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'marquee' },
+      description:
+        'Scrolls a name too long for its row while that row is hovered or keyboard focused, rests at the end, then scrolls it again. Off by default: a tree of names\n      that fit should not move. An item may set its own marquee to opt in or out on its own.',
+      default: false,
+    },
+    maxDepth: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'maxdepth' },
+      description:
+        'The deepest level a drag may produce, counting the top level as 1. A drop that would place the dragged item, or any item beneath it, deeper than this is\n      refused and reported as reorder-rejected. 0 means no limit.',
+      default: 0,
+    },
+    selection: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'selection' },
+      description:
+        'How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n      its descendants. The application owns each Tree Item\'s selected state and responds to select.',
+      values: ['none', 'single', 'multiple'],
+      default: 'none',
+    },
+  },
+}
 const props = defineProps({
   density: {
     type: null as unknown as PropType<'comfortable' | 'compact' | null>,
@@ -27,48 +80,36 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   hoverExpandDelay: checkedProp<number>(
     props['hoverExpandDelay'],
     { kind: 'terminal', name: 'number' },
     false,
     'hoverExpandDelay',
-    undefined,
-    undefined,
   ) as number,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   marquee: checkedProp<boolean>(
     props['marquee'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'marquee',
-    undefined,
-    undefined,
   ) as boolean,
   maxDepth: checkedProp<number>(
     props['maxDepth'],
     { kind: 'terminal', name: 'number' },
     false,
     'maxDepth',
-    undefined,
-    undefined,
   ) as number,
   selection: checkedProp<'none' | 'single' | 'multiple'>(
     props['selection'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'selection',
-    undefined,
-    ['none', 'single', 'multiple'],
   ) as 'none' | 'single' | 'multiple',
 }))
 void checkedProps.value
@@ -250,6 +291,7 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     data-component="ui-tree"
     role="tree"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-hover-expand-delay="reflectedProp(
       'hoverExpandDelay',

package/vue/UiTreeItem.d.ts

@@ -143,14 +143,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     disabled: boolean | null;
     selected: boolean | null;
     expanded: boolean | null;
-    accepts: string | null;
     container: boolean | null;
+    lazy: boolean | null;
+    sortable: boolean | null;
+    accepts: string | null;
     dragType: string | null;
     dropDepth: number | null;
     dropScope: string | null;
     itemId: string | null;
-    lazy: boolean | null;
-    sortable: boolean | null;
     subtreeDepth: number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiTreeItem.vue

@@ -1,12 +1,126 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    accepts: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-accepts' },
+      description:
+        'A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the\n      item.',
+      default: '',
+    },
+    container: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'container' },
+      description:
+        'Makes the item a branch even before it has children: it gets the expand button and aria-expanded, and accepts drops inside it. An item with nested items is\n      a branch without it.',
+      default: false,
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-disabled' },
+      description:
+        'Makes the item unavailable: faded, skipped by keyboard navigation, unable to expand or be dragged, and closed to drops inside it.',
+      default: false,
+    },
+    dragType: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-drag-type' },
+      description:
+        'The item\'s kind, for drag rules: it can be dropped before or after only items of the same type, and inside a branch only if that branch\'s accepts allows\n      it. Reported as sourceType and targetType.',
+      default: 'item',
+    },
+    dropDepth: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'data-drop-depth' },
+      description:
+        'Overrides the level this item counts as when the tree checks maxDepth for a drop onto it. Unset, its level in the rendered tree is used; set it when the\n      item sits deeper in the real hierarchy than the rendered tree shows.',
+    },
+    dropScope: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-drop-scope' },
+      description:
+        'Names the list the item sits in, such as its parent\'s id, and is reported as sourceScope and targetScope in the tree\'s reorder events, so a handler can\n      tell a reorder within one list from a move between lists. It never restricts where an item can be dropped; dragType and accepts do that.',
+      default: '',
+    },
+    expanded: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'expanded' },
+      description:
+        'Whether the branch shows its children, initially or when set externally. The expand button, a click on the row, and the arrow keys toggle it from there,\n      each reported as an expand event. Only meaningful for a branch.',
+      default: false,
+    },
+    itemId: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-item-id' },
+      description:
+        'The item\'s identifier, reported as sourceId and targetId in the tree\'s reorder events and as id in its expand event. A sortable item needs one to be\n      dragged, and a drop onto an item without one is not reported.',
+      default: '',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description:
+        'The item\'s accessible name, also shown as the row text unless the label slot supplies content.',
+      default: '',
+    },
+    lazy: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'lazy' },
+      description:
+        'Keeps an empty item expandable while its children are supplied later. Expanding emits expand; the item is aria-busy until child Tree Items are appended.\n      Clear lazy if loading finishes with no children.',
+      default: false,
+    },
+    marquee: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'marquee' },
+      description:
+        'Scrolls a name too long for its row while a pointer hovers the row or keyboard focus is in it, rests at the end, then scrolls it again from the start. A\n      touch does not start it. Off by default: a tree of short names should not move, and a product decides whether reading the whole name matters more than a\n      still list.',
+      default: false,
+    },
+    selected: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-selected' },
+      description:
+        'Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree\'s select request by updating\n      it.',
+      default: false,
+    },
+    sortable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'sortable' },
+      description:
+        'Gives the item a move handle. Drag it, or activate it and choose a target by a second click or the keyboard. The tree reports reorder and leaves moving the\n      item to you. Needs itemId; disabled items show no handle.',
+      default: false,
+    },
+    subtreeDepth: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'data-subtree-depth' },
+      description:
+        'Overrides how many levels sit beneath this item when the tree checks maxDepth for a drag of it. Unset, the tree counts the rendered descendants; set it\n      when some are not rendered, such as children that load later.',
+    },
+  },
+}
 const props = defineProps({
   accepts: { type: null as unknown as PropType<string | null>, default: '' },
   container: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -29,112 +143,84 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'accepts',
-    undefined,
-    undefined,
   ) as string,
   container: checkedProp<boolean>(
     props['container'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'container',
-    undefined,
-    undefined,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   dragType: checkedProp<string>(
     props['dragType'],
     { kind: 'terminal', name: 'string' },
     false,
     'dragType',
-    undefined,
-    undefined,
   ) as string,
   dropDepth: checkedProp<number>(
     props['dropDepth'],
     { kind: 'terminal', name: 'number' },
     false,
     'dropDepth',
-    undefined,
-    undefined,
   ),
   dropScope: checkedProp<string>(
     props['dropScope'],
     { kind: 'terminal', name: 'string' },
     false,
     'dropScope',
-    undefined,
-    undefined,
   ) as string,
   expanded: checkedProp<boolean>(
     props['expanded'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'expanded',
-    undefined,
-    undefined,
   ) as boolean,
   itemId: checkedProp<string>(
     props['itemId'],
     { kind: 'terminal', name: 'string' },
     false,
     'itemId',
-    undefined,
-    undefined,
   ) as string,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   lazy: checkedProp<boolean>(
     props['lazy'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'lazy',
-    undefined,
-    undefined,
   ) as boolean,
   marquee: checkedProp<boolean>(
     props['marquee'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'marquee',
-    undefined,
-    undefined,
   ) as boolean,
   selected: checkedProp<boolean>(
     props['selected'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'selected',
-    undefined,
-    undefined,
   ) as boolean,
   sortable: checkedProp<boolean>(
     props['sortable'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'sortable',
-    undefined,
-    undefined,
   ) as boolean,
   subtreeDepth: checkedProp<number>(
     props['subtreeDepth'],
     { kind: 'terminal', name: 'number' },
     false,
     'subtreeDepth',
-    undefined,
-    undefined,
   ),
 }))
 void checkedProps.value
@@ -200,6 +286,32 @@ const internalExpanded = ref(false)
 const structuralLevel = ref(1)
 const tabStop = ref(false)
 const isContainer = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(structuralLevel.value == null || Number.isInteger(structuralLevel.value))) {
+    return guardedPrevious
+  }
+  return guardedPrevious = structuralLevel.value
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (!(isContainer.value == null || typeof isContainer.value === 'boolean')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = !isContainer.value
+})
+let guardedBinding2Previous: any
+const guardedBinding2 = computed(() => {
+  if (
+    !((internalExpanded.value == null || typeof internalExpanded.value === 'boolean')
+      && (isContainer.value == null || typeof isContainer.value === 'boolean'))
+  ) return guardedBinding2Previous
+  return guardedBinding2Previous = !(isContainer.value && internalExpanded.value)
+})
+provide('html-next:ui-tree-item:internalExpanded', internalExpanded)
+provide('html-next:ui-tree-item:structuralLevel', structuralLevel)
+provide('html-next:ui-tree-item:tabStop', tabStop)
+provide('html-next:ui-tree-item:isContainer', isContainer)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -270,9 +382,10 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     role="treeitem"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
-    :aria-level="structuralLevel"
+    :aria-level="guarded"
     :aria-selected="checkedProps.selected ?? undefined"
     :aria-disabled="checkedProps.disabled ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-accepts="reflectedProp('accepts', 'accepts', checkedProps.accepts, undefined, true)"
     :data-container="reflectedProp('container', 'container', checkedProps.container, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
@@ -321,7 +434,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
         class="disclosure"
         type="button"
         :disabled="checkedProps.disabled ?? undefined"
-        :hidden="!isContainer"
+        :hidden="guardedBinding"
         ref="disclosure"
       >
         <span class="disclosure-icon" aria-hidden="true"></span>
@@ -341,9 +454,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
       <span class="actions" ref="actions"><slot name="actions" /></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
-    <div class="children" role="group" :hidden="!(isContainer && internalExpanded)" ref="children">
-      <slot />
-    </div>
+    <div class="children" role="group" :hidden="guardedBinding2" ref="children"><slot /></div>
     <span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span>
   </div>
 </template>

package/vue/chunks/UiActionBar.js

@@ -32,6 +32,6 @@ var UiActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			])], 16);
 		};
 	}
-}), [["__scopeId", "data-v-75427585"]]);
+}), [["__scopeId", "data-v-c6d68b77"]]);
 //#endregion
 export { UiActionBar_default as t };