@threadlabs/looma 0.21.6 → 0.22.0

package/vue/UiInput.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"
@@ -23,10 +23,120 @@ import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { readBoundControl, vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, selectedPropNode } from './props'
+import { checkedProp, selectedPropNode, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Prevents editing and form submission.',
+      default: false,
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-invalid' },
+      description: 'Exposes invalid state to assistive technology and styling.',
+      default: false,
+    },
+    readonly: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'readonly' },
+      description: 'Allows selection without allowing edits.',
+      default: false,
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description: 'Marks the control as required for form validation.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Height, padding, and type size, matching Button\'s sizes so a field and a button of one size share a row. sm is the small control height (2rem by default)\n      with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding. Under a\n      coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. Change it after render through this option; the element\'s size property is\n      the native one.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    type: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'type' },
+      description:
+        'The native input mode. Number and range modes accept numeric values; the other supported modes accept strings.',
+      values: [
+        'text',
+        'search',
+        'tel',
+        'url',
+        'email',
+        'password',
+        'date',
+        'month',
+        'week',
+        'time',
+        'datetime-local',
+        'number',
+        'range',
+        'color',
+      ],
+      default: 'text',
+    },
+    value: {
+      type: {
+        kind: 'selected',
+        from: 'type',
+        options: [
+          { value: 'text', type: { kind: 'terminal', name: 'string' } },
+          { value: 'search', type: { kind: 'terminal', name: 'string' } },
+          { value: 'tel', type: { kind: 'terminal', name: 'string' } },
+          { value: 'url', type: { kind: 'terminal', name: 'string' } },
+          { value: 'email', type: { kind: 'terminal', name: 'string' } },
+          { value: 'password', type: { kind: 'terminal', name: 'string' } },
+          { value: 'date', type: { kind: 'terminal', name: 'string' } },
+          { value: 'month', type: { kind: 'terminal', name: 'string' } },
+          { value: 'week', type: { kind: 'terminal', name: 'string' } },
+          { value: 'time', type: { kind: 'terminal', name: 'string' } },
+          { value: 'datetime-local', type: { kind: 'terminal', name: 'string' } },
+          { value: 'number', type: { kind: 'terminal', name: 'number' } },
+          { value: 'range', type: { kind: 'terminal', name: 'number' } },
+          { value: 'color', type: { kind: 'terminal', name: 'string' } },
+        ],
+      },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The input\'s value: text, or a number for type="number" and type="range" fields. Setting or changing it replaces the live text; between changes the user\'s\n      typing stands, so follow input events to keep it in step. A number field keeps text that means the same number, such as 1.0 for 1. It is also the input\'s\n      default, so a form reset returns to it.',
+      select: {
+        from: 'type',
+        options: [
+          { value: 'text', type: { kind: 'terminal', name: 'string' } },
+          { value: 'search', type: { kind: 'terminal', name: 'string' } },
+          { value: 'tel', type: { kind: 'terminal', name: 'string' } },
+          { value: 'url', type: { kind: 'terminal', name: 'string' } },
+          { value: 'email', type: { kind: 'terminal', name: 'string' } },
+          { value: 'password', type: { kind: 'terminal', name: 'string' } },
+          { value: 'date', type: { kind: 'terminal', name: 'string' } },
+          { value: 'month', type: { kind: 'terminal', name: 'string' } },
+          { value: 'week', type: { kind: 'terminal', name: 'string' } },
+          { value: 'time', type: { kind: 'terminal', name: 'string' } },
+          { value: 'datetime-local', type: { kind: 'terminal', name: 'string' } },
+          { value: 'number', type: { kind: 'terminal', name: 'number' } },
+          { value: 'range', type: { kind: 'terminal', name: 'number' } },
+          { value: 'color', type: { kind: 'terminal', name: 'string' } },
+        ],
+      },
+    },
+  },
+}
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -80,64 +190,32 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
-    undefined,
-    undefined,
   ) as boolean,
   readonly: checkedProp<boolean>(
     props['readonly'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'readonly',
-    undefined,
-    undefined,
   ) as boolean,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md', 'lg'],
   ) as 'sm' | 'md' | 'lg',
-  type: checkedProp<T0>(
-    props['type'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'type',
-    undefined,
-    [
-      'text',
-      'search',
-      'tel',
-      'url',
-      'email',
-      'password',
-      'date',
-      'month',
-      'week',
-      'time',
-      'datetime-local',
-      'number',
-      'range',
-      'color',
-    ],
-  ) as T0,
+  type: checkedProp<T0>(props['type'], { kind: 'terminal', name: 'keyword' }, false, 'type') as T0,
   value: checkedProp<
     T0 extends 'text' ? string | null
       : T0 extends 'search' ? string | null
@@ -174,8 +252,6 @@ const checkedProps = computed(() => ({
     ]),
     false,
     'value',
-    undefined,
-    undefined,
   ),
   modelValue: checkedProp<
     T0 extends 'text' ? string | null
@@ -213,8 +289,6 @@ const checkedProps = computed(() => ({
     ]),
     false,
     'modelValue',
-    undefined,
-    undefined,
   ),
 }))
 void checkedProps.value
@@ -341,6 +415,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     :readonly="checkedProps.readonly ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"

package/vue/UiInputGroup.vue

@@ -1,12 +1,24 @@
-<!-- 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: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Fades the group\'s framing to match a disabled input inside it. Disable the input itself too.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
 })
@@ -16,8 +28,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -100,6 +110,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   <div
     data-component="ui-input-group"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-input-group-state="hostState || undefined"
     ref="root"

package/vue/UiList.vue

@@ -1,12 +1,52 @@
-<!-- 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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { preserveRootFocus } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    as: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'as' },
+      description:
+        'The native list element. Use ol when item order matters; its native numbers are shown.',
+      values: ['ul', 'ol'],
+      default: 'ul',
+    },
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description:
+        'How much room each item takes. comfortable is a full row, easy to point at, for lists of things to open; compact sets items close together with no row\n      padding, for a short list of facts inside other content, such as the features a plan includes.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+    layout: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'layout' },
+      description:
+        'How the items are laid out. Rows stack the items one per line, for a list read top to bottom. Grid sets them in as many columns as fit, each at least\n      --ui-list-min-item-width (14rem) wide, for card items such as pinned or featured entries.',
+      values: ['rows', 'grid'],
+      default: 'rows',
+    },
+    markers: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'markers' },
+      description:
+        'Show disc bullets for a ul of native li elements. An ol always shows native numbers.',
+      values: ['none', 'disc'],
+      default: 'none',
+    },
+  },
+}
 const props = defineProps({
   as: { type: null as unknown as PropType<'ul' | 'ol' | null>, default: 'ul' },
   density: {
@@ -17,37 +57,26 @@ const props = defineProps({
   markers: { type: null as unknown as PropType<'none' | 'disc' | null>, default: 'none' },
 })
 const checkedProps = computed(() => ({
-  as: checkedProp<'ul' | 'ol'>(
-    props['as'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'as',
-    undefined,
-    ['ul', 'ol'],
-  ) as 'ul' | 'ol',
+  as: checkedProp<'ul' | 'ol'>(props['as'], { kind: 'terminal', name: 'keyword' }, false, 'as') as
+    | 'ul'
+    | 'ol',
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   layout: checkedProp<'rows' | 'grid'>(
     props['layout'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'layout',
-    undefined,
-    ['rows', 'grid'],
   ) as 'rows' | 'grid',
   markers: checkedProp<'none' | 'disc'>(
     props['markers'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'markers',
-    undefined,
-    ['none', 'disc'],
   ) as 'none' | 'disc',
 }))
 void checkedProps.value
@@ -128,6 +157,7 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'ol'"
     data-component="ui-list"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
@@ -142,6 +172,7 @@ const hostState = computed(() =>
     data-component="ui-list"
     role="list"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"

package/vue/UiListItem.vue

@@ -1,11 +1,32 @@
-<!-- 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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    current: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-current' },
+      description:
+        'Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology\n      announces. Set it on one item at a time.',
+      default: false,
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,\n      for items set in a grid (a List with layout="grid"). Both have the same parts: leading, title, description, and trailing.',
+      values: ['row', 'card'],
+      default: 'row',
+    },
+  },
+}
 const props = defineProps({
   current: { type: null as unknown as PropType<boolean | null>, default: false },
   variant: { type: null as unknown as PropType<'row' | 'card' | null>, default: 'row' },
@@ -16,16 +37,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'current',
-    undefined,
-    undefined,
   ) as boolean,
   variant: checkedProp<'row' | 'card'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
-    undefined,
-    ['row', 'card'],
   ) as 'row' | 'card',
 }))
 void checkedProps.value
@@ -99,6 +116,7 @@ const hostState = computed(() =>
     data-component="ui-list-item"
     v-bind="nativeAttrs($attrs)"
     :aria-current="checkedProps.current ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"

package/vue/UiListbox.d.ts

@@ -37,12 +37,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: string) => any;
     change: (event: CustomEvent<{
         readonly value: string | null;
         readonly values: readonly (string)[];
         readonly trigger: "keyboard" | "pointer";
     }>) => any;
+    "update:value": (value: string) => any;
     "update:values": (value: readonly string[]) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
@@ -78,21 +78,21 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
     onChange?: ((event: CustomEvent<{
         readonly value: string | null;
         readonly values: readonly (string)[];
         readonly trigger: "keyboard" | "pointer";
     }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: readonly string[]) => any) | undefined;
 }>, {
     values: readonly string[] | null;
     name: string | null;
     value: string | null;
+    invalid: boolean | null;
     rows: number | null;
     disabled: boolean | null;
     multiple: boolean | null;
-    invalid: boolean | null;
     required: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiListbox.vue

@@ -1,21 +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,
   defineComponent,
   getCurrentInstance,
   h,
+  provide,
   ref,
   useTemplateRef,
   watchSyncEffect,
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-disabled' },
+      description: 'Prevents selection and form submission.',
+      default: false,
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'invalid' },
+      description: 'Exposes invalid state to assistive technology and styling.',
+      default: false,
+    },
+    multiple: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-multiselectable' },
+      description: 'Allows several choices, each shown with a checkmark when selected.',
+      default: false,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description: 'The form field name used for each selected value.',
+      default: '',
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-required' },
+      description: 'Requires at least one choice before form submission.',
+      default: false,
+    },
+    rows: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'The maximum number of choices visible before the list scrolls. Use at least two.',
+      default: 5,
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The initial or externally set single selection. Authored selected options work when it is omitted.',
+    },
+    values: {
+      type: { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+      required: false,
+      target: { attribute: 'values' },
+      description:
+        'The initial or externally set selections in multiple mode. Authored selected options work when it is omitted.',
+    },
+  },
+}
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -32,64 +94,43 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
-    undefined,
-    undefined,
   ) as boolean,
   multiple: checkedProp<boolean>(
     props['multiple'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'multiple',
-    undefined,
-    undefined,
   ) as boolean,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
   rows: checkedProp<number>(
     props['rows'],
     { kind: 'terminal', name: 'number' },
     false,
     'rows',
-    undefined,
-    undefined,
   ) as number,
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    undefined,
-    undefined,
-  ),
+  value: checkedProp<string>(props['value'], { kind: 'terminal', name: 'string' }, false, 'value'),
   values: checkedProp<readonly (string)[]>(
     props['values'],
     { kind: 'list', item: { kind: 'terminal', name: 'string' } },
     false,
     'values',
-    undefined,
-    undefined,
   ),
 }))
 void checkedProps.value
@@ -203,6 +244,12 @@ const guardedBinding2 = computed(() => {
   }
   return guardedBinding2Previous = hasSelection.value ? true : undefined
 })
+provide('html-next:ui-listbox:choices', choices)
+provide('html-next:ui-listbox:selection', selection)
+provide('html-next:ui-listbox:hasSelection', hasSelection)
+provide('html-next:ui-listbox:active', active)
+provide('html-next:ui-listbox:uid', uid)
+provide('html-next:ui-listbox:validationError', validationError)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -303,6 +350,7 @@ function uniqueKeys<T>(
     :aria-required="checkedProps.required ?? undefined"
     :aria-invalid="guarded"
     :style="{ '--_rows': checkedProps.rows ?? undefined }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"