@threadlabs/looma 0.22.9 → 0.22.11

package/vue/UiSelect.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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { readBoundControl, SelectedOptions, vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -48,7 +48,7 @@ const propValidityContract = {
         'The value of the selected option, initially or when set externally. It is also the default, so a form reset returns to it rather than to the first\n      option.',
     },
   },
-}
+} as const
 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 },
@@ -57,37 +57,55 @@ const props = defineProps({
   value: { type: null as unknown as PropType<string | null>, default: null },
   modelValue: { type: null as unknown as PropType<string | null | undefined> },
 })
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  invalid: false,
+  required: false,
+  size: 'md',
+  value: null,
+}
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
+    acceptedProps,
   ) as boolean,
   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'),
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    acceptedProps,
+  ),
   modelValue: checkedProp<string | null>(
     props.modelValue,
     { kind: 'terminal', name: 'string' },
     false,
     'modelValue',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -168,6 +186,16 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     definition: './components/ui-select/ui-select.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: ['disabled', 'invalid', 'required', 'size', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 </script>
 
@@ -178,7 +206,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     :disabled="checkedProps.disabled ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"

package/vue/UiSeparator.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,19 +18,21 @@ const propValidityContract = {
       default: 'horizontal',
     },
   },
-}
+} as const
 const props = defineProps({
   orientation: {
     type: null as unknown as PropType<'horizontal' | 'vertical' | null>,
     default: 'horizontal',
   },
 })
+const acceptedProps: Record<string, unknown> = { orientation: 'horizontal' }
 const checkedProps = computed(() => ({
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
+    acceptedProps,
   ) as 'horizontal' | 'vertical',
 }))
 void checkedProps.value
@@ -94,7 +96,7 @@ if (
     data-component="ui-separator"
     v-bind="nativeAttrs($attrs)"
     :aria-orientation="checkedProps.orientation ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
   >
 </template>

package/vue/UiSidebar.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, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -77,7 +77,7 @@ const propValidityContract = {
       default: 0,
     },
   },
-}
+} as const
 const props = defineProps({
   breakpoint: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
   collapsed: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -89,60 +89,80 @@ const props = defineProps({
   side: { type: null as unknown as PropType<'start' | 'end' | null>, default: 'start' },
   width: { type: null as unknown as PropType<number | null>, default: 0 },
 })
+const acceptedProps: Record<string, unknown> = {
+  breakpoint: 'md',
+  collapsed: false,
+  maxWidth: 480,
+  minWidth: 200,
+  resizable: false,
+  resizeLabel: 'Resize sidebar',
+  resizeStep: 16,
+  side: 'start',
+  width: 0,
+}
 const checkedProps = computed(() => ({
   breakpoint: checkedProp<'sm' | 'md' | 'lg'>(
     props['breakpoint'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'breakpoint',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
   collapsed: checkedProp<boolean>(
     props['collapsed'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'collapsed',
+    acceptedProps,
   ) as boolean,
   maxWidth: checkedProp<number>(
     props['maxWidth'],
     { kind: 'terminal', name: 'number' },
     false,
     'maxWidth',
+    acceptedProps,
   ) as number,
   minWidth: checkedProp<number>(
     props['minWidth'],
     { kind: 'terminal', name: 'number' },
     false,
     'minWidth',
+    acceptedProps,
   ) as number,
   resizable: checkedProp<boolean>(
     props['resizable'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'resizable',
+    acceptedProps,
   ) as boolean,
   resizeLabel: checkedProp<string>(
     props['resizeLabel'],
     { kind: 'terminal', name: 'string' },
     false,
     'resizeLabel',
+    acceptedProps,
   ) as string,
   resizeStep: checkedProp<number>(
     props['resizeStep'],
     { kind: 'terminal', name: 'number' },
     false,
     'resizeStep',
+    acceptedProps,
   ) as number,
   side: checkedProp<'start' | 'end'>(
     props['side'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'side',
+    acceptedProps,
   ) as 'start' | 'end',
   width: checkedProp<number>(
     props['width'],
     { kind: 'terminal', name: 'number' },
     false,
     'width',
+    acceptedProps,
   ) as number,
 }))
 void checkedProps.value
@@ -273,6 +293,26 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     definition: './components/ui-sidebar/ui-sidebar.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: [
+    'breakpoint',
+    'collapsed',
+    'maxWidth',
+    'minWidth',
+    'resizable',
+    'resizeLabel',
+    'resizeStep',
+    'side',
+    'width',
+  ],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { resizer: resizerElement },
   state: { internalCollapsed, drawer },
 })
@@ -282,7 +322,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   <aside
     data-component="ui-sidebar"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
     :data-collapsed="reflectedProp('collapsed', 'collapsed', checkedProps.collapsed, undefined, false)"
     :data-max-width="reflectedProp('maxWidth', 'max-width', checkedProps.maxWidth, undefined, false)"

package/vue/UiSpinner.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'
@@ -25,23 +25,26 @@ const propValidityContract = {
       default: 'md',
     },
   },
-}
+} as const
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: '' },
   size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
 })
+const acceptedProps: Record<string, unknown> = { label: '', size: 'md' }
 const checkedProps = computed(() => ({
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
   size: checkedProp<'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'sm' | 'md',
 }))
 void checkedProps.value
@@ -156,7 +159,7 @@ function attribute(value: unknown): any {
     : attribute(
       (({ true: null, false: 'true' }) as Record<string, any>)[`${checkedProps.label !== ''}`],
     )"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-spinner-state="hostState || undefined"

package/vue/UiStack.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'
@@ -33,7 +33,7 @@ const propValidityContract = {
       values: ['start', 'center', 'end', 'between'],
     },
   },
-}
+} as const
 const props = defineProps({
   align: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
@@ -45,24 +45,28 @@ const props = defineProps({
     default: null,
   },
 })
+const acceptedProps: Record<string, unknown> = { align: null, gap: null, justify: 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,
   ),
 }))
 void checkedProps.value
@@ -135,7 +139,7 @@ const hostState = computed(() =>
   <div
     data-component="ui-stack"
     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)"

package/vue/UiStatusMessage.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'
@@ -35,7 +35,7 @@ const propValidityContract = {
       default: 'inline',
     },
   },
-}
+} as const
 const props = defineProps({
   heading: { type: null as unknown as PropType<string | null>, default: '' },
   kind: {
@@ -47,24 +47,28 @@ const props = defineProps({
     default: 'inline',
   },
 })
+const acceptedProps: Record<string, unknown> = { heading: '', kind: 'empty', layout: 'inline' }
 const checkedProps = computed(() => ({
   heading: checkedProp<string>(
     props['heading'],
     { kind: 'terminal', name: 'string' },
     false,
     'heading',
+    acceptedProps,
   ) as string,
   kind: checkedProp<'empty' | 'loading' | 'error'>(
     props['kind'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'kind',
+    acceptedProps,
   ) as 'empty' | 'loading' | 'error',
   layout: checkedProp<'inline' | 'panel' | 'fill'>(
     props['layout'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'layout',
+    acceptedProps,
   ) as 'inline' | 'panel' | 'fill',
 }))
 void checkedProps.value
@@ -153,7 +157,7 @@ function attribute(value: unknown): any {
     :role="attribute(
       (({ true: 'alert', false: 'status' }) as Record<string, any>)[`${checkedProps.kind === 'error'}`],
     )"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
     :data-kind="reflectedProp('kind', 'kind', checkedProps.kind, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"

package/vue/UiSwitch.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 })
 
@@ -59,7 +59,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 },
@@ -68,42 +68,56 @@ 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,
+  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,
   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
@@ -208,6 +222,16 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     definition: './components/ui-switch/ui-switch.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', 'name', 'required', 'size', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { input: inputElement, description: descriptionElement },
   state: { internalChecked },
 })
@@ -217,7 +241,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   <label
     data-component="ui-switch"
     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-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"

package/vue/UiSwitcher.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, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -41,7 +41,7 @@ const propValidityContract = {
       values: ['xs', 'sm', 'md', 'lg'],
     },
   },
-}
+} as const
 const props = defineProps({
   align: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
@@ -51,25 +51,40 @@ const props = defineProps({
   limit: { type: null as unknown as PropType<number | null>, default: null },
   threshold: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null>, default: null },
 })
+const acceptedProps: Record<string, unknown> = {
+  align: null,
+  gap: null,
+  limit: null,
+  threshold: 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,
+  ),
+  limit: checkedProp<number>(
+    props['limit'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'limit',
+    acceptedProps,
   ),
-  limit: checkedProp<number>(props['limit'], { kind: 'terminal', name: 'integer' }, false, 'limit'),
   threshold: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['threshold'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'threshold',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -154,6 +169,16 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
     definition: './components/ui-switcher/ui-switcher.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', 'gap', 'limit', 'threshold'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { overLimit },
 })
 </script>
@@ -162,7 +187,7 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
   <div
     data-component="ui-switcher"
     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-limit="reflectedProp('limit', 'limit', checkedProps.limit, undefined, false)"