@threadlabs/looma 0.22.9 → 0.22.10

package/vue/UiButton.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, preserveRootFocus, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -124,7 +124,7 @@ const propValidityContract = {
       default: 'outline',
     },
   },
-}
+} as const
 const props = defineProps({
   align: { type: null as unknown as PropType<'center' | 'start' | null>, default: 'center' },
   as: { type: null as unknown as PropType<'button' | 'a' | null>, default: 'button' },
@@ -152,80 +152,120 @@ const props = defineProps({
     default: 'outline',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  align: 'center',
+  as: 'button',
+  disabled: false,
+  href: null,
+  loading: false,
+  pending: false,
+  rel: null,
+  shape: 'rounded',
+  size: 'md',
+  stretch: false,
+  target: null,
+  tone: 'accent',
+  type: 'button',
+  variant: 'outline',
+}
 const checkedProps = computed(() => ({
   align: checkedProp<'center' | 'start'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
+    acceptedProps,
   ) as 'center' | 'start',
   as: checkedProp<'button' | 'a'>(
     props['as'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
+    acceptedProps,
   ) as 'button' | 'a',
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
-  href: checkedProp<string>(props['href'], { kind: 'terminal', name: 'string' }, false, 'href'),
+  href: checkedProp<string>(
+    props['href'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'href',
+    acceptedProps,
+  ),
   loading: checkedProp<boolean>(
     props['loading'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'loading',
+    acceptedProps,
   ) as boolean,
   pending: checkedProp<boolean>(
     props['pending'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'pending',
+    acceptedProps,
   ) as boolean,
-  rel: checkedProp<string>(props['rel'], { kind: 'terminal', name: 'string' }, false, 'rel'),
+  rel: checkedProp<string>(
+    props['rel'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'rel',
+    acceptedProps,
+  ),
   shape: checkedProp<'rounded' | 'pill'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
+    acceptedProps,
   ) as 'rounded' | 'pill',
   size: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'xs' | 'sm' | 'md' | 'lg',
   stretch: checkedProp<boolean>(
     props['stretch'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stretch',
+    acceptedProps,
   ) as boolean,
   target: checkedProp<string>(
     props['target'],
     { kind: 'terminal', name: 'string' },
     false,
     'target',
+    acceptedProps,
   ),
   tone: checkedProp<'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info',
   type: checkedProp<'button' | 'submit' | 'reset'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'type',
+    acceptedProps,
   ) as 'button' | 'submit' | 'reset',
   variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link',
 }))
 void checkedProps.value
@@ -314,6 +354,31 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     definition: './components/ui-button/ui-button.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: [
+    'align',
+    'as',
+    'disabled',
+    'href',
+    'loading',
+    'pending',
+    'rel',
+    'shape',
+    'size',
+    'stretch',
+    'target',
+    'tone',
+    'type',
+    'variant',
+  ],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 
 function text(value: unknown): string {
@@ -361,7 +426,7 @@ function attribute(value: unknown): any {
         `${(checkedProps.loading || checkedProps.pending) && !checkedProps.disabled}`
       ],
     )"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
@@ -402,7 +467,7 @@ function attribute(value: unknown): any {
       ],
     )"
     :aria-busy="checkedProps.loading || checkedProps.pending"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"

package/vue/UiCallout.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -18,7 +18,7 @@ const propValidityContract = {
       default: 'info',
     },
   },
-}
+} as const
 const props = defineProps({
   tone: {
     type: null as unknown as PropType<
@@ -27,12 +27,14 @@ const props = defineProps({
     default: 'info',
   },
 })
+const acceptedProps: Record<string, unknown> = { tone: 'info' }
 const checkedProps = computed(() => ({
   tone: checkedProp<'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger',
 }))
 void checkedProps.value
@@ -104,7 +106,7 @@ const hostState = computed(() =>
     data-component="ui-callout"
     role="note"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-callout-state="hostState || undefined"
   >

package/vue/UiCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -46,7 +46,7 @@ const propValidityContract = {
       default: 'outlined',
     },
   },
-}
+} as const
 const props = defineProps({
   as: {
     type: null as unknown as PropType<'div' | 'section' | 'article' | 'aside' | null>,
@@ -59,30 +59,40 @@ const props = defineProps({
     default: 'outlined',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  as: 'div',
+  padding: 'md',
+  tone: 'neutral',
+  variant: 'outlined',
+}
 const checkedProps = computed(() => ({
   as: checkedProp<'div' | 'section' | 'article' | 'aside'>(
     props['as'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
+    acceptedProps,
   ) as 'div' | 'section' | 'article' | 'aside',
   padding: checkedProp<'sm' | 'md' | 'lg'>(
     props['padding'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'padding',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'neutral' | 'danger',
   variant: checkedProp<'outlined' | 'subtle' | 'elevated'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'outlined' | 'subtle' | 'elevated',
 }))
 void checkedProps.value
@@ -165,7 +175,7 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'section'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -179,7 +189,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'article'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -193,7 +203,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'aside'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -207,7 +217,7 @@ const hostState = computed(() =>
     v-else
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"

package/vue/UiCheckbox.vue

@@ -1,10 +1,10 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 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 { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -75,7 +75,7 @@ const propValidityContract = {
       default: 'on',
     },
   },
-}
+} as const
 const props = defineProps({
   checked: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -86,54 +86,72 @@ const props = defineProps({
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
   value: { type: null as unknown as PropType<string | null>, default: 'on' },
 })
+const acceptedProps: Record<string, unknown> = {
+  checked: false,
+  disabled: false,
+  indeterminate: false,
+  invalid: false,
+  name: '',
+  required: false,
+  size: 'md',
+  value: 'on',
+}
 const checkedProps = computed(() => ({
   checked: checkedProp<boolean>(
     props['checked'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'checked',
+    acceptedProps,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   indeterminate: checkedProp<boolean>(
     props['indeterminate'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'indeterminate',
+    acceptedProps,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
+    acceptedProps,
   ) as boolean,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
+    acceptedProps,
   ) as string,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
+    acceptedProps,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
+    acceptedProps,
   ) as string,
 }))
 void checkedProps.value
@@ -242,6 +260,25 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     definition: './components/ui-checkbox/ui-checkbox.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: [
+    'checked',
+    'disabled',
+    'indeterminate',
+    'invalid',
+    'name',
+    'required',
+    'size',
+    'value',
+  ],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { input: inputElement, description: descriptionElement },
   state: { internalChecked },
 })
@@ -251,7 +288,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   <label
     data-component="ui-checkbox"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-indeterminate="reflectedProp('indeterminate', 'indeterminate', checkedProps.indeterminate, undefined, false)"

package/vue/UiCluster.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -41,7 +41,7 @@ const propValidityContract = {
       values: ['wrap', 'nowrap'],
     },
   },
-}
+} as const
 const props = defineProps({
   align: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
@@ -54,30 +54,35 @@ const props = defineProps({
   },
   wrap: { type: null as unknown as PropType<'wrap' | 'nowrap' | null>, default: null },
 })
+const acceptedProps: Record<string, unknown> = { align: null, gap: null, justify: null, wrap: null }
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center' | 'end' | 'stretch'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
+    acceptedProps,
   ),
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
+    acceptedProps,
   ),
   justify: checkedProp<'start' | 'center' | 'end' | 'between'>(
     props['justify'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'justify',
+    acceptedProps,
   ),
   wrap: checkedProp<'wrap' | 'nowrap'>(
     props['wrap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'wrap',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -155,7 +160,7 @@ const hostState = computed(() =>
   <div
     data-component="ui-cluster"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"